vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017-07-11 09:06
2787 查看
前言
大家都知道在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东来实现自定义指令,这就是directive。下面话不多说了,来一起看看详细的介绍:
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"></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里面我们可以看到
Vue.directive("css",{})
我们在 new Vue外部定义了这样一段代码,这就是我们全局自定义指令的模板方式
- css是自定义指令的名字
- {}里面我们写上钩子函数就可以
我们所有的钩子函数里面,基本都会有2个参数el,binding
- el: 指令所绑定的元素,可以用来直接操作 DOM 。
- binding 绑定元素本身的一个对象
从上面我们可以看到,binding里面保留绑定指令的name和value,这些很重要
局部自定义指令
directives:{ name:{ } }
区别在于,我们写在new Vue里面,里面api操作和上面的全局自定义指令一样
下面我们开始看代码运行结果
我们可以看到样式引用上去了
文本框也获取了焦点
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
相关文章推荐
- vue.js实现内部自定义指令和全局自定义指令------directive
- 详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
- 利用Vue.js实现拼图游戏
- vue.js通过自定义指令实现数据拉取更新的实现方法
- 利用Vue.js实现求职在线之职位查询功能
- Three.js利用Detector.js插件如何实现兼容性检测详解
- 【079】利用“剪叶子”算法实现树形结构的搜索功能,用Vue.js实现
- Vuejs使用笔记 --- component内部实现
- vue.js利用defineProperty实现数据的双向绑定
- 详解VUE 定义全局变量的几种实现方式
- webpack+vue.js实现组件化详解
- 详解vue.js全局组件和局部组件
- Vue.js双向绑定实现原理详解
- 利用node.js实现自动生成前端项目组件的方法详解
- 利用Vue.js实现拼图游戏
- vue.js通过自定义指令实现数据拉取更新的实现方法
- 利用vue.js实现被选中状态的改变
- Vue.js实战之利用vue-router实现跳转页面
- vue2利用Bus.js如何实现非父子组件通信详解
- 利用node.js实现反向代理的方法详解