自定义指令
默认设置的核心指令( 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
}
}
})