vuejs笔记之自定义指令

责编:menVScode 2017-10-11 0:21 阅读(953)

vuejs自定义指令的局部写法

<div id="app">
	<div v-mvc>
		<p>{{name}}</p>
		<p></p>
		<span></span>
	</div>
</div>
var vm = new Vue({
	el:'#app',
	data:{
		name:'qwe'
	},
	directives:{
		mvc:{
			bind:function(){//当我们绑定的时候触发,且只触发一次
				console.log('绑定');
                                console.log(this);//window
			},
			inserted:function(el){//主方法
				//第一参数:绑定的元素
				console.log(arguments);//[div, Object, VNode, VNode, undefined]
				console.log(el);//<div style="color: red;"><p>qwe</p> <p></p> <span></span></div>
				el.style.color='red';
			},
			update:function(){
				console.log('更新:update')
			},
			componentUpdated:function(){//组件完成一次更新后触发
				console.log('更新:componentUpdated')
			},
			unbind:function(){//和元素绑定解除的时候触发

			}
		}
	}	
});

更新数据,自定义函数执行情况;

GIF


vuejs自定义指令的全局部写法

<div id="app">
	<div v-abc='name'></div>
</div>
Vue.directive('abc',{
	bind:function(el,obj){
		console.log(arguments);
		//参数1:绑定的元素;参数2:传过来的数据;
		console.log(obj.value);//qwe
		console.log(this);//window
	}
});

var vm = new Vue({
	el:'#app',
	data:{
		name:'qwe'
	}
});

打印bind函数中的arguments结果

QQ截图20171011204113


全局的简写方式

<div id="app">
	<div v-abc='{color:"yellow",content:"menvscode.com"}'></div>
</div>
Vue.directive('abc',{
	bind:function(el,obj){
		console.log(arguments);
		//参数1:绑定的元素;参数2:传过来的数据;
		console.log(obj.value);//qwe
		console.log(this);//window
		el.style.color=obj.value.color;
		el.innerHTML=obj.value.content;
	}
});

var vm = new Vue({
	el:'#app',
	data:{
		name:'qwe'
	}
});
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码