一、绑定样式
1. 绑定内联样式
（1）将元素的 style 属性看做一个大的字符串来绑定
<元素 :style="变量名"> data:{ 变量名:"css属性名1: 属性值1; css属性名2:属性值2;..." } //运行时vue把变量的字符串值，直接放到元素的style属性后，作为元素的内联样式 //该方法极其不便于只修改其中某一个css属性值，几乎不用
（2）使用对象语法灵活绑定每个 css 属性值
<元素 :style="{ css属性名1:变量1, css属性名2:变量2 , ... }" data:{ 变量1: 属性值1, 变量2: 属性值2 } //此方法极其便于修改其中某一个css属性值 //缺点是如果多个元素刚好都需要绑定同一个css属性，则属性值的变量名易冲突
举例：绑定一架飞机的位置；
<body> <div id="app"> <img :style="{left:left,top:top}" src="img/p3.png"> </div> <script> var vm = new Vue({ el: "#app", data: { left: "200px", top: "200px" } }); // 通过键盘按键控制飞机飞行 window.onkeydown = function (e) { console.log(e.keyCode); if (e.keyCode == 37) { var left = parseInt(vm.left); left -= 10; vm.left = `${left}px` } else if (e.keyCode == 38) { var top = parseInt(vm.top); top -= 10; vm.top = `${top}px` } else if (e.keyCode == 39) { var left = parseInt(vm.left); left += 10; vm.left = `${left}px` } else if (e.keyCode == 40) { var top = parseInt(vm.top); top += 10; vm.top = `${top}px` } } </script> </body>
效果如下：
（3）将对象写在 data 中的绑定方式
<元素1 :style="变量1"> <元素2 :style="变量2"> data:{ 变量1:{ css属性1:值1, css属性2:值2 }, 变量2:{ css属性1:值1, css属性2:值2 }, } //既便于修改任意一个元素的css属性，又避免多个元素的css属性发生冲突
如果有固定不变的 css 属性，就写在不带 : 的 style 里；而变化的 css 属性写在带 : 的 style 里。运行时两个 style 是合并发挥作用的，不会发生覆盖。
<元素 style="固定不变的css属性" :style="可能变化的css属性">
举例： 绑定两架飞机的位置；
<body> <div id="app"> <img :style="p3style" src="img/p3.png"> <img :style="p5style" src="img/p5.png"> </div> <script> var vm = new Vue({ el: "#app", data: { p3style: { left: "200px", bottom: "100px" }, p5style: { left: "500px", bottom: "100px" } } }); //希望按方向键操作第2架黄色飞机移动 window.onkeydown = function (e) { console.log(e.keyCode); if (e.keyCode == 37) { var left = parseInt(vm.p5style.left); left -= 10; vm.p5style.left = `${left}px` } else if (e.keyCode == 38) { var bottom = parseInt(vm.p5style.bottom); bottom += 10; vm.p5style.bottom = `${bottom}px` } else if (e.keyCode == 39) { var left = parseInt(vm.p5style.left); left += 10; vm.p5style.left = `${left}px` } else if (e.keyCode == 40) { var bottom = parseInt(vm.p5style.bottom); bottom -= 10; vm.p5style.bottom = `${bottom}px` } //实现第1架飞机移动,左65 上87 右68 下83 if (e.keyCode == 65) { var left = parseInt(vm.p3style.left); left -= 10; vm.p3style.left = `${left}px` } else if (e.keyCode == 87) { var bottom = parseInt(vm.p3style.bottom); bottom += 10; vm.p3style.bottom = `${bottom}px` } else if (e.keyCode == 68) { var left = parseInt(vm.p3style.left); left += 10; vm.p3style.left = `${left}px` } else if (e.keyCode == 83) { var bottom = parseInt(vm.p3style.bottom); bottom -= 10; vm.p3style.bottom = `${bottom}px` } } </script> </body>
2. 绑定 class
（1）将 class 属性看做一个普通的字符串变量绑定
<元素 :class="变量名" data:{ 变量名:" class名1 class名2 class名3 ..." } //该方法极不便于只修改其中某一个class
（2）将 class 属性看做一个对象来绑定
<元素 :class="{ class名1: 变量1, class名2:变量2,... }" data:{ 变量1: true或false, //开关，true表示启用这个class 变量2: true或false } //该方法便于修改某一个class //缺点是如果多个元素都绑定同一种class，但是启用或不启用的状态不同，class的变量名易冲突
举例：实现手机号带样式的验证；
<body> <!--VUE 3步 1. 做界面 1.1 唯一父元素 1.2 找可能变化的位置: 本例中:input内容由用户主动输入而改变，v-model span内容随程序自动改变，{{}} span的class在success和fail之间切换，绑定class 1.3 找可能触发事件的位置 本例中: 一边触发，一边验证，监视函数watch--> <div id="app"> 手机号:<input type="text" v-model="phone"> <span :class="{success:success,fail:fail}">{{msg}}</span> </div> <script> //2. 创建new Vue()对象 new Vue({ el: "#app", //3. 创建模型对象: data: { phone: "", //此时未输入 success: false, //未输入时不显示提示 fail: false }, watch: { phone() { // 验证手机号格式 var reg = /^1[3-9]\d{9}$/; var result = reg.test(this.phone); // 如果手机号格式正确 if (result == true) { this.success = true; //绿色success提示显示 this.fail = false; //红色fail提示不显示 this.msg = "手机号格式正确"; //否则反之 } else { this.success = false; this.fail = true; this.msg = "手机号格式错误！"; } } } }) </script> </body>
效果如下：
（3）将对象放进 data 中定义
<元素1 :class="变量1"> <元素2 :class="变量2"> data:{ 变量1:{ class名1:true或false, class名2:true或false }, 变量2:{ class名1:true或false, class名2:true或false }, } //该方法可避免不同元素之间绑定同一class时互相影响
如果有固定不变的 class，应该放在不带 : 的 class 中，而变化的 class 则放在带 : 的 class 中，最终编译时，不带 : 的 class 会和带 : 的 class 合并为一个 class 共同起作用。
<元素 class="固定不变的class" :class="变化的class"
举例：实现手机号和密码的带样式的验证；
<body> <div id="app"> 手机号:<input type="text" v-model="phone"> <span :class="phoneObj">{{phoneMsg}}</span><br> 密码:<input type="password" v-model="pwd"> <span :class="pwdObj">{{pwdMsg}}</span> </div> <script> //2. 创建new Vue()对象 new Vue({ el: "#app", data: { phone: "", phoneObj: { success: false, //未输入时无提示 fail: false }, phoneMsg: "", pwd: "", pwdObj: { success: false, //未输入时无提示 fail: false }, pwdMsg: "" }, watch: { phone() { // 验证手机号格式 var reg = /^1[3-9]\d{9}$/; var result = reg.test(this.phone); // 如果手机号格式正确 if (result == true) { this.phoneObj = { success: true, //绿色success提示显示 fail: false //红色fail提示不显示 } phoneMsg = "手机号格式正确"; //否则反之 } else { this.phoneObj = { success: false, fail: true, } this.phoneMsg = "手机号格式错误！"; } }, pwd() { // 验证密码格式 var reg = /^\d{6}$/; var result = reg.test(this.pwd); // 如果密码格式正确 if (result == true) { this.pwdObj = { success: true, //绿色提示显示 fail: false //红色提示不显示 } this.pwdMsg = "密码格式正确"; //否则反之 } else { this.pwdObj = { success: false, fail: true } this.pwdMsg = "密码格式错误！"; } } } }) </script> </body>
效果如下：
二、自定义指令
如果希望在开始时就能对 HTML 元素执行一些初始化 DOM 操作(如自动获得焦点)，但是 vue 中没有提供对应功能的指令。这时就可以自定义指令。
1. 自定义指令的创建
（1）创建一个指令保存在 Vue 内存中备用
Vue.directive("指令名", { //插入后: 当前带有指令的DOM元素被vue挂载到页面上之后，自动触发的回调函数 inserted(当前带有指令的DOM元素){ 对当前带有指令的DOM元素执行原生的DOM操作 } }) //注意： //Vue中V必须大写 //定义指令时，指令名不加v-前缀
（2）在页面上使用自定义的vue指令
<元素 v-指令名> //注意： //使用指令时，必须加v-前缀
需要注意，自定义指令写在 HTML 中，而 HTML 只认识小写字母，所以不能使用驼峰命名法，如果包含多个单词，可以用”-“隔开。
原理：
Vue.directive() 是创建一个自定义指令对象，保存在 Vue 类型的内存中备用。new Vue() 扫描时，发现 v- 开头的自定义指令，就去 Vue 内存中找同名的自定义指令，找到同名的自定义指令，就自动执行自定义指令对象中的 inserted() 函数，并将当前扫描到的带有自定义指令的元素对象传给 inserted() 的形参变量；在 inserted() 函数内，可对当前传入的带有自定义指令的 DOM 元素应用原生的 DOM 操作。
举例：自定义指令让元素自动获得焦点；
<body> <div id="app"> <!--希望在页面加载时，input文本框自动获得焦点--> <input id="txt" v-myfocus><button>搜索</button> </div> <script> //定义自定义指令myfocus Vue.directive("myfocus", { inserted(element) { element.focus(); } }) new Vue({ el: "#app" }) </script> </body>
效果如下：
