本篇随笔主要写了Vue过渡和动画基础、多个元素过渡和多个组件过渡，以及列表过渡的动画效果展示。详细案例分析、GIF动图演示、附源码地址获取。
作为自己对Vue过渡和动画效果知识的总结与笔记。
因内容有案例解读，代码实现，导致篇幅稍长，大约3分钟可以浏览完，如有需要的话（请笔友耐心看完，也可按目录查找所需内容）
如需要全部案例代码：请到文章末尾获取（百度网盘链接，全套案例源码）
PS: 点击模版后的 --> 
这个标志可以浏览目录结构，以便快速定位需要的内容
以下案例均是基于此模版实现的（以第一个案例为例）
效果展示：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Document</title>
9 <!-- 此处为引用JS、CSS等文件区、且css,文件与html文件在同一目录下 -->
10 <script src="velocity.js"></script>
11 <script src="vue.js"></script>
12 <script src="velocity.min.js"></script>
13 <script src="lodash.js"></script>
14 <script src="lodash.min.js"></script>
15
16 <link rel="stylesheet" href="animate.css">
17 <link rel="stylesheet" href="animate.min.css">
18
19 <!-- 此处为样式引用 -->
20 <style>
21 /* 图形的初始状态 */
22 .chart {
23 width: 200px;
24 height: 50px;
25 background-color: orange;
26 }
27
28 /* 进入和离开的过程 */
29 .box-enter-active,
30 .box-leave-active {
31 transition: width 3s;
32 /* width的变化，动画时间是3秒 */
33 }
34
35 /* 进入初始状态 和 离开的结束状态*/
36 .box-enter,
37 .box-leave-to {
38 width: 0px;
39 }
40
41 /* 进入的结束状态 和 离开的初始状态 */
42 .box-enter-to,
43 .box-leave {
44 width: 200px;
45 }
46 </style>
47 </head>
48
49 <body>
50
51 <!-- 此处为主代码区 -->
52 <div id="app">
53 <button @click="toggle">改变图形宽度</button>
54 <transition name="box">
55 <div class="chart" v-if="show"></div>
56 </transition>
57 </div>
58 <script>
59 var vm = new Vue({
60 el: '#app',
61 data: {
62 show: true,
63 },
64 methods: {
65 toggle() {
66 this.show = !this.show // 每次都取反
67 }
68 }
69 })
70 </script>
71
72 </body>
73
74 </html>过渡，简而言之，就是从一个状态向另外一个状态插入值，新的状态替换了旧的状态。
通过<transition>标签搭配CSS动画（如@keyframes）可以实现动画效果。动画相比过渡来说，动画可以在一个声明中设置多个状态，例如，可以在动画20%的位置设置一个关键帧，然后在动画50%的位置设置一个完全不同的状态。另外，<transition>标签还提供了一些钩子函数，可以结合JavaScript代码来完成动画效果。
1 <style>
2 /* 图形的初始状态 */
3 .chart {
4 width: 200px;
5 height: 50px;
6 background-color: orange;
7 }
8 /* 进入和离开的过程 */
9 .box-enter-active, .box-leave-active {
10 transition: width 3s; /* width的变化，动画时间是3秒 */
11 }
12 /* 进入初始状态 和 离开的结束状态*/
13 .box-enter, .box-leave-to {
14 width: 0px;
15 }
16 /* 进入的结束状态 和 离开的初始状态 */
17 .box-enter-to, .box-leave {
18 width: 200px;
19 }
20 </style>
21 <script src="vue.js"></script>
22 </head>
23 <body>
24 <div id="app">
25 <button @click="toggle">改变图形宽度</button>
26 <transition name="box">
27 <div class="chart" v-if="show"></div>
28 </transition>
29 </div>
30 <script>
31 var vm = new Vue({
32 el: '#app',
33 data: {
34 show: true,
35 },
36 methods: {
37 toggle () {
38 this.show = !this.show // 每次都取反
39 }
40 }
41 })
42 </script>
Vue为<transition>标签内部的元素提供了3个进入过渡的类和3个离开过渡的类，
|
过渡类型 |
说明 |
|
v-enter |
进入过渡的开始状态，作用于开始的一帧 |
|
v-enter-active |
进入过渡生效时的状态，作用于整个过程 |
|
v-enter-to |
进入过渡的结束状态，作用于结束的一帧 |
|
v-leave |
离开过渡的开始状态，作用于开始的一帧 |
|
v-leave-active |
离开过渡生效时的状态，作用于整个过程 |
|
v-leave-to |
离开过渡的结束状态，作用于结束的一帧 |
上表中6个CSS类名在进入和离开的过渡中切换的存在周期如下图所示：
Vue中的transition组件允许使用自定义的类名。如果使用自定义类名，则不需要给<transition>标签设置name属性。自定义类名是通过属性来设置的，具体属性如下。
自定义类名的优先级高于普通类名，所以能够很好地与其他第三方CSS库结合使用。 animate.css是一个跨浏览器的CSS3动画库，它内置了很多经典的CSS3动画，使用起来很方便。接下来，我们将通过animate.css动画库来演示自定义类名的使用。
首先从官方网站获取animate.css文件，保存到文件目录中。其次创建html文件，并在文件中引入animate.css文件
animated是基本的类名，bounceInLeft是动画的类名
1 <div id="app">
2 <button @click="show=!show">显示/隐藏</button>
3 <transition enter-active-class="animated bounceInLeft"
4 leave-active-class="animated bounceOutLeft">
5 <p v-if="show">过渡文字效果</div>
6 </transition>
7 </div>
8 <script>
9 var vm = new Vue({
10 el: '#app',
11 data: { show: true }
12 })
13 </script>注意：
动画效果都是在事件处理方法中控制的，在元素初始渲染时（页面刚打开时）并没有动画效果。可以通过给transition组件设置appear属性来给元素添加初始渲染的动画效果。
改：
1 <div id="app">
2 <button @click="show=!show">显示/隐藏</button>
3 <transition appear appear-active-class="animated swing"
4 enter-active-class="animated bounceIn"
5 leave-active-class="animated bounceOut">
6 <div v-if="show">过渡文字效果</div>
7 </transition>
8 </div>
9 <script>
10 var vm = new Vue({ el: '#app', data: { show: true } })
11 </script>上述代码中，appear表示开启此特性，appear-class表示初始class样式，appear-to-class表示过渡完成的class样式，appear-active-class会应用在整个过渡过程中。
@keyframes规则创建动画，就是将一套CSS样式逐步演变成另一套样式，在创建动画过程中，可以多次改变CSS样式，通过百分比或关键词from和to（等价于0%和100%）来规定动画的状态。
1 <style>
2 div.circular {
3 width: 100px;
4 height: 100px;
5 background: red;
6 border-radius: 50%;
7 margin-top: 20px;
8 text-align: center;
9 line-height: 100px;
10 color: #fff;
11 }
12 .bounce-enter-active {
13 animation: Ami .5s;
14 }
15 .bounce-leave-active {
16 animation: Ami .5s;
17 }
18 @keyframes Ami {
19 0% {transform: scale(0); background: red;}
20 20% {transform: scale(1); background: burlywood;}
21 50% {transform: scale(1.5); background: blueviolet;}
22 100% {transform: scale(1); background: burlywood;}
23 }
24 </style>
25 <script src="vue.js"></script>
26 </head>
27 <body>
28 <div id="app">
29 <button @click="show=!show">使用@keyframes创建CSS动画</button>
30 <transition name="bounce">
31 <div class="circular" v-if="show">圆形</div>
32 </transition>
33 </div>
34 <script>
35 var vm = new Vue({ el: '#app', data: { show: true } })
36 </script>
在<transition>标签中定义了一些动画钩子函数，用来实现动画。钩子函数可以结合CSS过渡（transitions）、动画（animations）使用，还可以单独使用。
1 <div id="app">
2 <transition
3 @before-enter="beforeEnter"
4 @enter="enter"
5 @after-enter="afterEnter"
6 @enter-cancelled="enterCancelled"
7 @before-leave="beforeLeave"
8 @leave="leave"
9 @after-leave="afterLeave"
10 @leave-cancelled="leaveCancelled"
11 v-bind:css="false">
12 </transition>
13 </div>
14 <script>
15 // 具体案例演示可以参考demo15.html
16 var vm = new Vue({
17 el: '#app',
18 methods: {
19 // beforeEnter入场钩子
20 // 动画入场之前，此时动画尚未开始，设置元素开始动画之前的起始样式
21 beforeEnter (el) {},
22 // enter用于设置动画开始之后的样式
23 enter (el, done) {
24 // ...
25 done()
26 },
27 // 在入场动画完成之后会调用
28 afterEnter (el) {},
29 enterCancelled (el) {},
30 // 出场钩子
31 beforeLeave (el) {},
32 leave (el, done) {
33 // ...
34 done()
35 },
36 afterLeave (el) {},
37 leaveCancelled (el) {},
38 }
39 })
40 </script>首先从官方网站获取velocity.min.js文件，保存到文件目录中。其次创建html文件，并在文件中引入velocity.min.js文件
beforeEnter和enter两个入场动画函数，leave是出场动画函数
1 <div id="app">
2 <button @click="show=!show">动画效果</button>
3 <transition @before-enter="beforeEnter" @enter="enter"
4 @leave="leave" v-bind:css="false">
5 <p v-if="show">文字动画效果</p>
6 </transition>
7 </div>
8 <script>
9 var vm = new Vue({
10 el: '#app',
11 data: {
12 show: false,
13 },
14 methods: {
15 beforeEnter (el) {
16 el.style.opacity = 0 // 透明度为0
17 el.style.transformOrigin = 'left' // 设置旋转元素的基点位置
18 el.style.color = 'red' // 颜色为红色
19 },
20 enter (el, done) { // duration动画执行时间
21 Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
22 Velocity(el, { fontSize: '1em' }, { complete: done })
23 },
24 leave (el, done) {
25 Velocity(el, { translateX: '15px', rotateZ: '50deg' },
26 {duration: 3000})
27 Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
28 Velocity(el, { rotateZ: '45deg', translateY: '30px', translateX: '30px', opacity: 0}, { complete: done } )
29 }
30 }
31 })
32 </script>
不相同标签名元素可以使用v-if和v-else来进行过渡
1 <div id="app">
2 <transition>
3 <ul v-if="items.length > 0">
4 <li>项目1</li>
5 <!-- 项目... -->
6 </ul>
7 <p v-else>抱歉，没有找到您查找的内容。</p>
8 </transition>
9 </div>
10 <script>
11 var vm = new Vue({ el: '#app', data: { items: [] } })
12 </script>
当有相同标签名的元素切换时，需要通过key特性设置唯一值来标记，从而让Vue区分它们，因为Vue为了效率只会替换相同标签中的内容。下面通过案例演示当有相同标签名button时，使用v-if和v-else设置key值来实现切换。
案例一：使用v-if和v-else设置key值来实现切换
1 <div id="app">
2 <button @click="isEditing = !isEditing">切换保存和编辑按钮</button>
3 <div>
4 <transition name="fade">
5 <button v-if="isEditing" key="save">保存</button>
6 <button v-else key="edit">编辑</button>
7 </transition>
8 </div>
9 </div>
10 <script>
11 var vm = new Vue({
12 el: '#app',
13 data: { isEditing: true }
14 })
15 </script>案例二：同一个元素的key属性设置不同的状态来代替v-if和v-else
1 <div id="app">
2 <button @click="isEditing = !isEditing">切换保存和编辑按钮</button>
3 <div>
4 <transition name="fade">
5 <button v-bind:key="isEditing">
6 {{isEditing ? '保存' : '编辑'}}
7 </button>
8 </transition>
9 </div>
10 </div>
11 <script>
12 var vm = new Vue({ el: '#app', data: { isEditing: true } })
13 </script>
案例三：使用多个v-if结合key属性来实现相同标签名的过渡效果
1 <style>
2 .row-enter { width: 0px; }
3 .row-enter-active { transition: width 3s; }
4 .row-enter-to{ width: 200px; }
5 .red { background: red; height: 20px; }
6 .blue { background: blue; height: 20px; }
7 .yellow { background: yellow; height: 20px; }
8 </style>
9 <script src="vue.js"></script>
10 </head>
11 <body>
12 <div id="app">
13 <button @click="showNum">切换</button>
14 <div>
15 <transition name="row">
16 <div class="red" v-if="show == 'A'" key="A"></div>
17 <div class="blue" v-if="show == 'B'" key="B"></div>
18 <div class="yellow" v-if="show == 'C'" key="C"></div>
19 </transition>
20 </div>
21 </div>
22 <script>
23 var vm = new Vue({
24 el: '#app',
25 data: { show: 'A' }, // 初始化show的值为A
26 methods: {
27 showNum () {
28 if (this.show == 'A') {
29 return this.show = 'B'
30 } else if (this.show == 'B') {
31 return this.show = 'C'
32 } else {
33 return this.show = 'A'
34 }
35 }
36 }
37 })
38 </script>
新旧两个元素参与过渡的时候，新元素的进入和旧元素的离开会同时触发，这是因为<transition>的默认行为进入和离开同时发生了。如果要求离开的元素完全消失后，进入的元素再显示出来（如开关的切换），可以使用transition提供的过渡模式mode，来解决当一个组件离开后，另一个组件进来时发生的位置的闪动或阻塞问题。
过渡模式的原理是，设置有序的过渡而不是同时发生过渡。在transition中加入mode属性，它的两个值如下所示。
使用out-in实现开关的切换过渡效果。
1 <style>
2 .fade-enter, .fade-leave-to { opacity: 0; }
3 .fade-enter-active, .fade-leave-active { transition: opacity .5s; }
4 </style>
5 <script src="vue.js"></script>
6 </head>
7 <body>
8 <div id="app">
9 <transition name="fade" mode="out-in">
10 <button :key="isOff" @click="isOff = !isOff">{{isOff ? 'Off' : 'On'}}</button>
11 </transition>
12 </div>
13 <script>
14 var vm = new Vue({ el: '#app', data: { isOff: false } })
15 </script>
多个组件之间的过渡，只需要使用动态组件即可，动态组件需要通过Vue中的<component>元素绑定is属性来实现多组件的过渡。接下来通过案例演示如何实现多个组件的过渡。
1 <style>
2 .fade-enter-active, .fade-leave-active {
3 transition: opacity .5s ease;
4 }
5 .fade-enter, .fade-leave-to {
6 opacity: 0;
7 }
8 </style>
9 <script src="vue.js"></script>
10 </head>
11 <body>
12 <!-- 定义登录组件 -->
13 <template id="example1">
14 <span>我是登录组件</span>
15 </template>
16 <!-- 定义注册组件 -->
17 <template id="example2">
18 <span>我是注册组件</span>
19 </template>
20 <div id="app">
21 <a href="javascript:;" @click="compontentName='example1'">登录</a>
22 <a href="javascript:;" @click="compontentName='example2'">注册</a>
23 <transition name="fade" mode="in-out">
24 <component :is="compontentName"></component>
25 </transition>
26 </div>
27 <script>
28 Vue.component('example1', {template: '#example1'})
29 Vue.component('example2', {template: '#example2'})
30 var vm = new Vue({
31 el: '#app',
32 data: { compontentName: '' }
33 })
34 </script>
列表过渡，需要使用v-for和transition-group组件来实现。
transition-group组件会以一个真实元素呈现，在页面中默认渲染成<span>标签，可以通过tag属性来修改，如<transition-group tag="div">渲染出来就是div标签。
注意：列表的每一项都需要进行过渡，列表在循环时要给每一个列表项添加唯一的key属性值，这样列表才会有过渡效果。在进行列表过渡时，过渡模式不可用，因为不再互相切换特有的元素。
1 <style>
2 /* 数字圆圈样式 */
3 .list-item {
4 display: inline-block;
5 margin-right: 10px;
6 background-color: red;
7 border-radius: 50%;
8 width: 25px;
9 height: 25px;
10 text-align: center;
11 line-height: 25px;
12 color: #fff;
13 }
14 /* 插入或移除元素的过程 */
15 .list-enter-active, .list-leave-active {
16 transition: all 1s;
17 }
18 /* 开始插入或移除结束的位置变化 */
19 .list-enter, .list-leave-to {
20 opacity: 0;
21 transform: translateY(30px);
22 }
23 </style>
24 <script src="vue.js"></script>
25 </head>
26 <body>
27 <div id="app">
28 <button @click="add">随机插入一个数字</button>
29 <button @click="remove">随机移除一个数字</button>
30 <transition-group name="list" tag="p">
31 <span v-for="item in items" :key="item" class="list-item">
32 {{item}}
33 </span>
34 </transition-group>
35 </div>
36 <script>
37 var vm = new Vue({
38 el: '#app',
39 data: {
40 items: [1, 2, 3, 4, 5], // 定义数字数组
41 nextNum: 6 // 下一个数字从6开始
42 },
43 methods: {
44 randomIndex () {
45 return Math.floor(Math.random() * this.items.length)
46 },
47 add () { // 单击“随机插入一个数字”时触发
48 this.items.splice(this.randomIndex(), 0, this.nextNum++)
49 },
50 remove () { // 单击“随机移除一个数字”时触发
51 this.items.splice(this.randomIndex(), 1)
52 }
53 }
54 })
55 </script>
为了实现列表平滑过渡，可以借助v-move特性。v-move 对于设置过渡的切换时机和过渡曲线非常有用。v-move特性会在元素改变定位的过程中应用，它同之前的类名一样，可以通过name属性来自定义前缀（例如name=“list”，则对应的类名就是list-move），当然也可以通过move-class属性手动设置自定义类名。
Vue使用了FLIP简单动画队列来实现排序过渡，所以即使没有插入或者移除元素，对于元素顺序的变化也支持过渡动画。FLIP动画能提高动画的流畅度，可以解决动画的卡顿、闪烁等不流畅的现象，它不仅可以实现单列过渡，也可以实现多维网格的过渡。FLIP代表First、Last、Invert、Play，有兴趣的读者可以自行研究学习。
1 <style>
2 .list-item {
3 display: inline-block;
4 margin-right: 10px;
5 background-color: red;
6 border-radius: 50%;
7 width: 25px;
8 height: 25px;
9 text-align: center;
10 line-height: 25px;
11 color: #fff;
12 }
13 /* 元素定位改变时动画 */
14 .list-move {
15 transition: transform 1s;
16 }
17 </style>
18 <script src="lodash.js"></script>
19 <script src="vue.js"></script>
20 </head>
21 <body>
22 <div id="app">
23 <button @click="shuffle">洗牌</button>
24 <transition-group name="list" tag="p">
25 <span v-for="item in items" :key="item" class="list-item">
26 {{ item }}
27 </span>
28 </transition-group>
29 </div>
30 <script>
31 var vm = new Vue({
32 el: '#app',
33 data () {
34 return { items: [1, 2, 3, 4, 5] }
35 },
36 methods: {
37 shuffle () {
38 // shuffle()函数把数组中的元素按随机顺序重新排列
39 this.items = _.shuffle(this.items)
40 }
41 }
42 })
43 </script>
在Vue中可以实现列表的交错过渡效果，它是通过data属性与JavaScript通信来实现的。接下来我们通过案例来讲解如何使用钩子函数结合Velocity.js库实现搜索功能，根据关键字来筛选出符合要求的列表数据，并添加过渡效果。
1 <div id="app">
2 <input placeholder="请输入要查找的内容" v-model="query">
3 <transition-group name="item" tag="ul" @before-enter="beforeEnter"
4 @enter="enter" @leave="leave" v-bind:css="false">
5 <li v-for="(item, index) in ComputedList" :key="item.msg"
6 :data-index="index">
7 {{ item.msg }}
8 </li>
9 </transition-group>
10 </div>
11 <script>
12 var vm = new Vue({
13 el: '#app',
14 data () {
15 return {
16 query: '', // v-model绑定的值
17 items: [
18 { msg: '张三' },
19 { msg: '李四' },
20 { msg: '张芳芳' },
21 { msg: '王琳琳' },
22 { msg: '冯圆' }
23 ]
24 }
25 },
26 computed: { // 计算属性
27 ComputedList () {
28 var vm = this.query // 获取到input输入框中的内容
29 var nameList = this.items // 数组
30 return nameList.filter(function (item) {
31 return item.msg.toLowerCase().indexOf(vm.toLowerCase()) !== -1
32 })
33 }
34 },
35 methods: {
36 beforeEnter (el) {
37 el.style.opacity = 0
38 el.style.height = 0
39 },
40 enter (el, done) {
41 var delay = el.dataset.index * 150
42 setTimeout(function () {
43 Velocity(el, { opacity: 1, height: '1.6em' }, { complete: done })
44 }, delay)
45 },
46 leave (el, done) {
47 var delay = el.dataset.index * 150
48 setTimeout(function () {
49 Velocity(el, { opacity: 0, height: 0 }, { complete: done })
50 }, delay)
51 }
52 }
53 })
54 </script>
在Vue中，过渡代码可以通过组件实现复用。若要创建一个可复用的过渡组件，需要将transition或者transition-group作为组件模板结构，然后在其内部通过插槽的方式编写列表结构即可。下面我们就来讲解两种实现过渡的封装的方式。
template方式
1 <div id="app">
2 <input placeholder="请输入要查找的内容" v-model="query">
3 <fade :query="query" :items="items">
4 <li v-for="(item, index) in ComputedList"
5 :key="item.msg" :data-index="index">
6 {{ item.msg }}
7 </li>
8 </fade>
9 </div>
10
11 <template id="temp">
12 <transition-group name="item" tag="ul" @before-enter="beforeEnter"
13 @enter="enter" @leave="leave" :css="false">
14 <slot></slot>
15 </transition-group>
16 </template>
17
18 <script>
19 Vue.component('fade', { // 定义组件名为fade
20 props: ['query', 'items'], // 组件实例的属性
21 template: '#temp',
22 methods: {
23 beforeEnter (el) {
24 el.style.opacity = 0
25 el.style.height = 0
26 },
27 enter (el, done) {
28 var delay = el.dataset.index * 150
29 setTimeout(function () {
30 Velocity(el, {opacity: 1, height: '1.6em'}, {complete: done})
31 }, delay)
32 },
33 leave (el, done) {
34 var delay = el.dataset.index * 150
35 setTimeout(function () {
36 Velocity(el, {opacity: 0, height: 0}, {complete: done})
37 }, delay)
38 }
39 }
40 })
41 var vm = new Vue({
42 el: '#app',
43 data: {
44 query: '',
45 items: [
46 { msg: '张三' },
47 { msg: '李四' },
48 { msg: '张芳芳' },
49 { msg: '王琳琳' },
50 { msg: '冯圆' }
51 ]
52 },
53 computed: { // 计算属性
54 ComputedList () {
55 var vm = this.query
56 var nameList = this.items
57 return nameList.filter(function (item) {
58 return item.msg.toLowerCase().indexOf(vm.toLowerCase()) !== -1
59 })
60 }
61 }
62 })
63 </script>函数式组件方式
1 <div id="app">
2 <input placeholder="请输入要查找的内容" v-model="query">
3 <fade :query="query" :items="items">
4 <li v-for="(item, index) in ComputedList" :key="item.msg"
5 :data-index="index">
6 {{ item.msg }}
7 </li>
8 </fade>
9 </div>
10
11 <script>
12 Vue.component('fade', {
13 functional: true, // 标记fade组件为函数式组件
14 props: ['query', 'items'],
15 render (h, ctx) {
16 var data = {
17 props: { // props组件
18 tag: 'ul', // 修改默认渲染的span标签为ul
19 css: false
20 },
21 on: {
22 beforeEnter (el) {
23 el.style.opacity = 0
24 el.style.height = 0
25 },
26 enter (el, done) {
27 var delay = el.dataset.index * 150
28 setTimeout(function () {
29 Velocity(el, { opacity: 1, height: '1.6em' }, { complete: done })
30 }, delay)
31 },
32 leave (el, done) {
33 var delay = el.dataset.index * 150
34 setTimeout(function () {
35 Velocity(el, { opacity: 0, height: 0 }, { complete: done })
36 }, delay)
37 }
38 }
39 }
40 // data是传递给组件的数据对象，作为createElement()的第2个参数传入组件
41 // ctx.children是VNode子节点的数组
42 return h('transition-group', data,ctx.children)
43 }
44 })
45 var vm = new Vue({
46 el: '#app',
47 data: {
48 query: '',
49 items: [
50 { msg: '张三' },
51 { msg: '李四' },
52 { msg: '张芳芳' },
53 { msg: '王琳琳' },
54 { msg: '冯圆' }
55 ]
56 },
57 computed: {
58 ComputedList () {
59 var vm = this.query
60 var nameList = this.items
61 return nameList.filter(function (item) {
62 return item.msg.toLowerCase().indexOf(vm.toLowerCase()) !== -1
63 })
64 }
65 }
66 })
67 </script>注意：
在Vue 2.3.0版本及以下，如果一个函数式组件想要接收props，则必须有props选项；但是在2.3.0以上版本中，可以省略props选项，所有组件上的特性会被自动解析为props。
通过以上的学习，各位笔友应该能够使用Vue完成一些简单的页面过渡效果和动画效果的展示。
码字不易，认为楼主写的还不错，对你有帮助的话，请给个三连（关注、点赞、收藏）另外有问题可评论区留言讨论。
后期会完善Vue进阶语法的相关知识，有帮助的话，敬请关注楼主 持续更新中ing 。。。（不定时发文）
转载时请注明出处链接
百度云盘案列全套源码获取链接（地址如下）：
链接：https://pan.baidu.com/s/1_OhACAdsee2AiBOW7JrPbw?pwd=1234
提取码：1234
1.vue官方文档：Vue.js (vuejs.org)
2.传智播客-黑马程序员（教材）：http://stu.ityxb.com/
1. 十大排序算法（Java实现）（作者力推）：https://www.cnblogs.com/zbcxy506/p/zbcxy506_3arithmetic-01.html
2. Vue开发环境的部署：https://www.cnblogs.com/zbcxy506/p/zbcxy506_1vue-01.html
3. Vue基础入门一：https://www.cnblogs.com/zbcxy506/p/zbcxy506_1vue-02.html
4. Vue基础入门二：https://www.cnblogs.com/zbcxy506/p/note_1vue-03.html
5. Vue基础知识思维导图：https://www.cnblogs.com/zbcxy506/p/note_1vue-04.html
一、引擎主循环UE版本：4.27一、引擎主循环的位置：Launch.cpp:GuardedMain函数二、、GuardedMain函数执行逻辑：1、EnginePreInit：加载大多数模块int32ErrorLevel=EnginePreInit(CmdLine);PreInit模块加载顺序：模块加载过程：（1）注册模块中定义的UObject，同时为每个类构造一个类默认对象（CDO，记录类的默认状态，作为模板用于子类实例创建）（2）调用模块的StartUpModule方法2、FEngineLoop::Init()1、检查Engine的配置文件找出使用了哪一个GameEngine类（UGame
Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u
本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
在他们的网站上找不到任何内容。我主要只是想看看哪个值得一试(当然是RIA)。谢谢 最佳答案 SproutCoredemos 关于ruby-是否有SproutCore或Cappuccino的现场演示/示例应用程序，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/1419788/
动画/*INITIALIZEANANIMATION 初始化一个动画*-----------------------*/lv_anim_ta;lv_anim_init(&a);/*MANDATORYSETTINGS 必选设置*------------------*//*Setthe"animator"function 设置“动画”功能*/lv_anim_set_exec_cb(&a,(lv_anim_exec_xcb_t)lv_obj_set_x);/*Setthe"animator"function*/lv_anim_set_var(&a,obj);/*Lengthoftheanim
1.回顾.TransportServicepublicclassTransportServiceextendsAbstractLifecycleComponentTransportService：方法：1publicfinalTextendsTransportResponse>voidsendRequest(finalTransport.Connectionconnection,finalStringaction,finalTransportRequestrequest,finalTransportRequestOptionsoptions,TransportResponseHandlerT>
参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍 介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。 内容有： ①：Hub模型的方法介绍 ②：服务器端代码介绍 ③：前端vue3安装并调用后端方法 ④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke() 去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on
ruby调试器不会在我在与执行开始时不同的文件中设置的断点处停止。例如，考虑这两个文件，foo.rb:#foo.rbclassFoodefbarputs"baz"endend和main.rb:#main.rbrequire'./foo'Foo.new.bar我使用ruby-rdebug.\main.rb开始调试。现在，当我尝试使用b./foo.rb:4在另一个文件的特定行上设置断点时，我收到消息Setbreakpoint1atfoo.rb:4，但是当我cont时，程序执行到最后，调试器永远不会停止。但是，如果我在main.rb中的一行上打断，例如b./main.rb:3，或者一个方法，
今天我在我的Rails控制台中尝试了一些东西，这发生了，2.0.0p247:009>Date.today-29.days=>Fri,07Feb20142.0.0p247:010>Date.today-29.days=>Thu,09Jan2014我很困惑。我可以看到我缺少一些基本的东西。但这让我印象深刻!谁能解释为什么会这样？ 最佳答案 实际发生的是这样的:Date.today(-29.days)#=>Fri,07Feb2014today有一个名为start的可选参数，默认为Date::ITALY。Anoptionalargument