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-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. Vue的 绑定class样式
1.1 Vue 的 三种绑定class的样式方式
Vue绑定class样式效果,就使用v-bind:class 或 :class来操作:
效果一,使用字符串方式绑定:
使用Math.random 和 Math.floor来随机变化class样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/vue.js"></script>
<style type="text/css">
.basic{
width: 300px;
height: 100px;
border: 1px solid black;
}
.normal{
background-color: cornflowerblue;
border: 2px solid red;
}
.happy{
background-color: red;
border: 2px solid yellowgreen;
}
.sad{
background-color: gray;
border: 2px solid sandybrown;
}
</style>
</head>
<body>
<div id="root">
<!--
绑定class样式,字符串写法,适用于:样式的类名不确定,需要动态指定。
正常我们这里写两个class,它会默认读取第一个class,不会读取第二个class的。
我们使用Vue绑定的话,使用的就是v-bind来绑定,就不用担心这个问题了!
--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>basic<span class="token punctuation">"</span></span> <span class="token attr-name">:class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mood<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>changeMood<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{<!-- -->{name}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
name<span class="token operator">:</span><span class="token string">'张三'</span><span class="token punctuation">,</span>
mood<span class="token operator">:</span><span class="token string">'normal'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token function">changeMood</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'happy'</span><span class="token punctuation">,</span><span class="token string">'sad'</span><span class="token punctuation">,</span><span class="token string">'normal'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">//Math.random()生成的随机数,随机生成[0,1)的数字,会生成0,但是不会生成1。</span>
<span class="token keyword">let</span> i <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">3</span><span class="token punctuation">;</span>
<span class="token comment">//Math.floor()是向下取整。</span>
<span class="token keyword">let</span> down <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>mood <span class="token operator">=</span> arr<span class="token punctuation">[</span>down<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></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</html>
- 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
效果二,绑定class样式,数组写法 ,使用数组来绑定多个class样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/vue.js"></script>
<style type="text/css">
.basic{
width: 300px;
height: 100px;
border: 1px solid black;
}
.style1{
background-color: cornflowerblue;
}
.style2{
border: 2px solid yellowgreen;
}
.style3{
font-size: 40px;
}
</style>
</head>
<body>
<div id="root">
<!--
绑定class样式,数组写法,适用于:要绑定的样式个数不确定,名字也不确定。
-->
<div class="basic" :class="arr">{{name}}</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
name:'张三',
arr:['style1','style2','style3']
}
})
</script>
</body>
</html>
- 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
这种方式很好,我们可以直接通过操作arr数组,就可以改变样式的相关操作了。
效果三,绑定class样式,对象写法,适用于:要绑定的样式个数确定,名字也确定,但要动态决定用不用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/vue.js"></script>
<style type="text/css">
.basic{
width: 300px;
height: 100px;
border: 1px solid black;
}
.style1{
background-color: cornflowerblue;
}
.style2{
border: 2px solid yellowgreen;
}
.style3{
font-size: 40px;
}
</style>
</head>
<body>
<div id="root">
<!--效果三,绑定class样式,对象写法,适用于:要绑定的样式个数确定,名字也确定,但要动态决定用不用。-->
<div class="basic" :class="obj">{{name}}</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
name:'张三',
obj:{
style1:false,
style2:false,
style3:false,
}
}
})
</script>
</body>
</html>
- 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
数组写法和对象写法的style样式绑定是最常用的!
1.2 Vue 的class绑定样式 改变数值
像下面这种方式,想要通过data中的参数动态修改值的话,如果按照之前的写法就写成这种样子:
:style="font-size: sizeNumpx;"
但是,这种不对!Vue无法识别!因此可以改成下面的方式:
:style="{fontSize: sizeNum+‘px’}" 。
这种方式太麻烦,了解就好。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/vue.js"></script>
<style type="text/css">
.basic{
width: 300px;
height: 100px;
border: 1px solid black;
}
.style1{
background-color: cornflowerblue;
}
.style2{
border: 2px solid yellowgreen;
}
.style3{
font-size: 40px;
}
</style>
</head>
<body>
<div id="root">
<!--
如果按照之前的写法就写成这种样子:
:style="font-size: sizeNumpx"
但是,这种不对!Vue无法识别!因此可以改成下面的方式:
:style="{fontSize: sizeNum+'px'}" 。
-->
<div class="basic" :style="{fontSize: sizeNum+'px'}">{{name}}</div>
</div>
<script type="text/javascript">
<span class="token comment">//上面的样子就像下面的对象样式一样!</span>
<span class="token comment">// let test = {fontSize: sizeNum+'px'};</span>
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
name<span class="token operator">:</span><span class="token string">'张三'</span><span class="token punctuation">,</span>
sizeNum<span class="token operator">:</span><span class="token number">40</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</html>
- 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
通过样式对象写法来确定值的效果:
这里有个规律,就是两个单词组成的就小驼峰法连接起来就可以了。
例如:background-color 就可以写为 backgroundColor。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/vue.js"></script>
<style type="text/css">
.basic{
width: 300px;
height: 100px;
border: 1px solid black;
}
.style1{
background-color: cornflowerblue;
}
.style2{
border: 2px solid yellowgreen;
}
.style3{
font-size: 40px;
}
</style>
</head>
<body>
<div id="root">
<!--
能够修改数值的vue绑定对象的写法:
这里有个规律,就是两个单词组成的就小驼峰法连接起来就可以了。
例如:background-color 就可以写为 backgroundColor
--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>basic<span class="token punctuation">"</span></span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[styleObj , styleObj2]<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{<!-- -->{name}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
name<span class="token operator">:</span><span class="token string">'张三'</span><span class="token punctuation">,</span>
styleObj<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
fontSize<span class="token operator">:</span><span class="token string">'40px'</span><span class="token punctuation">,</span>
backgroundColor<span class="token operator">:</span><span class="token string">'red'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
styleObj2<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
color<span class="token operator">:</span><span class="token string">"green"</span><span class="token punctuation">,</span>
border<span class="token operator">:</span><span class="token string">"2px solid yellow"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</html>
- 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
上面的方式我们还可以简写一下! 就直接通过数组,数组中存储样式对象的内容,就可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/vue.js"></script>
<style type="text/css">
.basic {
width: 300px;
height: 100px;
border: 1px solid black;
}
<span class="token selector">.style1</span> <span class="token punctuation">{<!-- --></span>
<span class="token property">background-color</span><span class="token punctuation">:</span> cornflowerblue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.style2</span> <span class="token punctuation">{<!-- --></span>
<span class="token property">border</span><span class="token punctuation">:</span> 2px solid yellowgreen<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.style3</span> <span class="token punctuation">{<!-- --></span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
</head>
<body>
<div id="root">
<!--
能够修改数值的vue绑定对象的写法:
这里有个规律,就是两个单词组成的就小驼峰法连接起来就可以了。
例如:background-color 就可以写为 backgroundColor
--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>basic<span class="token punctuation">"</span></span> <span class="token attr-name">:style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>arrObj<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{<!-- -->{name}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
</div>
<script type="text/javascript">
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span> <span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
name<span class="token operator">:</span> <span class="token string">'张三'</span><span class="token punctuation">,</span>
arrObj<span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{<!-- --></span>
fontSize<span class="token operator">:</span> <span class="token string">'40px'</span><span class="token punctuation">,</span>
backgroundColor<span class="token operator">:</span> <span class="token string">'red'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{<!-- --></span>
color<span class="token operator">:</span> <span class="token string">"green"</span><span class="token punctuation">,</span>
border<span class="token operator">:</span> <span class="token string">"2px solid yellow"</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>
</script>
</body>
</html>
- 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
2. 条件渲染
v-if , v-else-if , v-else的用法和后台if语句一样的效果。有条件判别,true显示标签,false移除标签内容。
注意:这三个指令必须连续使用,不然报错!
v-if的指令语句一般和template标签使用!
v-show的用法,如果是true显示当前标签内容,false不显示(display:none), 。
v-if和v-show的区别?
- v-if是通过删节点来达到效果。而v-show是通过定义display来显示或隐藏的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<!--
对于多个标签元素内容需要判断,我们可以使用div来操作,但是添加一个div影响结构,不推荐!
-->
<div v-if="n === 1">
<h2>你好</h2>
<h2>hello, world</h2>
<h2>早上好</h2>
</div>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span>
<span class="token comment"><!--
最好的情况就是使用template标签来实现,它就不会多余的添加什么标签!
--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>n === 1<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>h2</span><span class="token punctuation">></span></span>你好<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>hello, world<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>早上好<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
n:1
}
})
</script>
</body>
</html>
- 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
3. Vue的 列表渲染
记住!Vue的 v-for指令和:key的作用效果!
其中的遍历数组和遍历对象是最常用的!
遍历数组:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<ul>
<!--
v-for指令,格式就是像下面的p in persons。
v-for指令遍历数组:
:key的作用:相当于每一个节点的标识。因此key的值,在同一节点内,不能重复!
key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。
下方:key可以使用persons中的p.id来作为唯一标识,还可以使用参数index来定义。
--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(p,index) in persons<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
{<!-- -->{p.name}} - {<!-- -->{p.age}} - 索引:{<!-- -->{index}}
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
data:{
persons:[
{id:"001",name:"张三",age:18},
{id:"002",name:"李四",age:100},
{id:"003",name:"王五",age:1},
]
}
})
</script>
</body>
</html>
- 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
遍历对象:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<ul>
<!-- 使用v-for遍历对象: -->
<li v-for="(value,key) in car">
{{key}} - {{value}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
data:{
car:{
name:"奥迪",
price:"70w",
color:"黑色"
}
}
})
</script>
</body>
</html>
- 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
v-for也是可以遍历字符串的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<ul>
<!-- 使用v-for遍历对象: -->
<li v-for="(s,index) in str" :key="index">
{{index}} - {{s}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
data:{
str:"hello"
}
})
</script>
</body>
</html>
- 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

