当前位置：首页 > 资讯 > 技术文档

vue.js内部自定义指令与全局自定义指令的实现详解（利用directive）

时间：2021-02-08 04:08 编辑：来源：阅读：
扫一扫，手机访问

摘要：vue.js内部自定义指令与全局自定义指令的实现详解（利用directive）

[b]前言[/b] 大家都知道在Vue中，我们平时数据驱动视图时候，内部自带的指令有时候解决不了一些需求，这时候，Vue给我们一个很好用的东东来实现自定义指令，这就是directive。下面话不多说了，来一起看看详细的介绍： [b]directive[/b] 这个单词是我们写自定义指令的关键字哦自定义指令为我们提供了几个钩子函数，这时候你一定好奇什么是钩子函数，说简单点，就是集中表现状态 [list] [*][b]bind[/b]: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。[/*] [*][b]inserted[/b]: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。[/*] [*][b]update[/b]: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。[/*] [*][b]componentUpdated[/b]: 被绑定元素所在模板完成一次更新周期时调用。[/*] [*][b]unbind[/b]: 只调用一次，指令与元素解绑时调用。[/*] [/list] [b]下面我们开始上代码，让我们更好的理解自定义指令怎么做[/b]

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></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中，我们看到了两个指令[code]v-css[/code]和[code]v-focus[/code] 我们自定义指令时候，一定前面要带上[code]v-[/code]

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里面我们可以看到 [code]Vue.directive("css",{}）[/code] 我们在 new Vue外部定义了这样一段代码,这就是我们全局自定义指令的模板方式 [list] [*]css是自定义指令的名字[/*] [*]{}里面我们写上钩子函数就可以[/*] [/list] 我们所有的钩子函数里面，基本都会有2个参数el,binding [list] [*]el: 指令所绑定的元素，可以用来直接操作 DOM 。[/*] [*]binding 绑定元素本身的一个对象[/*] [*][img]http://files.jb51.net/file_images/article/201707/201771190948655.png?201761191012[/img] [/*] [/list] 从上面我们可以看到，binding里面保留绑定指令的name和value，这些很重要 [b]局部自定义指令[/b]

directives:{
 name:{

 }
 }

区别在于，我们写在new Vue里面，里面api操作和上面的全局自定义指令一样下面我们开始看代码运行结果 [img]http://files.jb51.net/file_images/article/201707/201771191110752.png?201761191118[/img] 我们可以看到样式引用上去了文本框也获取了焦点 [b]总结[/b] 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程素材网的支持。

全部评论(0)

上一篇：Vue-cli 使用json server在本地模拟请求数据的示例代码
下一篇：vue.js 获取当前自定义属性值

资讯排行榜
更多>>