vue2.X过渡&动画和自定义指令

transition(过渡) animation(动画)

1. 过渡效果

过渡样式：指定过渡样式：transition 指定隐藏时样式：opacity(持续时间)/其他

transition封装组件，可以给任何元素和组件添加进入/离开过渡

i) 条件渲染使用v-if ii) 条件展示使用v-show

过渡的类名：在进入/离开的过渡中，会有6个class切换

v-enter：定义进入过渡的开始状态v-enter-active：定义进入过渡生效时的状态v-enter-to：定义过渡的结束状态v-leave：定义离开过渡的开始状态v-leave-active：定义离开过渡生效时的状态v-leave-to：定义离开过渡的结束状态

注：使用没有名字的<transiton>时，v-是这些类名的默认前缀，当使用<tratition name=”name1”>时，v-enter会被替换为name1-enter

<body><style>/* 显示或隐藏过程中的过渡效果 */.v-enter-active,.v-leave-active{transition: opacity 1s;}/* 显示前和隐藏后 */.v-enter,.v-leave-to{opacity: 0;}/* 针对显示和隐藏指定不同的效果 *//* 显示的过渡效果 */.va-enter-active{color: yellow;transition: all1s;}/* 隐藏的过渡效果 */.va-leave-active{transition: all3s;}/* 显示前和隐藏后的效果 */.va-enter,.va-leave-to{color: red;opacity: 0;/* X轴右移 */transform: translateX(20px);}</style><scriptsrc="./node_modules/vue/dist/vue.js"></script><divid="app"><button@click="show=!show">渐变过渡</button><transitionname="v"><pv-show="show"><strong>测试渐变效果</strong></p></transition></div><divid="app2"><button@click="show=!show">渐变平滑过渡</button><transitionname="va"><pv-show="show"><strong>测试渐变效果</strong></p></transition></div><script>newVue({el:"#app",data:{show:true,}})newVue({el:"#app2",data:{show:true,}})</script></body>

效果：

前：

点击按钮后：

2. 动画效果

<body><scriptsrc="./node_modules/vue/dist/vue.js"></script><style>/* 显示过程能中的动画效果 */.bounce-enter-active{animation: bounce-in 1s;}/* 隐藏过程中的动画效果 */.bounce-leave-active{animation: bounce-in 1sreverse;}@keyframesbounce-in{0%{transform: scale(0);}25%{transform: scale(0.5);}50%{transform: scale(1);}75%{transform: scale(1.5);}100%{transform: scale(2);}}</style><divid="demo"><button@click="show=!show">动画</button><br><transitionname="bounce"><pv-show="show"style="display: inline-block;"><strong>测试文字</strong></p></transition></div><script>newVue({el:"#demo",data:{show:true,}})</script></body>

效果：

逐步放大缩小

3. Vue内置指令

官方文档： /v2/api/#指令

<body><style>[v-cloak]{display: none;}</style><scriptsrc="./node_modules/vue/dist/vue.js"></script><divid="app"v-cloak><h3>{{msg}}</h3><h3>{{msg}}</h3><h3>{{msg}}</h3><h3v-text="msg"></h3><spanv-pre>{{测试文本}}</span></div><script>newVue({el:"#app",data:{msg:"测试"}})</script></body>

v-html内容按普通 HTML 插入，可防止 XSS 攻击

v-show根据表达式的真假值，切换元素的fisplayCSS属性来显示隐藏元素

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步骤如下：在被 Vue 管理的模板入口节点上作用v-cloak指令,添加一个属性选择器 [v-cloak] 的CSS 隐藏样式： [v-cloak] {display: none;}.原理：默认一开始被 Vue 管理的模板是隐藏着的，当 Vue 解析处理完 DOM 模板之后，会自动把这个样式去除，然后就显示出来。

4. 自定义指令

Vue官方文档：自定义指令 — Vue.js

(1) 注册全局指令：Vue.directive(“自定义指令名称”，{

Inserted:function(el,binding){

//el表示使用此指令的DOM元素，binding可获取此指令的绑定值

} })

(2)注册局部指令：new Vue({directives:{

“自定义指令名”:{//指令名不要带v-

Instered(el,binding){

} } } })

(3) 使用指令：引用指令时，指令前面加v-;直接在元素使用上，v-指令名 = “表达式”

<body><scriptsrc="./node_modules/vue/dist/vue.js"></script><divid="app"><pv-upper-text="message">xxxxx</p>自动获取焦点:<inputtype="text"v-focus></div><script>// 注册全局自定义指令// 在vue实例上注册vue自定义指令// 第一个参数式指令名称，自定义的，第二个参数是对象,对象存在钩子函数，钩子函数自动调用Vue.directive("upper-text",{//自定义指令的钩子函数自动调用// bind：只调用一次，指令第一次绑定到元素时调用// 一般对样式的操作放到bind里面bind:function(el){// 输出时字体颜色变成黄色el.style.color ="yellow"},// inserted:被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已经被插入文档中)// 一般对JS的操作一般放到inserted钩子中// binding钩子函数的参数，一个对象inserted:function(el,binding){console.log(binding);// 转换成大写,输出时字母变成大写el.innerHTML =binding.value.toUpperCase();// el.innerHTML = binding.name.toUpperCase();}})newVue({el:"#app",data:{message:'abc,测试数据',},// 注册局部的自定义指令directives:{"focus":{inserted:function(el,binding){el.focus()}}}})</script></body>

运行效果：

自动获取焦点效果