详解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 tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
javascript下判断一个元素是否存在的代码
Mar 05 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
深入学习JavaScript中的bom
May 27 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 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各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
canvas实现钟表效果
2017/02/13 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
Tornado 多进程实现分析详解
2018/01/12 Python
基于pip install django失败时的解决方法
2018/06/12 Python
python程序封装为win32服务的方法
2021/03/07 Python
python3安装speech语音模块的方法
2018/12/24 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
一文读懂Python 枚举
2020/08/25 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
英文自荐信常用句子
2014/03/26 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
整改报告怎么写
2014/11/06 职场文书
高三语文复习计划
2015/01/19 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
党纪处分决定书
2015/06/24 职场文书
2015初中团委工作总结
2015/07/28 职场文书
党员干部学习心得体会
2016/01/23 职场文书
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang