Vue中自定义指令
vue中的指令能够提高我们的开发效率 简化我们的代码 但是vue中的核心代码也不是全面的 所以vue为我们提供了自定义指令
指令的类别
| 类别 | 实例 | 说明 |
| 指令 | v-pre | |
| 指令=值 | v-text=“msg” | msg是data中的变量 |
| 指令：参数=值 | v-bind：class=“msg” | 控制元素中的属性值 |
| 指令：参数=事件处理函数 | v-on：click=“newblog” | newblog是methods中的方法 |
| 指令：参数.事件修饰符/按键修饰符 | v-on:click.stop=“aaa” | .stop阻止冒泡 也可添加按键修饰符 |
指令形式不同，上面的钩子函数被调用的也不一样
自定义属性的基本语法
钩子函数
在定义自定义指令时 Vue为每个指令都提供了一下几个钩子函数（均为可选）
- bind：只调用一次 指令绑定到元素时调用 在此可以进行一次性的初始化设置
- inserted：被绑定元素插入父节点时调用
- update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
- componentUpdated：指令所在组件的vnode及其子VNode 全部更新后调用
- unbind：只调用一次指令与元素解绑时调用
钩子函数的参数
指令钩子函数的参数如下：
- el：指令所绑定的元素 可以直接操作DOM
- binding：是一个对象包含如下参数 ：
name：指令名 不包括v-前缀
value：指令绑定的值 例如：v-mySum=“1+1” 绑定的值为2
oldValue：指定绑定的前一个值 仅在update和componentUpdated钩子函数中用 无论值改变都可用
expression：字符串形式的指令表达式 例如 v-my=“1+1” 表达式为 1+1
arg：传给指令的参数 例如v-on：click 参数为click
modifiers：包装修饰符的对象 v-on：click.stop 该对象的值为{stop：true}
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
案例
1. 编写页面加载文本框获取焦点的指令
<body> <div id="app"> <input type="text" v-focus> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> Vue.directive('focus',{ inserted(el,binding){ el.focus() } }) const app=new Vue({ el:'#app', data:{ } }) </script>
2. 根据v-text 自定义mytext
update的作用就是当在页面上更改msg值的时候回重新渲染页面
<body> <div id="app"> <h1 v-mytext="msg"></h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> Vue.directive('mytext',{ bind(el,binding){ el.innerText=binding.value }, update(el,binding){ el.innerText=binding.value } }) const app=new Vue({ el:'#app', data:{ msg:'爱我中华' } }) </script> </body>
3. 根据v-on 自定义v-myon
<body> <div id="app"> <a href="https://cn.vuejs.org/v2/guide/custom-directive.html#ad" v-my:click.prevent="haha">我是测试超链接</a> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> Vue.directive('my', { bind: function (el, binding) { el.addEventListener(binding.arg, (e) => { binding.value() if (binding.modifiers.stop) { e.stopPropagation() } if (binding.modifiers.prevent) { e.preventDefault() } }) } }) const app = new Vue({ el: '#app', data: { }, methods: { haha() { console.log(11) } } }) </script> </body>
