6--vue自定义指令

vue自定义指令分全局自定义指令和局部自定义指令

每个指令都是一个对象

全局自定义指令---全局 API

Vue.directive()

局部自定义指令---directives 选项/资源

directives:{
					
},

局部自定义指令

（1）指令不赋值

在vue实例中自定义一个red指令

<script type="text/javascript">
	Vue.directive()
	
	var vm = new Vue({
		el:'#app',
		data:{
			
		},
		directives:{
			red:{
			        //当被绑定的元素插入到 DOM 中时
				inserted(el){
					console.log('inserted...')
					el.style.color = 'red'
				}
			}
		},
		methods:{
			
		}
	})
</script>

vue 自定义指令 钩子函数inserted，在  当被绑定的元素插入到 DOM 中时 自动调用

钩子函数

inserted(){ 没有调用他，（ 当被绑定的元素插入到 DOM 中时 ）他自动执行

}

在视图层使用：

<div id="app">
	<div v-red> “津”夜灯火璀璨</div>
</div>

预览效果，如下所示：

（2）指令赋值

在vue实例中，定义指定指令

binding是

一个对象

binding.value~~指令的绑定值（传递过来的值）

		directives:{
			// 指令赋值
			color:{
				inserted(el,binding){
					console.log(binding.value)
					el.style.color = binding.value
				}
			}
		},

在视图层，使用自定义指令

注意：这里~~指令中的值用js的方式表示的，我们需要把颜色放置在字符串‘’中。方可生效。否则报错！

<div v-color="'blue'">长征二号F火箭</div>

预览效果，如下所示：

全局自定义指令

注意：

定义多个vue实例，每个vue实例中数据中心data中的数据，不能在其他实例的视图层中使用

vuejs：

<script type="text/javascript">
	// 定义多个vue实例，每个vue实例中数据中心data中的数据，不能在其他实例的视图层中使用
	new Vue({
		el:'#app1',
		data:{
			i:0
		}
	})
	
	new Vue({
		el:'#app2',
		data:{
			
		}
	})
	
	new Vue({
		el:'#app3',
		data:{
			msg:'hello'
		}
	})
</script>

html:

<div id="app1">
	{{i}}
</div>
<div id="app2">
	{{i}}
</div>
<div id="app3">
	{{i}}
</div>

其他vue实例的视图层使用i变量，报bug。

预览效果如下所示：

如果我们定义 全局自定义，就可以在多个vue实例中去使用

vuejs：

<script type="text/javascript">
	Vue.directive('red',{
		inserted(el){
			el.style.color = 'red'
		}
	})
	new Vue({
		el:'#app1',
		data:{
			i:0
		}
	})
	
	new Vue({
		el:'#app2',
		data:{
			
		}
	})
	
	new Vue({
		el:'#app3',
		data:{
		
		}
	})
</script>

在视图层，在不同的vue实例中，使用自定义全局指令

<div id="app1">
	{{i}}
</div>
<div id="app2">
	<div v-red>你好</div>
</div>
<div id="app3">
	<div v-red>vue</div>
</div>

预览效果，如下所示：

钩子函数（自定执行的函数，我们都可以称之为钩子函数）不用你管，会自动执行

生命周期

路由

自定义指令

自定义指令中的钩子函数有：

    bind函数：每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次

    拿不到父元素

    和样式相关的操作，一般都可以在 bind 执行

    inserted：表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】

        和js 行为有关的最好写入Inserted去执行，js放置不生效

    update：当VNode更新的时候，会执行 updated， 可能会触发多次