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

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

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

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

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

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

<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) "htmlcode">

<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

结果很明显，不符合规则的数据，input的边框变红了。
End
这里只是抄写下官方的文档，举两个栗子，就是那么简单，任性 (￣～￣) ！其实主要想说明白的一件事就是明确dirctive的意义：指令是用来操作DOM的，希望能起到抛砖引玉的作用吧。
参考
VUE-自定义指令 
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。