知识预备:自定义指令中的钩子函数
bind:只调用一次,指令第一次绑定到元素的时候调用 (一般在修改style时使用)inserted:被绑定的元素节点插入到dom树中时调用(一般在修改dom时使用)update:所在组件的Vnode更新时调用,但孩子Vnode可能还没有更新componentUpdate:所在组件的Vnode及孩子的Vnode全部更新时调用unbind:只调用一次,指令与元素解绑的时候调用一般就用前两个就行了
知识预备:自定义指令中的钩子函数中的参数
//例子bind:function(el,binding)
el:指令绑定的对象,可以用来直接操作dombinding是一个对象
binding:{name:指令名value:指令绑定的值 参数值 "1+1"==>2expression:绑定值的字符串形式 "1+1"==>'1+1'}
还有其他参数类型 不常用就不写了 到这里没看懂没关系 看后面的例子就明白了
1.自定义全局指令
声明:Vue.directive(‘name’,{bind:function(){}})
参数1:字符串 自定义指令的名称参数2:对象 绑定的钩子函数
<script>import Vue from 'vue'Vue.directive('focus', {bind: function (el) {console.log('调用全局自定义指令----bind')},inserted: function (el) {el.focus()console.log('调用全局自定义指令----inserted')}})export default {}</script>
使用:在标签中写 v-指令的名字
<div>调用全局自定义指令</div><input type="text" v-model="keywords" v-focus>
2.自定义私有指令
声明:
<script>export default {name: 'directivePage',directives: {'fontWeight': {bind: function (el) {el.style.fontWeight = 500}}},data () {return {keyword: ''}},methods: {}}</script>
调用:
<div v-fontWeight>调用私有自定义指令</div>
3.自定义指令中传递参数
以自定义全局指令为例子
声明:
参数存在于binding对象中 见知识预备中
Vue.directive('color', {bind: function (el, binding) {el.style.color = binding.value}})
调用:
传递参数以字符串的形式
<div v-color="'blue'">调用全局自定义指令color</div>
效果:
4.自定义指令的简写形式
大多数情况下,我们可能想在bind和update钩子上做重复动作,并且不想关心它的钩子函数时 即不想关心绑定哪个钩子函数
// 不想关心它的钩子函数可以采用简写的方式Vue.directive('color', (el, binding) => {el.style.color = binding.value})