内部自定义指令和全局自定义指令的实现

来源：动视网责编：小采时间：2020-11-27 20:16:40

内部自定义指令和全局自定义指令的实现

内部自定义指令和全局自定义指令的实现:在Vue中，我们平时数据驱动视图时候，内部自带的指令有时候解决不了一些需求，这时候，Vue给我们一个很好用的东东directive这个单词是我们写自定义指令的关键字哦之定义指令为我们提供了几个钩子函数，这时候你一定好奇什么是钩子函数，说简单点，就是集中表

推荐度：

点击下载本文 文档为doc格式

导读内部自定义指令和全局自定义指令的实现:在Vue中，我们平时数据驱动视图时候，内部自带的指令有时候解决不了一些需求，这时候，Vue给我们一个很好用的东东directive这个单词是我们写自定义指令的关键字哦之定义指令为我们提供了几个钩子函数，这时候你一定好奇什么是钩子函数，说简单点，就是集中表

在Vue中，我们平时数据驱动视图时候，内部自带的指令有时候解决不了一些需求，这时候，Vue给我们一个很好用的东东

directive

这个单词是我们写自定义指令的关键字哦

之定义指令为我们提供了几个钩子函数，这时候你一定好奇什么是钩子函数，说简单点，就是集中表现状态

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次，指令与元素解绑时调用。

下面我们开始上代码，让我们更好的理解自定义指令怎么做

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="https://unpkg.com/vue/dist/vue.js?1.1.11"></script></head><body><div id="app"><div class="ab" v-css="{'color':'red','font-size':'30px'}">hello</div><input type="text" v-focus></div>
 </body></html>

在html中，我们看到了两个指令v-css和v-focus

我们自定义指令时候，一定前面要带上v-

Vue.directive("css",{//钩子函数 ,el就是当前元素 inserted(el,binding){//el绑定的元素本身//binding就是css指令里面的的对象元素let styleobj=binding.value,arr=[];for(let key in styleobj){
 arr.push(key+":"+styleobj[key])
 }
 arr=arr.join(";");
 el.style.cssText=arr;
 },
 bind(el,binding) {//指令绑定在元素上时候执行，只执行一次 }
});new Vue({
　　 el:'#app',
 data:{
 show:true},
 directives:{
 focus:{
 inserted(el,binding){//el绑定的元素本身//binding就是css指令里面的的对象元素 el.focus();
 }
 }
 }
 });

在js里面我们可以看到