详解Vue2.x-directive的学习笔记


Posted in Javascript onJuly 17, 2017

除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而,有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。

官方建议directive是对纯 DOM 元素进行底层操作使用,一般情况下还是建议使用组件的复用。

directive的意义

自定义指令是用来操作DOM的。

尽管数据驱动是Vue的核心之一,但是在实际情况下,并不是所有的情况都可以用数据来驱动视图,我们不可避免的会在有些情况下有操作DOM的需求,所以directive也就出现了。自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的。

官方栗子

code

// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
 // 当绑定元素插入到 DOM 中。
 inserted: function (el) {
  // 聚焦元素
  el.focus()
 }
})

//局部指令
directive: {
 focus(el){
  el.focus()
 }
}

use

<input v-focus>
//input标签自动获得标签

是不是感觉很简单?相信自己,其实vue大法真心不难,难得是如何应用。下面先来简单看看的钩子函数。

钩子函数

  1. bind:在该元素绑定指令时调用且仅调用一次,用于初始化
  2. inserted:元素插入父节点时调用(可能仍在虚拟Dom中)
  3. update:模板更新时调用
  4. componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
  5. unbind: 只调用一次, 指令与元素解绑时调用。

钩子参数

  1. el: 指令所绑定的元素,可以用来直接操作 DOM 。
  2. binding: 一个对象,包含以下属性:
    1. name: 指令名,不包括 v- 前缀。
    2. value: 指令的绑定值
    3. oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    4. expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" , expression 的值是 "1 + 1"。
    5. arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 "foo"。
    6. modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
  3. vnode: Vue 编译生成的虚拟节点。
  4. oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

实际应用

directive的语法就这么简单,在合适的钩子中做应该做的事就可以了。下面会列出两个使用指令的栗子

集成第三方插件

用了一段时间的vue,其实我都没有留意directive具体使用,一般来言真的很少使用到。直到有一次需要集成第三方插件到Vue时才发现,原来directive是集成第三方插件最合适也是最简单的方式。凡是关于第三方的集成,都可以尝试使用directive

import Vue from 'vue'
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'

Vue.directive('highlight', {
 bind(el){
  hljs.highlightBlock(el);
 },
})

use

<pre>
 <code v-highlight>
   //code here
 </code>
</pre>

如上,我注册了一个全局的指令 highlight。 指令的作用就是高亮代码,当元素带上'v-highlight'时,hljs就会去初始化该Dom。

当然我这是可以使用组件来实现这个功能,但绝对没有指令那么方便快捷,下面是一个简略的组件,可以看出,不仅定义和使用都比指令来的复杂。

<template>
  <pre>
    <code ref="code">
     <slot name="code"></slot>
    </code>
  </pre>
</template>
<script>
  import hljs from 'highlight.js'
  import 'highlight.js/styles/monokai-sublime.css'
  export default {
    mounted(){
     hljs.highlightBlock(this.$refs.code);
    }
  }
</script>

指令验证

如果需要一个可以复用的验证,我们也可以使指令来完成,下面来看一个简单的栗子:

Vue.directive('checkName', {
 //监控数据变化 
 update(el, binding){
   let regex = /^[a-zA-z]{6,10}$/g;
   //=value === oldValue, 避免重复更新
   if(binding.value !== binding.oldValue){
     el.style.border = regex.test(binding.value) ? '' : '1px solid red';
   }
 }
})

user

<input v-model='value1' v-checkName='value1'></input>
<input v-model='value2' v-checkName='value2'></input>
<input v-model='value3' v-checkName='value3'></input>
<input v-model='value4' v-checkName='value4'></input>

//当value的值不是6-10的字母的时,input的boder变为红色;

result

详解Vue2.x-directive的学习笔记

结果很明显,不符合规则的数据,input的边框变红了。

End

这里只是抄写下官方的文档,举两个栗子,就是那么简单,任性 ( ̄~ ̄) !其实主要想说明白的一件事就是明确dirctive的意义:指令是用来操作DOM的,希望能起到抛砖引玉的作用吧。

参考

VUE-自定义指令

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
JqGrid web打印实现代码
May 31 Javascript
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
jquery操作select方法汇总
Feb 05 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
Bootstrap插件全集
Jul 18 Javascript
JS中常用的正则表达式
Sep 29 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
javascript  数组排序与对象排序的实例
Jul 17 #Javascript
jQuery常用选择器详解
Jul 17 #jQuery
js轮播图的插件化封装详解
Jul 17 #Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 #Javascript
Vue.js中组件中的slot实例详解
Jul 17 #Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 #Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 #Javascript
You might like
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
用NodeJS实现批量查询地理位置的经纬度接口
2016/08/16 NodeJs
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
react-router实现按需加载
2017/05/09 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
微信小程序利用云函数获取手机号码
2019/12/17 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
总经理司机岗位职责
2014/02/06 职场文书
花店创业计划书范文
2014/02/07 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
庆元旦活动总结
2014/07/09 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记