vue笔记之自定义指令

<!--<h3 class="panel-title" v-color>添加品牌</h3>-->
<h3 class="panel-title" v-fontweight="'700'" v-fontsize="30" v-focus v-color="'blue'">添加品牌</h3>
<script>
	// Vue.directive定义全局指令
	// 参数1：指令的名称，注意，在定义的时候，指令的名称前面，不需要加v- 前缀,在调用的时候要加
	// 参数2：是一个对象，这个对象身上有一些指令相关的函数
	//自定义全局 获取焦点
	Vue.directive( 'focus', {
		bind: function(el){//每当指令绑定到元素上的时候，会立即执行bind函数，只执行一次
			// 第一个参数永远是el
			// 在元素刚绑定指令的时候，还没有插入到DOM中去，这时候调用focus方法没有作用
			// el.focus()
		},
		inserted: function(el){//inserted表示元素插入到DOM中的时候，会执行inserted函数
			el.focus();
		},
		updated: function(){},
		
	});
	//颜色指令
	// 样式只要通过指令绑定给了元素，不管这个元素有没有插入到页面中去，这个元素肯定有一个内联样式
	Vue.directive ( 'color',{
		bind: function(el,binding) {
			//el.style.color = "red";
			el.style.color = binding.value;
		}
	})
	// Vue.directive定义私有指令
	var vm = new Vue ({
		el:"",
		data:{},
		directives: {
			'fontweight': {
				bind: function (el,binding){
					el.style.fontWeight = binding.value;
				}
			},
			/*'fontsize': {
				bind: function (el,binding){
					el.style.fontSize = parseInt(binding.value)+'px';
				}
			},*/
			'fontsize': function(el,binding) { //这个function等同于把代码写到bind和update中去
				el.style.fontSize = parseInt(binding.value)+'px';
			}
		}
	})
</script>