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实现的一个导航滚动效果具体代码
May 27 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
小程序云开发实战小结
Oct 25 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
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
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
Python socket实现简单聊天室
2018/04/01 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
介绍一下常见的木马种类
2014/11/15 面试题
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
酒店前台岗位职责
2015/04/16 职场文书
2016年党建工作简报
2015/11/26 职场文书
入团申请书格式
2019/06/20 职场文书
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers