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 相关文章推荐
Ajax 数据请求的简单分析
Apr 05 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 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循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
深入PHP变量存储的详解
2013/06/13 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
PHP分享图片的生成方法
2018/04/25 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
谈谈JavaScript中的函数
2020/09/08 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
python将文本中的空格替换为换行的方法
2018/03/19 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
python speech模块的使用方法
2020/09/09 Python
猫咪家具:CatsPlay
2018/11/03 全球购物
《桂林山水》教学反思
2014/02/08 职场文书
踏青活动策划方案
2014/08/19 职场文书
室内趣味活动方案
2014/08/24 职场文书
2014年党务工作总结
2014/11/25 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
Redis的字符串是如何实现的
2021/10/24 Redis
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python