Vue全家桶--05 过度/动画和自定义指令
5.1 过渡/动画指令
元素在显示和隐藏时，实现过滤或者动画的效果。常用的过渡和动画都是使用CSS来实现的
**在CSS中操作 trasition（过滤）或 animation（动画）达到不同效果
**为目标元素添加一个父元素<trasition name='xxx'>，让父元素通过自动应用class类名来达到效果
**过渡与动画时，会为对应元素动态添加的相关class类名：
1.xxx-enter：定义显示前的效果
2.xxx-enter-active：定义显示过程的效果
3.xxx-enter-to：定义显示后的效果
4.xxx-leave：定义隐藏前的效果
5.xxx-leave-active：定义隐藏过程的效果
6.xxx-leave-to：定义隐藏后的效果
5.2 Vue内置指令
v-html：内容按普通HTML插入，可防止XSS攻击
v-show：根据表达式的真假值，切换元素的display CSS属性来显示隐藏元素
v-if：根据表达式的真假值，来渲染元素
v-else：前面必须有 v-if 或 v-else-if
v-else-if：前面必须有 v-if 或 v-else-if
v-for：遍历的数组或对象
v-on：绑定事件监听器
v-bind：用于绑定元素属性
v-model：在表单控件或者组件上创建双向绑定
v-once：一次性插值，当后面数据更新后视图数据不会更新
v-pre：可以用来显示原始插入值标签{{}}，并跳过这个元素和它的子元素的编译过程，加快编译。
v-text：等价于{{}}用于显示内容，但区别在于：{{}}会造成闪烁问题，v-text不会闪烁
v-cloak：如果想用{{}}又不想有闪烁问题，则使用v-cloak来处理
添加一个属性选择器[v-cloak]的CSS隐藏样式：[v-cloak]{display:none;}
原理：默认一开始被Vue管理的模板是隐藏着的，当Vue解析处理完DOM模板之后，会自动把这个样式去除，然后就显示出来。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[v-cloak] {display: none;}
</style>
</head>
<body>
<div >
<h3> v- text</h3>
<p v-text="msg"></p>
<p v-text="msg"></p>
<div v-cloak>
<p>{{ msg }}</p>
<p>{{ msg }}</p>
</div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'hello!'
}
});
</script>
</body>
</html>5.3 自定义指令
除了内置指令外，Vue也允许注册自定义指令，有的情况下，你仍然需要对普通DOM元素进行底层操作，这时候使用自定义指令更为方便。
全局自定义指令：
// 注册全局自定义指令，可以在多个Vue管理的入口下使用该指令
// 第一个参数为指令名，但是不要有v-开头
Vue.directive('upper-text',{
//一般对样式 的操作在bind中，bind函数只调用一次
bind: function (el) {
el.style.color = 'red'
},
//一般对js操作在inserted中，inserted也是只调用一次
// el是当前指令作用的那个Dom元素，
// binding用于获取使用了当前指令的绑定值(value)、表达式(expression)、指令名(name)等
inserted: function (el, binding) {
// 将所有字母文本内容转换为大写
el.innerHTML = binding.value.toUpperCase()
}
})局部自定义指令：
new Vue({
el: '#app',
data: {
message: 'mengxuegu, 陪你学习伴你梦想'
},
//注册局部自定义指令：只能在当前Vue实例管理的入口 下引用这个指令
directives: {
'focus': { // 指令名，
bind: function () {
},
// 刷新页面自动获取焦点
inserted: function (el, binding) {
//被 v-focus 作用的那个元素在刷新页面后会自动 获取焦点
el.focus()
}
}
}
})DEMO：自动获取焦点/字体转换
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div >
<p v-upper-text="message">xxxxx</p>
自动获取焦点：<input type="text" v-focus>
</div>
<div >
<p v-upper-text="msg">xxxxx</p>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 注册全局自定义指令，可以在多个Vue管理的入口下使用该指令
// 第一个参数为指令名，但是不要有v-开头
Vue.directive('upper-text',{
//一般对样式 的操作在bind中，bind函数只调用一次
bind: function (el) {
el.style.color = 'red'
},
//一般对js操作在inserted中，inserted也是只调用一次
// el是当前指令作用的那个Dom元素，
// binding用于获取使用了当前指令的绑定值(value)、表达式(expression)、指令名(name)等
inserted: function (el, binding) {
// 将所有字母文本内容转换为大写
el.innerHTML = binding.value.toUpperCase()
}
})
new Vue({
el: '#app',
data: {
message: 'mengxuegu, 陪你学习伴你梦想'
},
//注册局部自定义指令：只能在当前Vue实例管理的入口 下引用这个指令
directives: {
'focus': { // 指令名，
bind: function () {
},
// 刷新页面自动获取焦点
inserted: function (el, binding) {
//被 v-focus 作用的那个元素在刷新页面后会自动 获取焦点
el.focus()
}
}
}
})
new Vue({
el: '#app2',
data: {
msg: 'hello'
}
})
</script>
</body>
</html>- 上一篇 »vue全家桶和react全家桶都包含哪些？
- 下一篇 »jQuery 停止动画