vue.js自定义指令

除了使用默认的vue核心指令，如v-model, v-bind等，我们还可以自定义指令，封装常用的功能。

如：实现input框自动获得焦点，且与之双向绑定的数据显示颜色为红色

自定义指令.gif

具体代码

代码解析：

全局自定义指令

// 自定义全局指令
Vue.directive('focus', {
    inserted: function (el) {
        el.focus();
    }
});

html中调用自定义指令focus

<input type="text" class="form-control" v-model="msg" v-focus>

自定义私有指令

let vm = new Vue({
    el: "#app",
    data: {
        msg: '',
    },
    directives: { // 自定义私有指令
        color: function (el, binding) {
            el.style.color = binding.value
        }
    }
})

调用私有指令color

<h3 v-color="'red'">{{ msg }}</h3>

自定义指令

如想了解更多的vue实例，请查阅我的vue笔记目录