参考视频黑马程序员vue前端基础教程-4个小时带你快速入门vue_哔哩哔哩_bilibili 一、导包
要先把最主要的Vue包导入才能正式的开始学习，参考文档介绍 — Vue.js (vuejs.org)
运行第一个vue程序： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> {{ massage }} </div> //两种环境可选 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ massage:'你好', } }) </script> </body> </html>el 挂载
针对以下代码的? ?el （挂载）? 属性
var app = new Vue({ el:"#app", data:{ massage:'你好', } })id选择器? ? ? ? el:"#app"? ?->推荐
class选择器? ?el:".app"
标签选择器? ? el:"div" 等各种标签? 标签仅支持双标签 并且不支持body、html标签
data? 数据 对应的值可以在里面用{{key}}表示，数组使用下标表示发，同时
v-text
v-text指令的作用是：设置标签的内容（trxtContent）
默认写法会替代全部的内容，使用差值表达式{{}}可以替换指定的内容
<body> <div id="app"> <h2 v-text="massage +'!'"> </h2> <h2 v-text="info"></h2> <h2>{{massage}}+!</h2> <!-- 可实现拼接操作 --> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ massage:'你好', info:"小谭工作室" } }) </script> </body>显示内容：
v-html
v-html指令的作用是：设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么，只会解析为文本
解析文本使用v-text，需要解析html结构使用v-html
<body> <div id="app"> <h2 v-text="massage"> </h2> <h2 v-html="massage"></h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ massage:"<a href='https://·'>百度一下</a>" } }) </script> </body>?显示内容
v-on? methods 方法
v-on指令的作用是：为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
<body> <div id="app"> <input type="button" value="v-on指令" v-on:click="doit" /> <input type="button" value="v-on简写" @click="doit"> <input type="button" value="双击事件" @dblclick="qq"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ }, methods:{ doit:function(){ alert("当世俗不再厌倦的时候，我也不再到来！ ") }, qq:function(){ alert("经历不止") } } }) </script> </body>显示内容：
单击后响应：
事件的添加：
<body> <div id="app"> <h3 id="app" @click="changeFood"> {{massage}}</h3> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ massage:"重庆小面" }, methods:{ changeFood:function(){ this.massage+="好好吃！" } } }) </script> </body>页面显示：
单击之后：
实现一个计数器： <body> <div id="app"> <span><button @click="del">-</button> </span> <span>{{num}}</span> <span><button @click="add">+</button></span> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ num:1 }, methods:{ add:function(){ //console.log(this.num) if(this.num<10){ this.num++; } else { alert("数量大于10") } }, del:function(){ //console.log(this.num) if(this.num>0){ this.num--; } else{ alert("数量少于0") } } } }) </script> </body>
显示结果：
v-show
v-show指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会被解析为布尔值--（可写表达式）
值为true元素显示，值为false元素隐藏
数据改变之后，对应元素的显示状态会同步更新
<body> <div id="app"> <button @click="change">切换状态</button> <img v-show="isShow" src="./img/001.jpg" > </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ isShow :false }, methods:{ change:function(){ this.isShow = !this.isShow } } }) </script> </body>显示内容：
v-if
v-if指令的作用是：根据表达式的真假切换元素的显示状态
本质是通过操作dom元素来切换显示状态
表达式的值为true，元素存在与dom树中，为false，从dom树中移除
<body> <div id="app"> <input type="button" value="切换显示" @click="toIsShow"> <p v-if="isShow">浅浅的程序员</p> <p v-show="isShow">浅浅的程序员 - v-show修饰</p> <input type="button" value="增加" @click="toIfShowAdd"> <input type="button" value="减少" @click="toIfShowDel"> <h2 v-if="toIfShow>=18">条件判断</h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ isShow :false, toIfShow:17 }, methods:{ toIsShow:function(){ this.isShow = !this.isShow }, toIfShowAdd:function(){ this.toIfShow++; }, toIfShowDel:function(){ this.toIfShow--; } } }) </script> </body>显示内容：
?
v-bind
v-bind 指令的作用是：为元素绑定属性
完整写法是v-bind:属性名
简写的话可以直接省略v-bind，只保留：属性名
需要动态增删class建议使用对象的方式
<body> <style> .active{ border: 10px solid red; } </style> <div id="app"> <img v-bind:src="imgSrc" alt=""> <br> <img :src="imgSrc" alt="" :title="imgTitle+'浅浅的程序员'" :class="isActive?'active':''" @click="toggleActive"> <br> <img :src="imgSrc" alt="" :title="imgTitle+'浅浅的程序员'" :class="{active:isActive}" @click="toggleActive"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ imgSrc:"./img/001.jpg", imgTitle:"小猫壁纸", isActive:false }, methods:{ toggleActive:function(){ this.isActive = !this.isActive } } }) </script> </body>展示内容：
案例：
实现图片的切换
<body> <div id="app"> <div><input type="button" value="上一张" v-show="index!=0" @click="prev"></div> <div><img :src="imgSrc" alt="" width="576px" height="324px"></div> <div><input type="button" value="下一张" v-show="index!=imgArr.length-1" @click="next"></div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ imgArr:[ //注意路径的反斜杠 "./img/000.jpg", "./img/001.jpg", "./img/002.jpg", "./img/003.jpg", "./img/004.jpg", "./img/005.jpg", "./img/006.jpg" ], index:0, isOpen:true, imgSrc:"./img/000.jpg" }, methods:{ prev:function(){ this.index--, this.imgSrc=this.imgArr[this.index] }, next:function(){ this.index++, this.imgSrc=this.imgArr[this.index] } } }) </script> </body>效果图：
v-for
v-for?指令的作用是：根据数据生成列表结构
数组经常和 v-for 结合使用
语法是 (item,index) in 数据
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的
<body> <div id="app"> <input type="button" value="添加数据" @click="add"> <input type="button" value="删除数据" @click="remove"> <ul> <li v-for="(item,index) in arr"> 第{{ index+1 }}个数据是：{{ item }} </li> </ul> <h2 v-for="item in eat" v-bind:title="item.name"> {{ item.name }} </h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ arr:["重庆","四川","贵州","云南"], eat:[ {name:"炸鸡配汉堡"}, {name:"可乐配薯条"}, {name:"秀才配闺房"} ] }, methods:{ add:function(){ this.eat.push({name:"祖国为人民"}) }, remove:function(){ this.eat.shift(); } } }) </script> </body>显示效果：
v-on补充
更多参考：API — Vue.js (vuejs.org)
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上 .修饰符 可以对事件进行限制 .enter 可以限制触发的按键为回车 <body> <div id="app"> <input type="button" value="点击" @click="doIt('拿高薪','掉头发')"> <input type="text" @keyup.enter="sayHi"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", methods:{ doIt:function(p1,p2){ console.log("做it"); console.log(p1) console.log(p2) }, sayHi:function(){ alert("你好，小谭！") } } }) </script> </body>显示效果：
v-mode
v-model 指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<—双向绑定—>表单元素的值
<body> <div id="app"> <input type="button" value="修改message" @click="setM"> <input type="text" v-model="message" @keyup.enter="getM"> <h2> {{ message }} </h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ message:"浅浅的工作室" }, methods:{ setM:function(){ alert(this.message) }, getM:function(){ this.message="小谭工作室" } } }) </script> </body>显示效果：
关于Vue的基础用法已经完结
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #Vue快速入门
