vue.js内部自定义指令与全局自定义指令的示例分析

 
 
 


 
 
 
 hello
 

在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里面我们可以看到

Vue.directive("css",{}）

我们在 new Vue外部定义了这样一段代码,这就是我们全局自定义指令的模板方式

• css是自定义指令的名字

• {}里面我们写上钩子函数就可以

我们所有的钩子函数里面，基本都会有2个参数el,binding

• el: 指令所绑定的元素，可以用来直接操作 DOM 。

• binding 绑定元素本身的一个对象

• 

从上面我们可以看到，binding里面保留绑定指令的name和value，这些很重要

局部自定义指令

directives:{
 name:{

 }
 }

区别在于，我们写在new Vue里面，里面api操作和上面的全局自定义指令一样

下面我们开始看代码运行结果

我们可以看到样式引用上去了

文本框也获取了焦点

关于“vue.js内部自定义指令与全局自定义指令的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。