大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

Vue2.x-directive的示例分析

这篇文章主要介绍Vue2.x-directive的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联公司是一家集网站建设,隆化企业网站建设,隆化品牌网站建设,网站定制,隆化网站建设报价,网络营销,网络优化,隆化网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

除了默认设置的核心指令( 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标签自动获得标签

是不是感觉很简单?相信自己,其实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

 
   //code here
 

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

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


指令验证

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

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






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

result

Vue2.x-directive的示例分析

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

以上是“Vue2.x-directive的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


文章题目:Vue2.x-directive的示例分析
浏览路径:http://dzwzjz.com/article/psdddj.html
在线咨询
服务热线
服务热线:028-86922220
TOP