详解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 相关文章推荐
jquery操作checkbox示例分享
Jul 21 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 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
php读取纯真ip数据库使用示例
2014/01/26 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
php源码的使用方法讲解
2019/09/26 PHP
页面中js执行顺序
2009/11/09 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
举例详解Python中的split()函数的使用方法
2015/04/07 Python
python 中split 和 strip的实例详解
2017/07/12 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
高职助产应届生自荐信
2013/09/24 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript
vue router 动态路由清除方式
2022/05/25 Vue.js
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript