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 相关文章推荐
javascript的数组和常用函数详解
May 09 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
layUI实现列表查询功能
Jul 27 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
js实现购物车商品数量加减
Sep 21 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
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
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
深入浅析php json 格式控制
2015/12/24 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
php实现图片压缩处理
2020/09/09 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
高考自主招生自荐信
2013/10/20 职场文书
大学毕业后的十年规划
2014/01/07 职场文书
2014国培学习感言
2014/03/05 职场文书
学生手册评语
2014/05/05 职场文书
企业法人代表任命书
2014/06/06 职场文书
2014年国庆节寄语
2014/09/19 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS
nginx日志格式分析和修改
2022/04/28 Servers