vue所有指令练习合集。这是个html文件，用chrome打开可查看结果。
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>指令合集</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <style> .greenWord { color: green; } .wordSize { font-size: large; background-color: darkorange; } .redWord { color: red; } [v-cloak]{ display: none; } </style> </head> <body> <div id="app1"> <!--绑定普通文本--> <h3>1、插值绑定</h3> <span v-text="msg"></span> <span>{{msg}}</span> <!--插入一段html源码 将源码渲染为DOM结构--> <h3>2、v-html 动态渲染html</h3> <div v-html="mhtml"></div> <!--v-show 原理：通过改变css的display决定是否显示元素；即不管v-show的值是true还是false,都会渲染完该节点下所有Dom--> <h3>3、v-show 条件渲染</h3> <span v-show="isshow">提莫队长现身啦</span> <!--真正的条件渲染，符合条件则渲染v-if的DOM结构，否则只渲染v-else指示的结构块--> <h3>4、v-if 使用</h3> <span v-if="isok">您是男士</span> <span v-else>您是女士</span> <span v-if="Math.random() < 0.3">概率小于0.3</span> <span v-else-if="Math.random() < 0.6 && Math.random()>=0.3">概率0.3~0.5</span> <span v-else>概率大于50%</span> <!--for循环插值--> <h3>5、v-for vue循环</h3> <div v-for="item in items">{{item}}</div> <div v-for="item in items2">{{item.name}}>>>{{item.age}}</div> <!--给节点添加事件处理功能--> <h3>6、v-on 事件处理器</h3> <button v-on:click="chgColor" id="btn1">雨中的彩虹</button> <button v-on:click.right="rightAlert">右击选择</button> <button v-on:click.stop="stopEvent($event)">停止冒泡</button> <button v-on:click="count +=1">加法：{{count}}</button> <!--给元素绑定class属性--> <h3>7、v-bind 绑定class</h3> <span v-bind:class="{greenWord : isActive}">快给我披上色彩吧</span> <span v-bind:class="classObj">却从没有感觉，我无地自容</span> <span v-bind:class="[redWord]">绑定数组类</span> <!--给元素绑定内联style--> <h3>8、绑定内联样式</h3> <span v-bind:style="{color:'#66cc66',fontSize:20+'px'}">内联样式 对象语法</span> <span v-bind:style="styleObj">内联样式>>>对象语法</span> <span v-bind:style="[styleObj]">内联样式>>>数组语法</span> <!--绑定一个html属性,自定义的也可以--> <h3>9、绑定一个属性</h3> <img v-bind:src=" './logo.png' "/> <div v-bind:title="mtitle">红红火火恍恍惚惚</div> <div v-bind:data-mid="mid">测试绑定mid</div> <!--处理表单 憋说话 怒吃你的语法糖--> <h3>10、v-model 表单控件或者组件上创建双向绑定</h3> <input v-model="message" placeholder="edit me"> <p>单行信息：{{message}}</p> <textarea v-model="info" placeholder="add multiple lines"></textarea> <p style="color: darkorange">多行信息：{{info}}</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">单个复选框：{{checked}}</label> <h4>多个复选框</h4> <div> <input type="checkbox" id="jack" value="jack" v-model="checkNames"> <label for="jack">jack</label> <input type="checkbox" id="jack2" value="jack2" v-model="checkNames"> <label for="jack2">jack2</label> <input type="checkbox" id="jack3" value="jack3" v-model="checkNames"> <label for="jack3">jack3</label> <span>checked names:{{checkNames}}</span> </div> <h4>单选框</h4> <input type="radio" id="one" value="one" v-model="picked"> <label for="one">one</label> <span>您的选择：{{picked}}</span> <h4>选择框</h4> <select v-model="selected"> <option>111</option> <option>222</option> <option>333</option> </select> <span>您的选择：{{selected}}</span> <!--语法糖 有点甜 方便一丢丢--> <select v-model="mselect"> <option v-for="option in options" v-bind:value="option.value"> {{option.text}} </option> </select> <span>您的选择：{{mselect}}</span> <!--很少用到这个--> <h3>11、v-pre 跳过该元素和其子元素编译过程</h3> <span v-pre>{{@@@@@@@@@@@@@@@@@@@@@@}}</span> <!--现象：在vue编译结束中，界面可能会闪现一下Mustach符号，很丑。加上这个指令可以有效地阻止这种情况发生，永葆优雅。--> <h3>12、v-lock 该实例编译结束后，解除该指令绑定</h3> <div v-cloak>{{message}}</div> <!--少用--> <h3>13、v-once 只渲染元素和组件一次</h3> <span v-once>我只更新一次：{{once}}</span> <span>不加v-once:{{once}}</span> </div> </body> <script> var app1 = new Vue({ el: '#app1', data: { msg: '插值测试', mhtml: '<span style="color: palevioletred">巴啦啦小魔仙</span>', isshow: true, isok: true, items: ["林徽因", "陆小曼", "张爱玲"], items2: [{name: "徐志摩", age: "28"}, {name: '梁思成', age: 26}, {name: '金岳霖', age: 30}], count: 0, isActive: false, error: null, classObj: { greenWord: true, wordSize: true }, redWord: 'redWord', styleObj: { color: '#00eeff', fontSize: 30 }, message:'', info:'', checked:true, checkNames:[], picked:'', selected:'', options:[{text:'犬次郎',value:'QCL'},{text:'道格森二世',value:'DGS'}], mselect:'', once:'渲染2次', mtitle:'title-property', mid:'123456' }, methods: { chgColor: function () { $("#btn1").css('color', "#cc66cc") $('#btn1').text('我变成了粉红色') }, rightAlert: function () { alert("您点击了鼠标右键") }, stopEvent: function (event) { alert("event:" + event.target.tagName) } }, computed: { classObj: function () { return { greenWord: this.isActive && !this.error, wordSize: this.error && this.error.type === 'fatal' } } } }) </script> </html>