前言
系列文章目录：
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU
1. 自定义指令
在vue中支持自定义指令，自定义指令声明在vue的directives节点中。
自定义指令本质为一个函数。
1.1 语法
定义自定义指令有两种形式的写法：
- 函数形式
new Vue({ directives: { 指令名(参数列表) {} } }) • 1 • 2 • 3 • 4 • 5
- 对象形式
new Vue({ directives: { 指令名: { k: v, k: v, ... } } })
使用自定义指令，需要使用v-指令名的形式。
1.2 自定义指令的参数
自定义指令的处理函数接收两个参数，第一个参数为使用自定义指令的DOM元素(element)，第二个参数为指令的绑定信息(binding)。
2. 自定义指令实现数值放大10倍
需要实现的需求：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
2.1 查看自定义指令的参数
<!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="root"> <h2>n的值为: {{n}}</h2> <h2>n放大10倍对应的值为: <span v-big="n"></span></h2> <button @click="n++">n++</button> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> const vm = new Vue({ el: '#root', data: { n: 0, }, directives: { big(element, bingding) { console.log('element: ') console.log(element) console.log('binding: ') console.log(bingding) }, }, }) </script> </html>
2.2 需求的实现
实现把绑定的数值放大10倍，然后将放大后的数值放到DOM元素上，需要我们操作DOM元素。
<!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="root"> <h2>n的值为: {{n}}</h2> <h2>n放大10倍对应的值为: <span v-big="n"></span></h2> <button @click="n++">n++</button> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> const vm = new Vue({ el: '#root', data: { n: 0, }, directives: { big(element, bingding) { // 操作DOM元素，将放大后的数值放入DOM元素中 // bingding.value 获取当前指令绑定的表达式的值 // element.innerText 将放大后的数值放入DOM元素中 element.innerText = bingding.value * 10 }, }, }) </script> </html>
2.3 自定义指令调用的时机
2.3.1 指令与元素成功绑定时（初始化页面）
<!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="root"> <h2>n的值为: {{n}}</h2> <h2>n放大10倍对应的值为: <span v-big="n"></span></h2> <button @click="n++">n++</button> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> const vm = new Vue({ el: '#root', data: { n: 0, }, directives: { big(element, bingding) { console.log('自定义指令 big 被调用...') element.innerText = bingding.value * 10 }, }, }) </script> </html>
2.3.2 所在的模板被重新解析时
自定义指令被调用的时机，不仅是在与自定义指令相关的数据改变时，只要自定义指令所在的模板被重新解析，自定义指令就会被调用。
<!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="root"> <h2>n的值为: {{n}}</h2> <h2>n放大10倍对应的值为: <span v-big="n"></span></h2> <button @click="n++">n++</button> <h2>x的值为: {{x}}</h2> <button @click="x++">x++</button> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> const vm = new Vue({ el: '#root', data: { n: 0, x: 100 }, directives: { big(element, bingding) { console.log('自定义指令 big 被调用...') element.innerText = bingding.value * 10 }, }, }) </script> </html>
3. 自定义指令让其所绑定的input元素默认获取焦点
需要实现的需求：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
3.1 需求实现
<!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="root"> <h2>n的值为: {{n}}</h2> <h2>n放大10倍对应的值为: <span v-big="n"></span></h2> <button @click="n++">n++</button> <br><br> <input type="text" v-fbind:value="n"> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> const vm = new Vue({ el: '#root', data: { n: 0 }, directives: { big(element, bingding) { element.innerText = bingding.value * 10 }, // 让指令fbind所绑定的input元素默认获取焦点 fbind(element, binding) { // 将n的值放入input中 element.value = binding.value // 然后input获取焦点 element.focus() } }, }) </script> </html>
观察运行结果发现，input输入框并没有在最开始默认获取焦点，而是在点击按钮n+1后才自动获取焦点。
