一、概述
1、指令是指vue对象的绑定标签内通常有 v- 前缀的特殊属性，每种指令代表一种特殊功能。
2、指令连接着data数据与html显示数据，是同步更改的。
3、部分指令在vue不同版本中书写的区别，vue1.0+的指令可以在vue2.0+中沿用，反之则不能。
①对标签内置属性的操作：v-bind: 属性名 ===> : 属性名。
②绑定事件：v-on: 事件名 ===> @事件名。
二、内置属性赋值
1、基本表达式：<标签名 :属性名="data键名"></标签名>。
2、实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="id_div1"> <p><a :href="url">百度</a></p> <p><input :type="type"></p> </div> <script> var vueObj = new Vue({ el: '#id_div1', data: { url: 'https://www.baidu.com', type: 'password', }, }) </script> </body> </html>
三、绑定事件
1、基本表达式：<标签名 @事件名="js表达式/vue方法属性名"></标签名>。
2、实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="id_div1"> <p><input type="button" @click="num++" value="+"></p> <p><input type="button" @click="cut" value="-"></p> <p><span>{{num}}</span></p> </div> <script> var vueObj = new Vue({ el: '#id_div1', data: { num: 0, }, methods: { cut: function () { this.num-- } } }) </script> </body> </html>
四、控制class属性
1、基本表达式：<标签名 : class="data键名/{class名:true, class名: false}/对象式data/数组套对象式data"></标签名>。
2、实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <style> .cls1 { border: orange 5px solid; } .cls2 { color: dodgerblue; } .cls3 { background: lightpink; } </style> </head> <body> <div id="id_div1"> <div :class="css1">div1</div> <div :class="{cls2:false, cls3:true}">div2</div> <div :class="css2">div3</div> <div :class="[css1, css2]">div4</div> </div> <script> var vueObj = new Vue({ el: '#id_div1', data: { css1: 'cls1', css2: { cls2: true, cls3: false, }, }, }) </script> </body> </html>
五、控制style属性
1、直接在data中写style属性。
2、实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="id_div1"> <div :style="style1">div1</div> <div :style="[style1, style2]">div2</div> </div> <script> var vueObj = new Vue({ el: '#id_div1', data: { style1: { color: 'red', }, style2: { border: '3px orange solid' } }, }) </script> </body> </html>
六、条件指令之v-if
1、基本表达式：<标签名 v-if="条件表达式/布尔值"></标签名>。
2、可以搭配若干个v-else-if和最多一个v-else一起使用。
3、实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="id_div1"> <div v-if="num <= 4">工作日</div> <div v-else-if="num == 5">周五</div> <div v-else-if="num == 6">周六</div> <div v-else="num == 7">周日</div> </div> <script> var vueObj = new Vue({ el: '#id_div1', data: { num: new Date().getDay() }, }) </script> </body> </html>
七、条件指令之v-show
1、基本表达式：<标签名 v-show="条件表达式/布尔值"></标签名>。
2、用法与v-if大致相同。
3、与v-if的区别：
①没有组合用法。
②v-if条件为假时是删除标签，而v-show只是隐藏标签。
3、实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="id_div1"> <div v-if="false">div1</div> <div v-show="false">dvi2</div> <div>{{msg}}</div> </div> <script> var tag = document.getElementById('id_div1').children.length var vueObj = new Vue({ el: '#id_div1', data: { msg: tag }, }) </script> </body> </html>
八、列表指令
1、基本表达式(数组式)：<标签名 v-for="临时变量名, 索引 in 数组式data"></标签名>，可以不用索引。
2、基本表达式(对象式)：<标签名 v-for="键, 值 in 对象式data"></标签名>，可以不用键。
3、实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="id_div1"> <div> <p v-for="l in list1">{{l}}</p> </div> <div> <p v-for="l, index in list1">{{index}} : {{l}}</p> </div> <dvi> <p v-for="v in dict1">{{v}}</p> </dvi> <div> <p v-for="k,v in dict1">{{k}} : {{v}}</p> </div> </div> <script> var vueObj = new Vue({ el: '#id_div1', data: { list1: [ 'tom', 'jan', 'pik' ], dict1: { name: 'tom', age: 18, gender: 'male' } }, }) </script> </body> </html>