vue中自定义指令

Posted 2020-09-27 小_Li_Kelly

自定义指令

默认设置的核心指令( v-model，v-bind，v-for，v-if,v-on等 ),Vue 也允许注册自定义指令。注意，在 Vue2.0 里面，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。

自定义指令相当于为元素添加一个自定义属性，只不过是以v-开头的

自定义自定义指令的语法

注意：在vue中使用时候，要加上v-，在定义的时候，要去除v-

自定义指令和自定属性，当元素渲染的时候该属性会被删除，后者不会被删除

当我们为一个dom元素绑定一个自定义指令的时候，自定义指令会为这个元素单独创建一份自定义指令实例化对象，不是共通的。

在自定义指令中我们通过vm属性可以访问到vue的实例化对象，通过vue实例化对象，可以控制vue实例化对象 中容器元素内的其他元素

this.vm.color = ‘red‘  //实例化对象中有color这个属性

定义自定义指令时候，我们通常定义在最前面，这样在实例化的时候才能获取到里面的内容

Vue.direvtive,这个方法接受两个参数

第一个参数是指令名称 v-去掉

第二个参数表示可以是一个对象，也可以是一个函数update函数

当是一个对象时候，有三个方法

Bind：开始绑定的回调函数

在自定义自指令被绑定到元素上执行的一个方法，这个方法在自定义指令生命中只执行一次

作用域是自定义指令实例化对象

参数是没有

Update：内容更新时的回调函数

这个方法每当其内容跟新时候都会调用一次

并且在绑定指令时候也会调用，这次是update的第一次调用，这一次只有一个参数，就是传入的数据，如果没有数据传入，那么他就是undefined

从第二次调用开始，他有两个参数

第一个参数表示新的值

第二个参数表示旧的的值

作用域就是指令实例化对象

当第二个参数是一个函数的时候，就是表示update函数

Unbind 解除绑定时候的回调函数

<div id="app">

<input type="text" v-model="msg">

<div v-hello-directive="msg">hello</div>

</div>

Vue.directive(‘hello-directive‘, {

bind: function () {

//开始绑定的回调函数

},

update: function (newValue, oldValue) {

//内容更新时的回调函数

},

unbind: function () {

//解除绑定时候的回调函数

}

})

var app = new Vue({

el: ‘#app‘,

data: {

msg: ‘‘

}

})

Eg://输入校验

Vue.direvtive,这个方法接受两个参数

第二个参数表示可以是一个对象

<div id="app">

<input type="text"  v-model="userName">

<p v-check-username="userName"></p>

</div>

Vue.directive(‘check-username‘, {

bind: function () {},

update: function (newValue, oldValue) {console.log(this)

// 判断userName值在长度只能在4-20个字符之间

// 如果不在，我们在p标签中显示 ’长度只能在4-20个字符之间‘

if (newValue.length > 20 || newValue.length < 4 && newValue.length > 0) {

this.el.innerhtml = ‘长度只能在4-20个字符之间‘;

} else {

this.el.innerHTML = ‘‘;

}

}

})

Vue.direvtive,这个方法接受两个参数

第二个参数是一个函数就是update函数

Vue.directive(‘check-username‘, function (newValue, oldValue) {

if (newValue.length > 20 || newValue.length < 4 && newValue.length > 0) {

this.el.innerHTML = ‘长度只能在4-20个字符之间‘;

} else {

this.el.innerHTML = ‘‘;

}

})