Vue全家桶--05 过度/动画和自定义指令
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 lang="en"> <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 id="app"> <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 lang="en"> <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 id="app"> <p v-upper-text="message">xxxxx</p> 自动获取焦点：<input type="text" v-focus> </div> <div id="app2"> <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>
