默认使用了vue-cli的webpack模版建立项目。

1.自定义一个最基本的指令

我就用中文字符变量了，你能怎么着，我就是想说明问题所在。此处定义的是全局指令，即根组件的继承者们都都能使用它。

调用组件

在index.html里,调用自定义的指令，"指令名字"就是你的指令的名字：

完整代码：

  <Meta charset="utf-8"/>


  

  

定义和注册组件

main.js

import Vue from 'vue'
Vue.directive('指令名字',{

bind () {

console.log('触发了绑定事件')

},update (value) {

this.el.innerHTML =

'name - ' + this.name + '
' +

'expression - ' + this.expression + '
' +

'argument - ' + this.arg + '
' +

'modifiers - ' + JSON.stringify(this.modifiers) + '
' +

'value - ' + value

}

})
/ eslint-disable no-new /

new Vue({

el: 'body',data: {

msg: 'hello!'

}

})

2.自定义一个局部指令

在全局注册指令实在不够灵活，就像把所有变量都限定为只能定义成全局变量一样愚蠢。

最高层调用根组件

index.html

  <Meta charset="utf-8"/>


  
  

调用自定义指令

定义指令

在directives区块中定义。
App.vue

入口js文件

main.js

import Vue from 'vue'
import App from './App.vue'
/ eslint-disable no-new /

new Vue({

el: 'body',components: {

App

}

})

3.更多例子

用textarea替换div的一个例子