vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition

自定义指令

默认设置的核心指令( 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 = '';

}

})

自定义过滤器

Vue类提供了一个方法叫filter

全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面

通过这个方法我们可以定义插值过滤器使用 {{key | filterName  param}}

定义 Vue.filter（），接收两个参数

第一个参数表示过滤的名称

第二个参数表示过滤函数（return返回值）

作用域是vue的实例化对象

第一个参数是要被过滤的数据

使用过滤器时候，传入几个参数，该函数就多几个参数，并顺序是一一对应

Eg:

// 将输入内容做驼峰式命名转化 abc-def => abcDef

<div id="app">

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

<p>{{msg | toCamel}}</p>

</div>

Vue.filter('toCamel', function (str) {

return str.replace(/\-([a-zA-Z])/g, function (match, $1) {

return $1.toUpperCase();

})

})

var app = new Vue({

el: '#app',

data: {

msg: ''

}

})

Vue支持多个过滤器处理同一个数据，此时前一个过滤器的输出会作为后一个过滤器的输入

Eg:

<div id="app">

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

<p>{{msg | multiples | price title notice}}</p>

//变量是msg   title   notice   过滤函数的时候作为参数传入

</div>

// 定义multiples 过滤器，将msg*3

Vue.filter(multiples, function (str) {

// 将str* 3返回

return str * 3;

})

// 比如输入100得到￥100.00

Vue.filter('price', function (str, title, notice) {

console.log(arguments)  msg   title   notice

return title + '￥' + (+str).toFixed(2) + notice

})

var app = new Vue({

el: '#app',

data: {

msg: '',

title: '裙子',

notice: '降价通知'

}

})

Vue过渡

我们可以为元素添加transition属性，此时vue会根据transition属性值创建三个类

demo-transition

demo-enter
demo-leave
我们可以对这些类添加css3动画特效实现过渡效果
.box {
width: 200px;
height: 200px;
background: red;
}
.demo-transition {
transition: all 1s;
}
.demo-enter,.demo-leave {
width: 0;
height: 0;
opacity: 0;
}
<div id="app">
<button v-on:click="showbox">btn</button>
<div class="box" transition="demo" v-show="isShow"></div>
</div>
var app = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
showbox: function () {
this.isShow = !this.isShow
}
}
})