Vue.js（六）——自定义指令

1、自定义全局指令

注意：在Vue.js中所有的指令，在调用的时候，都以v-开头

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

定义

//自定义全局指令 ==> 获取全局焦点
//Vue.directive（） 自定义全局指令
//参数一：指令名称。注意：定义的时候 指令的名称前面不需要加v-前缀，
//		 但是在调用的时候，必须加上v-前缀
//参数二：是一个对象，对象身上有一些指令相关的函数，这些函数可以在特定的阶段，执行相关操作
Vue.directive('focus', {
	bind: function(el){//每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次。
	//在每个函数中，第一个参数永远是el，表示被绑指令的那个元素。这个el参数是一个原生的JS对象
	//在元素刚绑定了指令的时候，还没有插入到DOM中，这时候调用 focus()方法没有作用
	//因为一个元素，只有插入DOM之后才会获取焦点
    }, 
	inserted: function(el){//inserted表示元素插入（加载）到DOM中的时候，会执行inserted函数，只执行一次
				el.focus()
			},
	update: function(){//当组件VNode更新的时候会执行update，可能会执行多次
					
				 }
			})

获取焦点的JS原生代码

//原生JS
 document.getElementById('search').focus()

使用

<input id="search" type="text" class="form-control" v-model="keywords" v-focus />

注意

和JS有关的操作，最好放在inserted 中去执行，防止JS行为不生效

和style样式相关的操作，一般放在 bind 中去执行

2、自定义私有指令

定义

		<script>
		var vm = new Vue({
						el: '#app',
						data: {
							msg: '十步杀一人'
						},
						directives: {//自定义私有指令
							'fontweight': {
								bind: function(el,binding){
									el.style.fontWeight = binding.value
									
								}
							}
						}
					})
		</script>

使用

		<div id="app">
			<p v-fontweight="900">{{msg}}</p>	
		</div>

3、指令函数的简写形式

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写:

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

var vm = new Vue({
	el: '#app3',
	data: {
		msg: '十步杀一人'
	},
	directives: {//自定义私有指令			
	'fontsize': function(el, binding){//注意这个function 等同于 把代码写到 bind和update中去
					el.style.fontSize = parseInt(binding.value) + 'px'
				}	
				}
			})