21 自定义指令
vue里面不仅仅有内置的指令，也可以根据自己的需求构建自定义指令
它其实就是操作DOM元素的属性以及内容
通过directives属性配置自定义指令，有函数式和对象式两种写法，下面分别去写下
21.1 函数式
通过案例去实现自定义函数式指令
需求：定义一个v-big指令，和v-text功能类似，但是会把绑定的数值放大十倍
控制台报错，说解析指令失败
接下来就要定义指令了，需要一个全新的配置项:directives,它的值也是一个对象，和computed,watch是类似的写法
函数式写法如下，有两个参数 参数1是绑定元素，参数2是绑定对象
元素和绑定对象内容如下
接下来就可以使用dom操作改变元素了
查看页面，功能实现
那么这个函数什么时候会被调用呢？
有两个时机会被调用：1：指令与元素成功绑定时(初始化)，会被调用 2：指令所在的模板被重新解析的时候
代码如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>当前n的值是：<span v-text="n"></span></h2> <h2>放大10倍后的n值是：<span v-big="n"></span></h2> <button @click="n++">点我n+1</button> </div> </body> <script type="text/javascript"> const vm= new Vue({ el:'#root', data:{ n:1, }, // 自定义指令 directives:{ // 函数式 有两个参数 参数1是绑定元素，参数2是绑定对象 // 有两个时机会被调用：1：指令与元素成功绑定时(初始化)，会被调用 2：指令所在的模板被重新解析的时候 big(element,binging){ element.innerText=binging.value*10 } } }) </script> </html>
21.2 对象式
对象式写起来比函数式复杂，但是功能比函数式更强大
它有三个不同的函数，在不同的时刻去被调用
bind：指令与元素成功绑定时(一上来)调用
inserted：指令所在元素被插入页面的时候调用
update：指令所在的模板被重新解析时调用
通过案例去实现自定义对象式指令
需求：定义一个v-fbind指令，和v-bind功能类似，但是可以让其绑定的input默认获取焦点
一上来肯定找不到指令，因为既不是内置的，也没有自定义
使用对象式编写代码
一上就来获取焦点
并且会随着n的值变化而变化
代码如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>当前n的值是：<span v-text="n"></span></h2> <h2>放大10倍后的n值是：<span v-big="n"></span></h2> <button @click="n++">点我n+1</button> <hr/> <input type="text" v-fbind:value="n" > </div> </body> <script type="text/javascript"> const vm= new Vue({ el:'#root', data:{ n:1, }, // 自定义指令 directives:{ // 函数式 有两个参数 参数1是绑定元素，参数2是绑定对象 // 有两个时机会被调用：1：指令与元素成功绑定时(初始化)，会被调用 2：指令所在的模板被重新解析的时候 big(element,binging){ element.innerText=binging.value*10 }, // 对象式 fbind:{ // 指令与元素成功绑定时(一上来) bind(element,binging){ element.value=binging.value }, // 指令所在元素被插入页面的时候调用 inserted(element,binging){ // 获取焦点 element.focus() }, // 指令所在的模板被重新解析时 update(element,binging){ element.value=binging.value }, } } }) </script> </html>
21.3 自定义指令容易踩的坑
1 多个单词的指令名
现在我的两个自定义指令都是一个单词的,v-big,v-fbind,如果需要用到多个单词，比如v-binNum,这时候使用驼峰就不好使了
可以看到，找不到这个指令
这不是官网推荐的风格，多个单词应该-继续分割，比如v-big-num,此时在函数编写的地方需要使用原生的形式，使用单引号把key包起来，不能再用简写形式了，不然出现-(杠)会报错
解决
2 指令回调函数的this
所有被vue管理的函数，里面的this都是vm实例对象
现在把回调函数里面的this都输出下
发现this都是全局的window，而不是vue实例
虽然没写剪头函数，但是只要是指令directives里面的this，都不是vue实例，就是window
21.4 自定义指令总结
- 1 定义语法
- （1）局部指令
- new Vue({direvtives:{指令名：配置对象}})或 new Vue({direvtives()})
- （2）全局指令
- Vue.directive(指令名，配置对象)或Vue.directive(指令名，回调函数)
- 2 配置对象中常用的三个回调
- (1) bind：指令与元素成功绑定时(一上来)调用
- (2) inserted：指令所在元素被插入页面的时候调用
- (3) update：指令所在的模板被重新解析时调用
- 3 备注：
- (1)：指令定义时不加v-,但是使用时需要加v-
- (2) ：指令名如果是多个单词，要使用kebab-case命令方式，不要使用camelCase命名
