Vue 自定义指令

全局注册Vue的自定义指令：

1. 全局注册钩子函数

html 部分使用：

<div v-demo:foo.a.b="message"></div> 
<!-- 
demo 是函数名
冒号后的 foo 是指定的参数，可以是动态的
a 和 b 是 修饰符
message 是指令表达式
-->

js 部分：

Vue.directive('demo',{    
	bind: function(el, binding, vnode){ // el,binding,vnode 是钩子函数的参数
        // .. do something
	}
})

new Vue({
    data(){
        return {
            message:'hello!'
        }
    }
}).$mount('#app')

钩子函数的参数：

• el: 指的是指令绑定的元素,即上面的 div
• binding：指令的属性对象，对象里包括：
  - name: 指令名，不包含 v-前缀, 即上面的 demo
  - arg: 指令参数，可以写成[arg]动态使用，即上面的 foo
  - modifiers: 指令的修饰符，只要加了修饰符，都显示为true, 上面例子即：{a:true, b: true}
  - expression: 指令表达式, 即上面的 message
  - value: 指令表达式的值，是指令绑定的值, 即上面的"hello!"
• vnode: 虚拟节点

由于 binding 是一个对象，binding 中的所有参数的值都可以通过 （binding.参数名）获取，以用来设置指令。

2. 实例：自定义一个指令 limit, 限制元素内文本长度, 并且可以使用修饰符 upper 将文本改成大写

Vue.directive('limit', function (el, binding) {
    // 获取元素内文本内容
        let str = el.innerHTML; 
    // 文本改成大写
        if (binding.modifiers.upper){  // 只要添加了upper修饰符，data.modifiers.upper的值就是 true
            str = str.toUpperCase()
        }
   // 限制文本长度
        if (str.length > binding.value){
            el.innerHTML = str.substring(0,binding.value) + '...'
        }
    });

html中使用：

<div v-limit:up.upper="length">{{words}}</div>

Vue中数据：

new Vue({
    data(){
        return {
            words: 'asdfadsgdfshdfshghghh',
            length: 10
        }
    }
}).$mount('#app')

页面输出结果如下：

ASDFADSGDF…