Vue 学习总结笔记 (八)

IT_Holmes

于 2022-03-10 15:31:45 发布

2448

分类专栏： Vue 全家桶文章标签： vue.js javascript js

本文链接：https://blog.csdn.net/IT_Holmes/article/details/123383188

            <div class="operating">
                <a class="href-article-edit slide-toggle">版权</a>
            </div>
        </div>
    </div>
</div>

    <div id="blogColumnPayAdvert">
        <div class="column-group">
            <div class="column-group-item column-group0 column-group-item-one">
                <div class="item-l">
                    <a class="item-target" href="https://blog.csdn.net/it_holmes/category_11899711.html" target="_blank" title="Vue 全家桶" data-report-view="{&quot;spm&quot;:&quot;1001.2101.3001.6332&quot;}" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.6332&quot;}">
                        <img class="item-target" src="https://img-blog.csdnimg.cn/b3f6cc316bf34861ba4e5d84c6f8f0ff.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224" alt="">
                        <span class="title item-target">
                            <span>
                            <span class="tit">Vue 全家桶</span>
                                <span class="dec">专栏收录该内容</span>
                            </span>
                        </span>
                    </a>
                </div>
                <div class="item-m">
                    <span>14 篇文章</span>
                    <span>5 订阅</span>
                </div>
                <div class="item-r">
                        <a class="item-target article-column-bt articleColumnFreeBt" data-id="11899711">订阅专栏</a>
                </div>
            </div>
        </div>
    </div>
<article class="baidu_pl">
    <div id="article_content" class="article_content clearfix">
    <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
    <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-6e43165c0a.css">
            <div id="content_views" class="markdown_views prism-tomorrow-night">
                <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                    <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
                </svg>
                <p></p>

文章目录

1. 消息订阅与发布
- 1.1 消息订阅与发布的流程
- 1.2 pubsub-js库
2. $nextTick用法
3. todoList 案例添加一个编译按钮
4. Vue的过度与动画

1. 消息订阅与发布

1.1 消息订阅与发布的流程

消息订阅与发布，两个过程：

第一步：订阅消息：消息名。
第二步：发布消息：消息内容。

在这里插入图片描述

1.2 pubsub-js库

pubsub-js的名字就对应了publish(发布)，subscribe(订阅)两个英文单词。

想要实现消息订阅与发布就必须导入外库，实现消息订阅发布的库有很多，这里就是用pubsub-js库。

npm i pubsub-js命令安装
在这里插入图片描述

pubsub-js库的使用：

app.vue文件：

<template>
	<div class="app">
		<h1>{{msg}}</h1>
		<School/>
		<Student/>
	</div>
</template>
<script>

import School from "./components/School.vue"

import Student from "./components/Student.vue"

export default{

name:'App',

components:{Student,School},

data(){

return {

msg:"你好啊！",

studentName:""

}

},

}

</script>
<style>

.app{

background-color: gray;

padding: 5px;

}

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

School.vue文件：

<template>
	<div class="school">
		<h2>学校姓名: {{name}}</h2>
		<h2>学校地址: {{address}}</h2>
	</div>
</template>
<script>

import pubsub from 'pubsub-js'

export default{

name:"School",

data(){

return {

name:"清华大学",

address:"北京"

}

},

mounted(){

//使用pubsub订阅一个消息

this.pubId = pubsub.subscribe('hello',function(messageName,data){

console.log("有人发布了hello消息，hello消息的回调执行了。")

console.log('订阅的名字：',messageName)

console.log('拿到value数值：',data)

//这里的this是undefined，想要拿到vc组件对象，就可以使用箭头函数来操作。

console.log(this)

})

},

beforeDestroy(){

//组件销毁，取消订阅。

//这里需要拿到订阅的变量名。我们可以通过this来拿到。

pubsub.unsubscribe(this.pubId)

}

}

</script>
<style>

.school{

background-color: skyblue;

}

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

Student.vue文件：

