vue.js(14)--自定义全局指令
<input type="text" class="form-control" v-model="keywords" v-focus>
使用vue.directive(‘focus’,{对象})定义全局指令,v-focus
<script> Vue.directive('focus',{ // 在每一个函数中,第一个参数,永远是el,表示被绑定了指令的那个元素, // 这个el参数,是一个原生的js对象,也就是dom bind:function(el,binding){//每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次 el.style.color=binding.value },//binding为一个对象,包含一些属性 inserted:function(el){//当元素插入到dom的时候,会执行insert,只执行一次 el.focus() }, updated:function(el){//当vnode更新的时候会执行update,可能触发多次 } }) var vm =new Vue({ el:'#a' }) </script>
指令钩子函数会被传入以下参数:
el
:指令所绑定的元素,可以用来直接操作 DOM 。binding
:一个对象,包含以下属性:name
:指令名,不包括v-
前缀。value
:指令的绑定值,例如:v-my-directive="1 + 1"
中,绑定值为2
。oldValue
:指令绑定的前一个值,仅在update
和componentUpdated
钩子中可用。无论值是否改变都可用。expression
:字符串形式的指令表达式。例如v-my-directive="1 + 1"
中,表达式为"1 + 1"
。arg
:传给指令的参数,可选。例如v-my-directive:foo
中,参数为"foo"
。modifiers
:一个包含修饰符的对象。例如:v-my-directive.foo.bar
中,修饰符对象为{ foo: true, bar: true }
。
vnode
:Vue 编译生成的虚拟节点。。oldVnode
:上一个虚拟节点,仅在update
和componentUpdated
钩子中可用。
函数简写
在很多时候,你可能想在 bind
和 update
时触发相同行为,而不关心其它的钩子。比如这样写:
<script> Vue.directive('color-swatch', function (el, binding) { el.style.backgroundColor = binding.value }) </script>