指令的定义一定要放到 new Vue({}) 代码之前,否则报错并且无效;
在注册指令的时候,不需要加上v- 这个前缀;
在dom元素上使用的时候,必须加上v- 前缀;
在注册指令的时候,不需要加上v- 这个前缀;
在dom元素上使用的时候,必须加上v- 前缀;
自定义指令钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
bind:只调用一次,指令第一次绑定到元素时调用,在这里可以进行一次初始化设置;
inserted:被绑定元素插入父节点时调用;
update:在 bind 之后立即以初始值为参数第一次调用,之后每当绑定值变化时调用,参数为新值与旧值;
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用;
unbind:只调用一次,指令与元素解绑时调用;
钩子函数的参数
el:指令所绑定的元素,可以用来直接操作 DOM ;
binding:一个对象,包含以下属性:
name:指令名,不包括 v- 前缀;
value:指令的绑定值,例如:v-my="2" 中,绑定值为 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 编译生成的虚拟节点。移步 VNode API 来了解更多详情;
oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用;
binding:一个对象,包含以下属性:
name:指令名,不包括 v- 前缀;
value:指令的绑定值,例如:v-my="2" 中,绑定值为 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 编译生成的虚拟节点。移步 VNode API 来了解更多详情;
oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用;
Vue.directive('focus',{ bind:function(){ //这个指令的逻辑 //可以利用this.el来获取到当前指令所在的元素对象 this.el.style.color = 'red'; } });
////定义一个带有参数的自定义指令 Vue.directive('color',{ params:['colorname'], bind:function(){ //1.0 获取到colorname的值 var cname = this.params.colorname; //2.0 获取到el以后给其赋予一个样式 this.el.style.color = cname; } }); 使用: <input type="text" v-model="productid" v-color colorname="blue" > -----其实就是this.el.style.color = cname=colorname= “blue”,
定义组件内自定义指令
<template> <div class="hello"> <div v-test='name'></div> </div> </template> <script> export default { data () { return { name:'我是名字', } }, directives:{ test:{ inserted: function (el, binding) {// 指令的定义 / /el为绑定元素,可以对其进行dom操作 console.log(binding) //一个对象,包含很多属性属性 }, bind: function (el, binding, vnode) { el.innerHTML =binding.value } } }, created:function(){ }, mounted:function(){ }, methods:{ } } </script>
定义全局自定义指令
<div id="box"> hello<span v-red> welcome</span> </div> <script type="text/javascript"> Vue.directive('red',{ inserted:function(el){ el.style.background = 'red'; } }); var vm = new Vue({ data:{ }, }).$mount('#box'); </script>
实例
在图片未完成加载前,用随机的背景色占位,图片加载完成后才直接渲染出来。
<div id="app" > <div v-img='val.url' v-for="val in list"></div> </div> <script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script> <script type="text/javascript"> Vue.directive('img', { inserted:function (el, binding) { var color = Math.floor(Math.random()*1000000); el.style.backgroundColor = "#" + color; var img = new Image(); img.src = binding.value; img.onload = function(){ el.style.backgroundImage = 'url('+ binding.value +')' } } }); new Vue({ el: '#app', data: { list:[ { url:'http://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/Billboard/img/tan04.jpg' }, { url:'http://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/Billboard/img/tan03.jpg' }, { url:'http://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/Billboard/img/tan04.jpg' } ] } }); </script>