Vue 学习总结笔记 (八)
<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="{"spm":"1001.2101.3001.6332"}" data-report-click="{"spm":"1001.2101.3001.6332"}">
<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库
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">=></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">=></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">=></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">=></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">=></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都可以操作事件方面的东西。
--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>{<!-- -->{itemPro.title}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>删除<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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">></span></span>编辑<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></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
