Vue 学习总结笔记 (三)

IT_Holmes

于 2022-01-22 10:19:36 发布

2386

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

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

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

文章目录

1. Vue的绑定class样式
- 1.1 Vue 的三种绑定class的样式方式
- 1.2 Vue 的class绑定样式改变数值
2. 条件渲染
3. Vue的列表渲染
4. key的作用和原理
5. 列表过滤
6. 列表排序
7. Vue 监测数据的原理

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来绑定，就不用担心这个问题了！
		--&gt;</span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>{<!-- -->{name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</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">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</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">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</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
		--&gt;</span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>{<!-- -->{name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</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">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</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">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

</head>

<body>

<div id="root">

<!--
    能够修改数值的vue绑定对象的写法：

    这里有个规律，就是两个单词组成的就小驼峰法连接起来就可以了。
    例如：background-color 就可以写为 backgroundColor
--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>{<!-- -->{name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</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">&lt;</span>hr</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!--
   最好的情况就是使用template标签来实现，它就不会多余的添加什么标签！
--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>你好<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>hello, world<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>早上好<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</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来定义。
  --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>
    {<!-- -->{p.name}} - {<!-- -->{p.age}} - 索引：{<!-- -->{index}}
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</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">&lt;</span>script</span><span class="token punctuation">&gt;</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">&lt;/</span>script</span><span class="token punctuation">&gt;</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">&lt;</span>script</span><span class="token punctuation">&gt;</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">&lt;/</span>script</span><span class="token punctuation">&gt;</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">=&gt;</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">=&gt;</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">=&gt;</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">&lt;</span>script</span><span class="token punctuation">&gt;</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">=&gt;</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">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
	
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</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">&lt;</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">&gt;</span></span>
		
		<span class="token comment">&lt;!-- 设计一个添加性别的按钮button --&gt;</span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>添加性别<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
		<span class="token comment">&lt;!-- 使用v-if判断student.sex是否存在，有返回true显示，没有返回false不显示。 --&gt;</span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</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">&gt;</span></span>学生性别：{<!-- -->{student.sex}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
		
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>学生年龄：真实：{<!-- -->{student.age.rAge}} , 对外：{<!-- -->{student.age.sAge}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>朋友们<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token 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">&gt;</span></span>
				{<!-- -->{f.name}} -- {<!-- -->{f.age}}
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
		
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</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">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
	
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</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">&lt;</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">&gt;</span></span>
		
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>学生姓名:{<!-- -->{student.name}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>学生年龄：真实：{<!-- -->{student.age.rAge}} , 对外：{<!-- -->{student.age.sAge}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">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">&gt;</span></span>修改索引按钮<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">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">&gt;</span></span>通过方法<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token 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">&gt;</span></span>
				{<!-- -->{h}}
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
		
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</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">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
	
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</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方面的功能。

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

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

JZTXT

Vue 学习总结笔记 (三)【转载】

Vue 学习总结笔记 (三)

文章目录

1. Vue的绑定class样式

1.1 Vue 的三种绑定class的样式方式

1.2 Vue 的class绑定样式改变数值

2. 条件渲染

3. Vue的列表渲染

4. key的作用和原理

4.1 index作为key 的效果和问题

4.2 id作为key 的效果(最佳)

3.3 面试题：react ， vue中的key有什么作用？

5. 列表过滤

5.1 #region 和 #endregion

5.2 使用watch 和 vue中的filter方法来过滤列表

5.3 使用 computed和 vue中的filter方法来过滤列表(推荐，方便简单)

6. 列表排序

7. Vue 监测数据的原理

7.1 Vue 如何监测对象中数据的改变原理

7.2 Vue.set()方法和 vm.$set()方法使用

7.2.1 Vue 的两个注意事项

7.2.2 Vue 如何实现后添加数据

7.3 Vue 如何监测数组中数据的改变原理

7.3.1 对比对象和数组的监视

7.3.2 js中操作数组的几个api方法和 Vue中操作数组的几个vue方法

7.3.3 使用方法来给数组添加数据

7.4 总结

JZTXT

Vue 学习总结笔记 (三)【转载】

Vue 学习总结笔记 (三)

文章目录

1. Vue的 绑定class样式

1.1 Vue 的 三种绑定class的样式方式

1.2 Vue 的class绑定样式 改变数值

2. 条件渲染

3. Vue的 列表渲染

4. key的作用和原理

4.1 index作为key 的效果和问题

4.2 id作为key 的效果(最佳)

3.3 面试题：react ， vue中的key有什么作用？

5. 列表过滤

5.1 #region 和 #endregion

5.2 使用watch 和 vue中的filter方法来 过滤列表

5.3 使用 computed和 vue中的filter方法 来 过滤列表(推荐，方便简单)

6. 列表排序

7. Vue 监测数据的原理

7.1 Vue 如何监测 对象 中数据的改变 原理

7.2 Vue.set()方法 和 vm.$set()方法 使用

7.2.1 Vue 的两个注意事项

7.2.2 Vue 如何实现后添加数据

7.3 Vue 如何监测 数组 中数据的改变 原理

7.3.1 对比对象 和 数组 的监视

7.3.2 js中操作数组的几个api方法 和 Vue中操作数组的几个vue方法

7.3.3 使用方法来给数组 添加数据

7.4 总结

1. Vue的绑定class样式

1.1 Vue 的三种绑定class的样式方式

1.2 Vue 的class绑定样式改变数值

3. Vue的列表渲染

5.2 使用watch 和 vue中的filter方法来过滤列表

5.3 使用 computed和 vue中的filter方法来过滤列表(推荐，方便简单)

7.1 Vue 如何监测对象中数据的改变原理

7.2 Vue.set()方法和 vm.$set()方法使用

7.3 Vue 如何监测数组中数据的改变原理

7.3.1 对比对象和数组的监视

7.3.2 js中操作数组的几个api方法和 Vue中操作数组的几个vue方法

7.3.3 使用方法来给数组添加数据