还有一种就是遍历指定次数:


4. key的作用和原理
需要我们注意的是,在我们定义key时,使用index和id的这种作法有什么区别,什么使用用index?什么使用用id?
注意事项:
如果没有定义key属性,默认就是index作为key的值,作为唯一标识。
4.1 index作为key 的效果和问题
一定理解好虚拟DOM和真实DOM,以及中间的虚拟DOM对比算法。

上图对比虚拟DOM时,对比了三部分,第一个key,第二个内容(张三–18),第三个input标签。大体上就这样一步步对比,在这key作为唯一标识,内容不同就会覆盖。注意这里我们添加的时真实DOM中的input,在虚拟dom中input还是一样的,因此直接会使用真实DOM中的内容。
这里使用index来操作的话,就会出现这种问题:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h2>人员列表(遍历数组)</h2>
<button v-on:click.once="add">添加个人</button>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}}-{{p.age}} ---索引值:{{index}}
<input type="text">
</li>
</ul>
</div>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
persons<span class="token operator">:</span><span class="token punctuation">[</span>
<span class="token punctuation">{<!-- --></span>id<span class="token operator">:</span><span class="token string">"001"</span><span class="token punctuation">,</span>name<span class="token operator">:</span><span class="token string">"张三"</span><span class="token punctuation">,</span>age<span class="token operator">:</span><span class="token number">18</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{<!-- --></span>id<span class="token operator">:</span><span class="token string">"002"</span><span class="token punctuation">,</span>name<span class="token operator">:</span><span class="token string">"李四"</span><span class="token punctuation">,</span>age<span class="token operator">:</span><span class="token number">19</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{<!-- --></span>id<span class="token operator">:</span><span class="token string">"003"</span><span class="token punctuation">,</span>name<span class="token operator">:</span><span class="token string">"王五"</span><span class="token punctuation">,</span>age<span class="token operator">:</span><span class="token number">20</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 operator">:</span> <span class="token punctuation">{<!-- --></span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token keyword">const</span> p <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>id<span class="token operator">:</span><span class="token string">'004'</span><span class="token punctuation">,</span>name<span class="token operator">:</span><span class="token string">'老李'</span><span class="token punctuation">,</span>age<span class="token operator">:</span><span class="token string">"30"</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>persons<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//unshift(xxx),将xxx插入 arrayObject 的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间</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">$mount</span><span class="token punctuation">(</span><span class="token string">'#root'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</body>
</html>
- 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

4.2 id作为key 的效果(最佳)
id对于单个元素而言,是一直绑定在一起的!

使用id来实现,就可以避免上面index所出现的问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h2>人员列表(遍历数组)</h2>
<button v-on:click.once="add">添加个人</button>
<ul>
<li v-for="(p,index) in persons" :key="p.id">
{{p.name}}-{{p.age}} ---索引值:{{index}}
<input type="text">
</li>
</ul>
</div>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
persons<span class="token operator">:</span><span class="token punctuation">[</span>
<span class="token punctuation">{<!-- --></span>id<span class="token operator">:</span><span class="token string">"001"</span><span class="token punctuation">,</span>name<span class="token operator">:</span><span class="token string">"张三"</span><span class="token punctuation">,</span>age<span class="token operator">:</span><span class="token number">18</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{<!-- --></span>id<span class="token operator">:</span><span class="token string">"002"</span><span class="token punctuation">,</span>name<span class="token operator">:</span><span class="token string">"李四"</span><span class="token punctuation">,</span>age<span class="token operator">:</span><span class="token number">19</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{<!-- --></span>id<span class="token operator">:</span><span class="token string">"003"</span><span class="token punctuation">,</span>name<span class="token operator">:</span><span class="token string">"王五"</span><span class="token punctuation">,</span>age<span class="token operator">:</span><span class="token number">20</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 operator">:</span> <span class="token punctuation">{<!-- --></span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token keyword">const</span> p <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>id<span class="token operator">:</span><span class="token string">'004'</span><span class="token punctuation">,</span>name<span class="token operator">:</span><span class="token string">'老李'</span><span class="token punctuation">,</span>age<span class="token operator">:</span><span class="token string">"30"</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>persons<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//unshift(xxx),将xxx插入 arrayObject 的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间</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">$mount</span><span class="token punctuation">(</span><span class="token string">'#root'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</body>
</html>
- 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
3.3 面试题:react , vue中的key有什么作用?

5. 列表过滤
5.1 #region 和 #endregion
#region 和 #endregion是来折叠代码使用的。
5.2 使用watch 和 vue中的filter方法来 过滤列表
注意:filter方法是返回了一个新的数组,并不是修改了原来的数组!
在watch中,创建对应的属性方法,在属性方法的handler函数中创建filter方法,filter方法的使用,在filter添加函数,返回符合条件的返回值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord"/>
<ul>
<li v-for="(p,index) in filterPersons" :key="p.id">
{{p.name}} - {{p.sex}} - {{p.age}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
data:{
keyWord:"",
persons:[
{id:'001',name:'马冬梅',age:18,sex:"女"},
{id:'002',name:'周冬雨',age:19,sex:"女"},
{id:'003',name:'周杰伦',age:20,sex:"男"},
{id:'004',name:'温兆伦',age:20,sex:"男"},
],
filterPersons:[
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
watch<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
keyWord<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
immediate<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token function">handler</span><span class="token punctuation">(</span><span class="token parameter">newVal</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token keyword">this</span><span class="token punctuation">.</span>filterPersons <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>persons<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">p</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{<!-- --></span>
<span class="token comment">//a.indexOf(b)可以得到b在a的那个索引位置,如果没有返回-1.</span>
<span class="token comment">//indexOf()可以作为判别a是否包含b的字符串。</span>
<span class="token keyword">return</span> p<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>newVal<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</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 punctuation">}</span><span class="token punctuation">)</span>
</script>
</body>
</html>
- 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
5.3 使用 computed和 vue中的filter方法 来 过滤列表(推荐,方便简单)
定义好computed属性,进而使用filter方法来过滤列表:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord"/>
<ul>
<li v-for="(p,index) in filterPersons" :key="p.id">
{{p.name}} - {{p.sex}} - {{p.age}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
data:{
keyWord:"",
persons:[
{id:'001',name:'马冬梅',age:18,sex:"女"},
{id:'002',name:'周冬雨',age:19,sex:"女"},
{id:'003',name:'周杰伦',age:20,sex:"男"},
{id:'004',name:'温兆伦',age:20,sex:"男"},
]
},
computed:{
filterPersons(){
//这里的p,就是this.persons中数组一个个的元素。
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) != -1;
})
}
}
})
</script>
</body>
</html>
- 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
6. 列表排序
通过使用 js中的sort函数 来对列表进行排序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord"/>
<button @click="sortType = 2">年龄升序</button>
<button @click="sortType = 1">年龄降序</button>
<button @click="sortType = 0">原顺序</button>
<ul>
<li v-for="(p,index) in filterPersons" :key="p.id">
{{p.name}} - {{p.sex}} - {{p.age}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
data:{
keyWord:"",
sortType:0,
persons:[
{id:'001',name:'马冬梅',age:18,sex:"女"},
{id:'002',name:'周冬雨',age:19,sex:"女"},
{id:'003',name:'周杰伦',age:20,sex:"男"},
{id:'004',name:'温兆伦',age:20,sex:"男"},
]
},
computed:{
filterPersons(){
<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>persons<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">p</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{<!-- --></span>
<span class="token keyword">return</span> p<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>keyWord<span class="token punctuation">)</span> <span class="token operator">!=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">//sort函数进行排序的时候,会受到两个数据项obj1,obj2 ,我们可以通过 '-' 来对obj1和obj2进行一个排序。注意这里的排序是给arr数组排序。</span>
<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>sortType<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
arr<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">obj1<span class="token punctuation">,</span>obj2</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{<!-- --></span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>sortType <span class="token operator">==</span> <span class="token number">1</span> <span class="token operator">?</span> obj2<span class="token punctuation">.</span>age<span class="token operator">-</span>obj1<span class="token punctuation">.</span>age <span class="token operator">:</span> obj1<span class="token punctuation">.</span>age<span class="token operator">-</span>obj2<span class="token punctuation">.</span>age<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> arr<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>
</script>
</body>
</html>
- 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
7. Vue 监测数据的原理
7.1 Vue 如何监测 对象 中数据的改变 原理
Vue开发者工具在显示上面有一定的小问题,就是我们修改了data中的值,有时开发者工具没有变化或者更新。
_data中响应页面的reactive的get和set方法:

自己写的Object.defineProperty()属性中,不能调用自身的自己的属性!会死循环。

写一个简易版的Vue底层监测原理:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> data <span class="token operator">=</span><span class="token punctuation">{<!-- --></span>
name<span class="token operator">:</span><span class="token string">"北京大学"</span><span class="token punctuation">,</span>
address<span class="token operator">:</span><span class="token string">"北京"</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> obs <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Observer</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">Observer</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token keyword">const</span> keys <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//console.log(keys);</span>
<span class="token comment">//forEach()作用就是给keys中的每一个属性k进行一个函数操作。</span>
keys<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">k</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{<!-- --></span>
Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span>k<span class="token punctuation">,</span><span class="token punctuation">{<!-- --></span>
<span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token keyword">return</span> obj<span class="token punctuation">[</span>k<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">set</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token comment">//Vue框架要比我们写的完善的多,这里是展示一下,实际上vue在这要进行很多操作,就像下面输出的内容一样。</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span>k<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">被修改了,需要解析模板,生成虚拟DOM,对比不同 ... 然后,生成页面内容。</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
obj<span class="token punctuation">[</span>k<span class="token punctuation">]</span> <span class="token operator">=</span> val<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></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</html>
- 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

这里我们简易写的监测原理,实际上对应vue中的reactiveGetter和reactiveSetter。
7.2 Vue.set()方法 和 vm.$set()方法 使用
7.2.1 Vue 的两个注意事项
在Vue中的差值语法中,undefined是不会在页面上面显示的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 这里的obj.c没有c!那么它这里就是undefined,也就是不显示。 -->
<p>内容:{{undefined}} , {{name}} , {{obj.c}}</p>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
name:undefined,
obj:{
a:'1',
b:'2'
}
}
})
</script>
</body>
</html>
- 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
Vue的实例对象的中内容,是从 _data中数据代理出来的!

7.2.2 Vue 如何实现后添加数据
对于data中的数据,我们设计好了,如果还想添加新的数据,就需要一个Vue api来操作,就是Vue.set(target , key , value)。
通过是用Vue.set(target , key , value);来添加对应的属性,这个的target要指定对象的!

通过是用vm.$set(target , key , value);来添加对应的属性,这个的target也要指定对象的!

代码展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>root<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 设计一个添加性别的按钮button --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>addSex<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 comment"><!-- 使用v-if判断student.sex是否存在,有返回true显示,没有返回false不显示。 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>student.sex<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>学生性别:{<!-- -->{student.sex}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>学生年龄:真实:{<!-- -->{student.age.rAge}} , 对外:{<!-- -->{student.age.sAge}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>朋友们<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</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 attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(f,index) in student.friends<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
{<!-- -->{f.name}} -- {<!-- -->{f.age}}
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
student<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
name<span class="token operator">:</span><span class="token string">'tom'</span><span class="token punctuation">,</span>
age<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
rAge<span class="token operator">:</span><span class="token number">40</span><span class="token punctuation">,</span>
sAge<span class="token operator">:</span><span class="token number">29</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
friends<span class="token operator">:</span><span class="token punctuation">[</span>
<span class="token punctuation">{<!-- --></span>name<span class="token operator">:</span><span class="token string">'jerry'</span><span class="token punctuation">,</span>age<span class="token operator">:</span><span class="token number">35</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{<!-- --></span>name<span class="token operator">:</span><span class="token string">'tony'</span><span class="token punctuation">,</span>age<span class="token operator">:</span><span class="token number">36</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>
methods<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token comment">//给sutdent添加一个sex属性。</span>
<span class="token function">addSex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token comment">// 两个可以使用!</span>
<span class="token comment">//Vue.set(this.student,"sex","男");</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$set</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>student<span class="token punctuation">,</span><span class="token string">'sex'</span><span class="token punctuation">,</span><span class="token string">'女'</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></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</html>
- 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
注意:这两种添加属性方式,不能给data添加属性。只能给data中对象添加属性!


7.3 Vue 如何监测 数组 中数据的改变 原理
7.3.1 对比对象 和 数组 的监视
对比一下,对象和数组:


也就是说数组没有对应的reactiveGetter和reactiveSetter方法,也就是修改数组中的内容,Vue是没有办法动态监测的!
7.3.2 js中操作数组的几个api方法 和 Vue中操作数组的几个vue方法
js中操作数组的几个api方法:
Array.prototype.push():
push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。
Array.prototype.pop():
pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。
Array.prototype.shift():
shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
Array.prototype.unshift():
unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。
更多的方法,可以通过控制台查看:


但是,在Vue中也有这些同名的方法。注意不要与上面搞混了!

Vue中的push等等方法就添加了一系列什么对比虚拟DOM,重新解析页面模板等操作,因为,这些操作,所以我们通过方法操作数组才会更新模板页面。
7.3.3 使用方法来给数组 添加数据
- 使用索引修改,虽然 _data 中的值改变了,并不会改变页面,因为数组内部的元素是没有reactive的getter和setter方法!
- 可以通过方法的方式来触发页面响应。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>root<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>h2</span><span class="token punctuation">></span></span>学生姓名:{<!-- -->{student.name}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>学生年龄:真实:{<!-- -->{student.age.rAge}} , 对外:{<!-- -->{student.age.sAge}}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</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">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>updateData1<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">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>updateData2<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>ul</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 attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(h,index) in student.hobby<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
{<!-- -->{h}}
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token operator">:</span><span class="token string">"#root"</span><span class="token punctuation">,</span>
data<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
student<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
name<span class="token operator">:</span><span class="token string">'tom'</span><span class="token punctuation">,</span>
age<span class="token operator">:</span><span class="token punctuation">{<!-- --></span>
rAge<span class="token operator">:</span><span class="token number">40</span><span class="token punctuation">,</span>
sAge<span class="token operator">:</span><span class="token number">29</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
hobby<span class="token operator">:</span><span class="token punctuation">[</span>
<span class="token string">'打篮球'</span><span class="token punctuation">,</span>
<span class="token string">'玩游戏'</span><span class="token punctuation">,</span>
<span class="token string">'睡觉'</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 operator">:</span><span class="token punctuation">{<!-- --></span>
<span class="token function">updateData1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token comment">//使用索引修改,虽然 _data 中的值改变了,并不会改变页面,因为数组内部的元素是没有reactive的getter和setter方法!</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>student<span class="token punctuation">.</span>hobby<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'踢足球'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">updateData2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token comment">//可以通过方法的方式来触发页面响应。</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>student<span class="token punctuation">.</span>hobby<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'吃东西'</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></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
</html>
- 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

7.4 总结

数据劫持就是将原来data内的数据,加工成了vm._data这样的数据的过程叫做数据劫持,因为中间给它添加了很多Vue方面的功能。