<template>
	<div class="student">
		<h2>学生姓名: {{name}}</h2>
		<h2>学生性别: {{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>
<script>

import pubsub from 'pubsub-js'

export default{

name:"Student",

data(){

return {

name:"张三",

sex:"男"

}

},

methods:{

sendStudentName(){

pubsub.publish('hello',666)

}

}

}

</script>
<style>

.student{

background-color: pink;

padding: 5px;

margin-top: 30px;

}

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

像上面的subscribe的messageName可以用_来替代：
在这里插入图片描述

总结：
在这里插入图片描述

2. $nextTick用法

可以使用Vue的nextTick()来操作。

$nextTick函数所指定的函数会在模板dom元素刷新完成后进行回调。

所以一般$nextTick的回调函数放置的是dom元素之后要执行的命令属性，例如：focus获取焦点。

在这里插入图片描述

3. todoList 案例添加一个编译按钮

需要修改的就只有App.vue和MyItem.vue的内容：

App.vue文件：

<template>
	<div id="root">
		<div class="todo-container">
			<div class="todo-wrap">
				<Header1 @receive="receive"></Header1>
				<List1 :todoList="todoList" ></List1>
				<Footer1 :todoList="todoList" @checkAllTodoObj="checkAllTodoObj" @clearAllTodoObj="clearAllTodoObj"></Footer1>
			</div>
		</div>
	</div>
</template>
<script>

import pubsub from 'pubsub-js'

import Header1 from "./components/MyHeader.vue"

import Footer1 from "./components/MyFooter.vue"

import List1 from "./components/MyList.vue"
<span class="token keyword">export</span> <span class="token keyword">default</span><span class="token punctuation">{<!-- --></span>
	name<span class="token punctuation">:</span><span class="token string">'App'</span><span class="token punctuation">,</span>
	components<span class="token punctuation">:</span><span class="token punctuation">{<!-- --></span>
		Header1<span class="token punctuation">,</span>
		List1<span class="token punctuation">,</span>
		Footer1<span class="token punctuation">,</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
		<span class="token keyword">return</span> <span class="token punctuation">{<!-- --></span>
			<span class="token comment">//获取当前页面已经存储的localStorage数据。</span>
			<span class="token comment">//如果localStorage.getItem('todoList')没有数据返回就返回了null，并且JSON解析出来也是null，这样就报错了！</span>
			<span class="token comment">//所以我们要加一个||或，前面赋值报错就只用后面的[]空数组。</span>
			todoList<span class="token punctuation">:</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'todoList'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	methods<span class="token punctuation">:</span><span class="token punctuation">{<!-- --></span>
		<span class="token comment">//从MyHeader中获取数据，添加todoObj对象</span>
		<span class="token function">receive</span><span class="token punctuation">(</span>todoObj<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
			<span class="token comment">//这样将值传给添加到todoList末尾中。</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>todoList<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>todoObj<span class="token punctuation">)</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token comment">//勾选或者取消勾选一个todo</span>
		<span class="token function">checkTodoObj</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>todoList<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>todoObj<span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{<!-- --></span>
				<span class="token keyword">if</span><span class="token punctuation">(</span>todoObj<span class="token punctuation">.</span>id <span class="token operator">==</span> id<span class="token punctuation">)</span>
					todoObj<span class="token punctuation">.</span>done <span class="token operator">=</span> <span class="token operator">!</span>todoObj<span class="token punctuation">.</span>done
			<span class="token punctuation">}</span><span class="token punctuation">)</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token comment">//删除一个TodoObj</span>
		<span class="token function">deleteTodoObj</span><span class="token punctuation">(</span>_<span class="token punctuation">,</span>id<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
			<span class="token comment">//注意：过滤出来的是一个新数组，并不是改变了data中的todoList。</span>
			<span class="token comment">//因此，要重新赋值一下。</span>
			<span class="token comment">// console.log(id)</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>todoList <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>todoList<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span>todoObj<span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{<!-- --></span>
				<span class="token keyword">return</span> todoObj<span class="token punctuation">.</span>id <span class="token operator">!==</span> id
			<span class="token punctuation">}</span><span class="token punctuation">)</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token comment">//全选or取消全选</span>
		<span class="token function">checkAllTodoObj</span><span class="token punctuation">(</span>done<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>todoList<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>todo<span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{<!-- --></span>
				todo<span class="token punctuation">.</span>done <span class="token operator">=</span> done
			<span class="token punctuation">}</span><span class="token punctuation">)</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token comment">//清除所有已经完成的todoObj</span>
		<span class="token function">clearAllTodoObj</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>todoList <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>todoList<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span>todo<span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{<!-- --></span>
				<span class="token keyword">return</span> <span class="token operator">!</span>todo<span class="token punctuation">.</span>done
			<span class="token punctuation">}</span><span class="token punctuation">)</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token function">updateTodoObj</span><span class="token punctuation">(</span>id<span class="token punctuation">,</span>title<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>todoList<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>todoObj<span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{<!-- --></span>
				<span class="token keyword">if</span><span class="token punctuation">(</span>todoObj<span class="token punctuation">.</span>id <span class="token operator">==</span> id<span class="token punctuation">)</span>
					todoObj<span class="token punctuation">.</span>title <span class="token operator">=</span> title
			<span class="token punctuation">}</span><span class="token punctuation">)</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		
	<span class="token punctuation">}</span>
	<span class="token punctuation">,</span>
	<span class="token comment">//实现本地存储</span>
	watch<span class="token punctuation">:</span><span class="token punctuation">{<!-- --></span>
		todoList<span class="token punctuation">:</span><span class="token punctuation">{<!-- --></span>
			<span class="token comment">//开启深度监视，确保对象中的内容被修改了也能重新定义localStorage中的todoList。</span>
			deep<span class="token punctuation">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
			<span class="token function">handler</span><span class="token punctuation">(</span>newValue<span class="token punctuation">,</span>oldValue<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
				localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'todoList'</span><span class="token punctuation">,</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>newValue<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
		<span class="token keyword">this</span><span class="token punctuation">.</span>$bus<span class="token punctuation">.</span><span class="token function">$on</span><span class="token punctuation">(</span><span class="token string">'checkTodoObj'</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">.</span>checkTodoObj<span class="token punctuation">)</span>
		<span class="token keyword">this</span><span class="token punctuation">.</span>pubId <span class="token operator">=</span> pubsub<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token string">'deleteTodoObj'</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">.</span>deleteTodoObj<span class="token punctuation">)</span>
		<span class="token keyword">this</span><span class="token punctuation">.</span>$bus<span class="token punctuation">.</span><span class="token function">$on</span><span class="token punctuation">(</span><span class="token string">'updateTodeObj'</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">.</span>updateTodoObj<span class="token punctuation">)</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token function">beforeDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
		<span class="token keyword">this</span><span class="token punctuation">.</span>$bus<span class="token punctuation">.</span><span class="token function">$off</span><span class="token punctuation">(</span><span class="token string">'checkTodoObj'</span><span class="token punctuation">)</span>
		<span class="token keyword">this</span><span class="token punctuation">.</span>$bus<span class="token punctuation">.</span><span class="token function">$off</span><span class="token punctuation">(</span><span class="token string">'updateTodeObj'</span><span class="token punctuation">)</span>
		pubsub<span class="token punctuation">.</span><span class="token function">unsubscribe</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>pubId<span class="token punctuation">)</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</script>
<style>

body{

background-color: #fff;

}

.btn{

display: inline-block;

padding: 4px 12px;

margin-bottom: 0;

font-size: 14px;

line-height: 20px;

text-align: center;

vertical-align: middle;

cursor: pointer;

box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(0,0,0,0.05);

border-radius: 4px;

}

.btn-edit{

color: #fff;

background-color: skyblue;

border: 1px solid wheat;

margin-right: 10px;

}
<span class="token selector">.btn-danger</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
	<span class="token property">background-color</span><span class="token punctuation">:</span> #da4f49<span class="token punctuation">;</span>
	<span class="token property">border</span><span class="token punctuation">:</span> 1px solid #bd362f<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.btn-danger:hover</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
	<span class="token property">background-color</span><span class="token punctuation">:</span> #BD362F<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.btn:focus</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">outline</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.todo-container</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">width</span><span class="token punctuation">:</span>600px<span class="token punctuation">;</span>
	<span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.todo-container .todo-wrap</span> <span class="token punctuation">{<!-- --></span>
	<span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
	<span class="token property">border</span><span class="token punctuation">:</span> 1px solid #ddd<span class="token punctuation">;</span>
	<span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

MyItem.vue文件：

<template>
	<li>
		<label>
			<!-- 
				checked勾选该checkbox。
				想要下面的props元素控制checkbox，就可以使用:来使其成为js表达式。这样我们就可以通过js表达式
				来操作了。这里的itemPro我定义为了{id:'001',title:'吃饭',done:true}的结构。
			@click和@change都可以操作事件方面的东西。
		--&gt;</span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">:checked</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>itemPro.done<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>handleCheck(itemPro.id)<span class="token punctuation">"</span></span><span class="token punctuation">/&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>!itemPro.isEdit<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{<!-- -->{itemPro.title}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> 
			<span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>itemPro.isEdit<span class="token punctuation">"</span></span> 
			<span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> 
			<span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>itemPro.title<span class="token punctuation">"</span></span> 
			<span class="token attr-name">@blur</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>handleBlur(itemPro,$event)<span class="token punctuation">"</span></span>
			<span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inputTitle<span class="token punctuation">"</span></span><span class="token punctuation">/&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>btn btn-danger<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>handleDelete(itemPro.id)<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>删除<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>!itemPro.isEdit<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>btn btn-edit<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>handlerEdit(itemPro)<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>编辑<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>

</template>
<script>

import pubsub from 'pubsub-js'

export default {

name:"MyItem",

//声明接受todo对象

props:['itemPro'],

mounted(){

// console.log(this.itemPro);

},

methods:{

//勾选or取消

handleCheck(id){

//通知App组件将对应的itemPro对象的done值取反

this.\(bus<span class="token punctuation">.</span><span class="token function">\)emit('checkTodoObj',id)

},

//删除

handleDelete(id){

//根据用户

if(confirm('确定删除吗？')){

// this.\(bus.\)emit("deleteTodoObj",id)

pubsub.publish('deleteTodoObj',id)

}

},

handlerEdit(itemPro){

//先判断itemPro中是否有\(set函数</span>
			<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>itemPro<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span><span class="token string">'isEdit'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
				<span class="token comment">//使用\)set函数来给itemPro对象添加isEdit属性，这样就会触发vue的响应式获取get和set方法。

this.$set(itemPro,'isEdit',true)

// console.log("没有isEdit，创建一个")

}else{

itemPro.isEdit = true

// console.log("有isEdit,直接设置为true")

}
		<span class="token comment">//单纯的走focus是不可以的，因为页面会重新刷新响应的！</span>
		<span class="token comment">// this.$refs.inputTitle.focus() //因此使用focus()的函数在vue中是不可以的。</span>
		
		<span class="token comment">//可以使用Vue的nextTick()来操作</span>
		<span class="token comment">//$nextTick函数所指定的函数会在模板dom元素刷新完成后进行回调。</span>
		<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$nextTick</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>inputTitle<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
		
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token comment">//失去焦点回调</span>
	<span class="token function">handleBlur</span><span class="token punctuation">(</span>itemPro<span class="token punctuation">,</span>e<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
		itemPro<span class="token punctuation">.</span>isEdit <span class="token operator">=</span> <span class="token boolean">false</span>
		<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
			<span class="token keyword">return</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'输入不能为空！'</span><span class="token punctuation">)</span>
		<span class="token keyword">this</span><span class="token punctuation">.</span>$bus<span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'updateTodeObj'</span><span class="token punctuation">,</span>itemPro<span class="token punctuation">.</span>id<span class="token punctuation">,</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
		console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

}

</script>
<style scoped>

li{

list-style: none;

height: 36px;

line-height: 36px;

padding: 0 5px;

border-bottom: 1px solid #ddd;

}

li label {

float: left;

cursor: pointer;

}

li label li input {

vertical-align: middle;

margin-right: 6px;

position: relative;

top: -1px;

}

li button{

float: right;

display: none;

margin-top: 3px;

}

li:before{

content: initial;

}

li:last-child{

border-bottom: none;

}

li:hover{

background-color: #ddd;

}

li:hover button{

display: block;

}

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

4. Vue的过度与动画

4.1 CSS3的@keyframes 和 Vue的transition标签

style样式用到了css3中的@keyframes关键帧。

vue中，需要进行过度和动画效果的内容。必须放到transition标签中。

这里的transition标签值专门用来给vue使用的，负责过度和动画效果。

test.vue文件：

<template>
	<div>
		<button @click="isShow=!isShow">显示/隐藏</button>
		<!-- 
			使用:appear="true"属性来让它页面加载时就可以加载动画。
				这里可以简写为appear就行。
		-->
		<transition name="hello" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>
<script>

export default {

name:'Test',

data(){

return{

isShow:true

}

},

}

</script>
<style scoped="scoped">
<span class="token selector">h1</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">background-color</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 
	vue规定的名字：
		进入的时候实现v-enter-active的动画效果。(就是显示到页面的时候执行该动画效果)
		离开的时候实现v-leave-active的动画效果。(不显示到页面的时候执行该动画效果)
	注意：
		如果给transition标签赋予了name属性值为hello，那么对应样式的v也要变成hello。
		hello-enter-active
		hello-leave-active
 */</span>
<span class="token selector">.hello-enter-active</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">animation</span><span class="token punctuation">:</span> itholmes 1s linear<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.hello-leave-active</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">animation</span><span class="token punctuation">:</span> itholmes 1s linear reverse<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 
	@keyframes:
		关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或waypoints）
		的样式来控制CSS动画序列中的中间步骤。
*/</span>
<span class="token atrule"><span class="token rule">@keyframes</span> itholmes</span><span class="token punctuation">{<!-- --></span>
	<span class="token selector">from</span><span class="token punctuation">{<!-- --></span>
		<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-100%<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
	<span class="token selector">to</span><span class="token punctuation">{<!-- --></span>
		<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

4.2 Vue中的 .hello-enter-active ， .hello-leave-active ， .hello-enter ， .hello-leave-to ， .hello-enter-to ， .hello-leave的用法

<template>
	<div>
		<button @click="isShow=!isShow">显示/隐藏</button>
		<transition name="hello" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>
<script>

export default {

name:'Test',

data(){

return{

isShow:true

}

},

}

</script>
<style scoped="scoped">
<span class="token selector">h1</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">background-color</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span>
	<span class="token comment">/* 
		这里的属性transition就是过度。
		一般我们写在.hello-enter-active , .hello-leave-active中。
	 */</span>
	<span class="token comment">/* transition: 1s linear; */</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 
进入的起点 
.hello-enter{
	transform:translateX(-100%);
}
进入的终点 
.hello-enter-to{
	transform: translateX(0);
}
*/</span>
<span class="token comment">/* 
离开的起点 
.hello-leave{
	transform:translateX(0);
}
离开的终点 
.hello-leave-to{
	transform: translateX(-100%);
}*/</span>

<span class="token comment">/* 
	.hello-enter-active: 是整个进入的过程。
	.hello-leave-active：是整个离开的过程。
*/</span>
<span class="token selector">.hello-enter-active , .hello-leave-active</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">transition</span><span class="token punctuation">:</span> 1s linear<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 上面就可以整合为 */</span>
<span class="token comment">/* 进入的起点，离开的终点 */</span>
<span class="token selector">.hello-enter,.hello-leave-to</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">translateX</span><span class="token punctuation">(</span>-100%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* 进入的终点，离开的起点*/</span>
<span class="token selector">.hello-enter-to,.hello-leave</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

4.3 多个元素过度(transition-group标签)

在这里插入图片描述

transition-group标签：里面可以存放多个元素标签。

注意：每一个元素标签必须要设置key属性和属性值。

test.vue案例：

<template>
	<div>
		<button @click="isShow=!isShow">显示/隐藏</button>
		<transition-group name="hello" appear>
			<h1 v-show="isShow" key="1">你好啊！</h1>
			<h1 v-show="!isShow" key="2">hello,world！</h1>
		</transition-group>
	</div>
</template>
<script>

export default {

name:'Test',

data(){

return{

isShow:true

}

},

}

</script>
<style scoped="scoped">
<span class="token selector">h1</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">background-color</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span>
	<span class="token comment">/* 
		这里的属性transition就是过度。
		一般我们写在.hello-enter-active , .hello-leave-active中。
	 */</span>
	<span class="token comment">/* transition: 1s linear; */</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 
进入的起点 
.hello-enter{
	transform:translateX(-100%);
}
进入的终点 
.hello-enter-to{
	transform: translateX(0);
}
*/</span>
<span class="token comment">/* 
离开的起点 
.hello-leave{
	transform:translateX(0);
}
离开的终点 
.hello-leave-to{
	transform: translateX(-100%);
}*/</span>

<span class="token comment">/* 
	.hello-enter-active: 是整个进入的过程。
	.hello-leave-active：是整个离开的过程。
*/</span>
<span class="token selector">.hello-enter-active , .hello-leave-active</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">transition</span><span class="token punctuation">:</span> 1s linear<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* 上面就可以整合为 */</span>
<span class="token comment">/* 进入的起点，离开的终点 */</span>
<span class="token selector">.hello-enter,.hello-leave-to</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">translateX</span><span class="token punctuation">(</span>-100%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* 进入的终点，离开的起点*/</span>
<span class="token selector">.hello-enter-to,.hello-leave</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

4.4 Vue 集成第三方动画

第三方npm.js网站

搜索animate.css这个就是常用的第三方动画。

在这里插入图片描述

安装后，导入css包。直接使用就可以，它很多的动画都在HostPage上面右侧栏目都有！
在这里插入图片描述

test3.vue使用效果：

<template>
	<div>
		<button @click="isShow=!isShow">显示/隐藏</button>
		<!-- 
			name="animate__animated animate__bounce"是固定的！
			enter-active-class是调用animate.css中的动画，是进入时。
			leave-active-class也是调用animate.css中的动画，是离开时。
		-->
		<transition-group 
			appear
			name="animate__animated animate__bounce" 
			enter-active-class="animate__swing"
			leave-active-class="animate__backOutDown"
		>
			<h1 v-show="isShow" key="1">你好啊！</h1>
			<h1 v-show="!isShow" key="2">hello,world！</h1>
		</transition-group>
	</div>
</template>
<script>

//这是一个样式，我们不需要form什么什么东西。

import 'animate.css'

export default {

name:'Test',

data(){

return{

isShow:true

}

},

}

</script>
<style scoped="scoped">

h1{

background-color: orange;

}

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

4.5 过度和动画总结

在CSS中的过度和动画解释：

过度就是在那个时间段内，做什么事情。
动画就是一个效果，我们经常是在这个过度时间内，进行这个动画效果。二者是相互依存的关系。

在这里插入图片描述

在Vue中的过度与动画操作：

过度：通过transition或者transition-group标签。它有两种方式：一种是通过name(没有声明，在style中声明v)在style中声明；一种是直接在特定的属性上面指定。
动画：我们可以自定义动画，提供给过度使用；但是一般有第三方库animate.css，我们可以通过第三方库来操作这些东西，很方便。

4.6 修改todoList的MyItem组件，添加过度和动画效果

<template>
	<transition name="todo" appear>
		<li>
			<label>
				<input type="checkbox" :checked="itemPro.done" @click="handleCheck(itemPro.id)"/>
				<span v-show="!itemPro.isEdit">{{itemPro.title}}</span>
				<input 
					v-show="itemPro.isEdit" 
					type="text" 
					:value="itemPro.title" 
					@blur="handleBlur(itemPro,$event)"
					ref="inputTitle"/>
			</label>
			<button class="btn btn-danger" @click="handleDelete(itemPro.id)">删除</button>
			<button v-show="!itemPro.isEdit" class="btn btn-edit" @click="handlerEdit(itemPro)">编辑</button>
		</li>
	</transition>
</template>
<script>

import 'animate.css'

import pubsub from 'pubsub-js'

export default {

name:"MyItem",

props:['itemPro'],

methods:{

handleCheck(id){

this.\(bus<span class="token punctuation">.</span><span class="token function">\)emit('checkTodoObj',id)

},

handleDelete(id){

if(confirm('确定删除吗？')){

// this.\(bus.\)emit("deleteTodoObj",id)

pubsub.publish('deleteTodoObj',id)

}

},

handlerEdit(itemPro){

if(!itemPro.hasOwnProperty('isEdit')){

this.\(<span class="token keyword">set</span><span class="token punctuation">(</span>itemPro<span class="token punctuation">,</span><span class="token string">'isEdit'</span><span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span>
			<span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{<!-- --></span>
				itemPro<span class="token punctuation">.</span>isEdit <span class="token operator">=</span> <span class="token boolean">true</span>
			<span class="token punctuation">}</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">\)nextTick(function(){

this.$refs.inputTitle.focus()

})
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token function">handleBlur</span><span class="token punctuation">(</span>itemPro<span class="token punctuation">,</span>e<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
		itemPro<span class="token punctuation">.</span>isEdit <span class="token operator">=</span> <span class="token boolean">false</span>
		<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
			<span class="token keyword">return</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'输入不能为空！'</span><span class="token punctuation">)</span>
		<span class="token keyword">this</span><span class="token punctuation">.</span>$bus<span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'updateTodeObj'</span><span class="token punctuation">,</span>itemPro<span class="token punctuation">.</span>id<span class="token punctuation">,</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
		console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

}

</script>
<style scoped>
<span class="token atrule"><span class="token rule">@keyframes</span> itholmes</span><span class="token punctuation">{<!-- --></span>
	<span class="token selector">from</span><span class="token punctuation">{<!-- --></span>
		<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
	<span class="token selector">to</span><span class="token punctuation">{<!-- --></span>
		<span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>0px<span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token selector">.todo-enter-active</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">animation</span><span class="token punctuation">:</span> itholmes 0.5s linear<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.todo-leave-active</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">animation</span><span class="token punctuation">:</span> itholmes 0.5s linear reverse<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">li</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
	<span class="token property">height</span><span class="token punctuation">:</span> 36px<span class="token punctuation">;</span>
	<span class="token property">line-height</span><span class="token punctuation">:</span> 36px<span class="token punctuation">;</span>
	<span class="token property">padding</span><span class="token punctuation">:</span> 0 5px<span class="token punctuation">;</span>
	<span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px solid #ddd<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li label</span> <span class="token punctuation">{<!-- --></span>
	<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
	<span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li label li input</span> <span class="token punctuation">{<!-- --></span>
	<span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span>
	<span class="token property">margin-right</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span>
	<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
	<span class="token property">top</span><span class="token punctuation">:</span> -1px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li button</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
	<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
	<span class="token property">margin-top</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li:before</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">content</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li:last-child</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">border-bottom</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li:hover</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">background-color</span><span class="token punctuation">:</span> #ddd<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">li:hover button</span><span class="token punctuation">{<!-- --></span>
	<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

文章知识点与官方知识档案匹配，可进一步学习相关知识

Vue入门技能树vue3基础（JS）Vue3现状29505 人正在系统学习中

JZTXT

Vue学习总计笔记（八）【转载】

Vue 学习总结笔记 (八)

文章目录

1. 消息订阅与发布

1.1 消息订阅与发布的流程

1.2 pubsub-js库

2. $nextTick用法

3. todoList 案例添加一个编译按钮

4. Vue的过度与动画

4.1 CSS3的@keyframes 和 Vue的transition标签

4.2 Vue中的 .hello-enter-active ， .hello-leave-active ， .hello-enter ， .hello-leave-to ， .hello-enter-to ， .hello-leave的用法

4.3 多个元素过度(transition-group标签)

4.4 Vue 集成第三方动画

4.5 过度和动画总结

4.6 修改todoList的MyItem组件，添加过度和动画效果

JZTXT

Vue学习总计笔记（八）【转载】

Vue 学习总结笔记 (八)

文章目录

1. 消息订阅与发布

1.1 消息订阅与发布的流程

1.2 pubsub-js库

2. $nextTick用法

3. todoList 案例添加一个编译按钮

4. Vue的 过度与动画

4.1 CSS3的@keyframes 和 Vue的transition标签

4.2 Vue中的 .hello-enter-active ， .hello-leave-active ， .hello-enter ， .hello-leave-to ， .hello-enter-to ， .hello-leave的用法

4.3 多个元素过度(transition-group标签)

4.4 Vue 集成第三方动画

4.5 过度和动画总结

4.6 修改todoList的MyItem组件，添加过度和动画效果

4. Vue的过度与动画