详解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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
Firefox window.close()的使用注意事项
Apr 11 Javascript
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
ajax请求data遇到的问题分析
Jan 18 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
element跨分页操作选择详解
Jun 29 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 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判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
layui分页效果实现代码
2017/05/19 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中函数的用法实例教程
2014/09/08 Python
pandas string转dataframe的方法
2018/04/11 Python
python学生管理系统开发
2019/01/30 Python
详解Python的三种可变参数
2019/05/08 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
python的flask框架难学吗
2020/07/31 Python
python 实现的车牌识别项目
2021/01/25 Python
ddl,dml和dcl的含义
2016/05/08 面试题
跟单业务员岗位职责
2014/03/08 职场文书
小区推广策划方案
2014/06/06 职场文书
三严三实对照检查材料
2014/09/22 职场文书
教师研修随笔感言
2015/11/18 职场文书
《所见》教学反思
2016/02/23 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android