v-text
设置标签的文本值(textContent)默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容内部支持写表达式 <div id="app"> <h2 v-text="message+'!'">深圳</h2> <h2 v-text="info+'!'">深圳</h2> <h2>{{ message +'!'}}深圳</h2> </div> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ message:"黑马程序员!!!", info:"前端与移动教研部" } }) </script>v-html
v-html指令的作用是设置元素的innerHTML内容中有html结构会被解析为标签v-text指令无论内容是什么，只会解析为文本解析文本使用v-text，需要解析html结构使用v-html <div id="app"></div> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ content:"黑马程序员" } }) </script>v-on
v-on指令的作用是为元素绑定事件事件名不需要写on指令可以简写为@绑定的方法定义在methods属性中方法内部通过this关键字可以访问定义在data中数据 <div id="app"> <input type="button" value="点击" @click="doIt(666,'老铁')"> <input type="text" @keyup.enter="sayHi"> </div> <!-- 1.开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/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>v-on补充
事件绑定的方法写成函数调用的形式，可以传入自定义参数定义方法时需要定义形参来接受传入的实参事件的后面跟上.修饰符可以对事件进行限制.enter可以限制触发的按键为回车事件修饰符可以有多种 事件修饰符更多查看 <div id="app"> <input type="button" value="点击" @click="doIt(666,'老铁')"> <input type="text" @keyup.enter="sayHi"> </div> <!-- 1.开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/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>案例：计数器
<div id="app"> <!-- 计数器 --> <div class="input-num"> <button @click="sub"> - </button> <span>{{ num }}</span> <button @click="add"> + </button> </div> </div> <script> // 创建Vue实例 var app = new Vue({ el: "#app", data: { num: 1, min: 0, max: 10 }, methods: { sub() { if (this.num > this.min) { this.num--; } else { alert("别点啦,到底啦"); } }, add() { if (this.num < this.max) { this.num++; } else { alert("别点啦,到头啦"); } } } }); </script>v-show
v-show指令的作用是根据真假切换元素的显示状态原理是修改元素的display:实现显示隐藏指令后面的内容，最终都会解析为布尔值值为true元素显示，值为false元素隐藏数据改变之后，对应元素的显示状态会同步更新 <div id="app"> <input type="button" value="切换显示状态" @click="changeIsShow"> <input type="button" value="累加年龄" @click="addAge"> <img v-show="isShow" src="./img/monkey.gif" alt=""> <img v-show="age>=18" src="./img/monkey.gif" alt=""> </div> <!-- 1.开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ isShow:false, age:17 }, methods: { changeIsShow:function(){ this.isShow = !this.isShow; }, addAge:function(){ this.age++; } }, }) </script>v-if
v-if指令的作用是根据表达式的真假切换元素的显示状态本质是通过操纵DOM元素来切换显示状态表达式的值为true，元素存在于dom树之中，为false，从dom树种移除频繁的切换v-show，反之使用v-if，前者的切换消耗小 <div id="app"> <input type="button" value="切换显示" @click="toggleIsShow"> <p v-if="isShow">黑马程序员</p> <p v-show="isShow">黑马程序员 - v-show修饰</p> <h2 v-if="temperature>=35">热死啦</h2> </div> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ isShow:false, temperature:20 }, methods: { toggleIsShow:function(){ this.isShow = !this.isShow; } }, }) </script>v-bind
v-bind指令的作用是为元素绑定属性完整写法v-bind:属性名简写的话可以直接省略v-bind，只保留:属性名需要动态的增删class建议使用对象的方式 <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/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ imgSrc:"http://www.itheima.com/images/logo.png", imgTitle:"黑马程序员", isActive:false }, methods: { toggleActive:function(){ this.isActive = !this.isActive; } }, }) </script>案例：图片切换
列表数据使用数组保存v-bind指令可以设置元素属性，比如srcv-show和v-if都可以切换元素的显示状态，频繁切换用v-show <div id="mask"> <div class="center"> <h2 class="title"><img src="./images/logo.png" alt=""> 深圳创维校区环境</h2> <img :src="imgList[index]" alt="" /> <a href="javascript:void(0)" @click="prev" class="left" v-show="index>0" > <img src="./images/prev.png" alt="" /> </a> <a href="javascript:void(0)" @click="next" class="right" v-show="index<imgList.length-1" > <img src="./images/next.png" alt="" /> </a> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: "#mask", data: { imgList: [ "./images/00.jpg", "./images/01.jpg", "./images/02.jpg", "./images/03.jpg", "./images/04.jpg", "./images/05.jpg", "./images/06.jpg", "./images/07.jpg", "./images/08.jpg", "./images/09.jpg", "./images/10.jpg", ], index: 0 }, methods: { // 上一张 prev() { this.index--; }, // 下一张 next() { this.index++; } } }); </script>v-for
v-for指令的作用是根据数据生成列表结构数组经常和v-for结合使用语法是(item,inedx) in 数据item和index可以结合其他指令一起使用数组长度的更新会同步到页面上，是响应式的 <div id="app"> <input type="button" value="添加数据" @click="add"> <input type="button" value="移除数据" @click="remove"> <ul> <li v-for="(it,index) in arr"> {{ index+1 }}黑马程序员校区:{{ it }} </li> </ul> <h2 v-for="item in vegetables" v-bind:title="item.name"> {{ item.name }} </h2> </div> <!-- 1.开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ arr:["北京","上海","广州","深圳"], vegetables:[ {name:"西兰花炒蛋"}, {name:"蛋炒西蓝花"} ] }, methods: { add:function(){ this.vegetables.push({ name:"花菜炒蛋" }); }, remove:function(){ this.vegetables.shift(); } }, }) </script>v-model
v-model指令的作用是便捷的设置和获取表单元素的值绑定的数据会和表单元素值相关联绑定的数据←→表单元素的值(双向绑定) <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/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ message:"黑马程序员" }, methods: { getM:function(){ alert(this.message); }, setM:function(){ this.message ="酷丁鱼"; } }, }) </script>