目录

1.自定义全局指令

2.自定义局部指令

         3.自定义指令的不同函数

本文主要介绍如何在Vue.js如何自定义全局和局部指令，以两个案例进行介绍，分别自定义v-focus和v-color指令。v-focus实现在表单输入框获取焦点，v-color可设置元素的背景颜色。

1.自定义全局指令

基本语法如下：Vue.directive(指令名,function(绑定的元素，......){

})

 Vue.directive('focus', {inserted: function(element) {element.focus()}})Vue.directive('color', {bind: function(e, b) {e.style.backgroundColor = b.value}})

 定义完即可在元素上使用，需要加上“v-”前缀

 完整代码如下：

2.自定义局部指令

在directives属性中添加局部指令

 new Vue({el: '#app',data: {color: '#674522'},methods: {},directives: {focus: {inserted: function(element) {element.focus()}},color: {bind: function(e, b) {e.style.backgroundColor = b.value}}}})

 使用方法同全局指令一样，在相应元素中添加自定义的指令即可

效果如图：

第二个input文本框会自动获取焦点，第三个input文本框的背景会变色

3.自定义指令的不同函数

（1）只写function()时，会在绑定数据及更新时调用

（2）可写三个函数，bind绑定时调用,inserted插入时调用,update更新时调用。

点击

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！