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


Posted in Javascript onJuly 11, 2017

前言

大家都知道在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-cssv-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 绑定元素本身的一个对象
  • vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)

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

局部自定义指令

directives:{
 name:{

 }
 }

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

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

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

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

文本框也获取了焦点

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 #Javascript
使用jQuery实现动态添加小广告
Jul 11 #jQuery
Vue中父组件向子组件通信的方法
Jul 11 #Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 #Javascript
网页中的图片查看器viewjs使用方法
Jul 11 #Javascript
自定义事件解决重复请求BUG的问题
Jul 11 #Javascript
关于js中的鼠标事件总结
Jul 11 #Javascript
You might like
php sybase_fetch_array使用方法
2014/04/15 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
js 内存释放问题
2010/04/25 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
python根据文件大小打log日志
2014/10/09 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
Python pymongo模块用法示例
2018/03/31 Python
django 消息框架 message使用详解
2019/07/22 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
Python的历史与优缺点整理
2020/05/26 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
企业厂长岗位职责
2013/12/17 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
会计岗位职责范本
2015/04/02 职场文书