Vue 学习总结笔记 (三)

最新推荐文章于 2022-10-29 22:49:02 发布
最新推荐文章于 2022-10-29 22:49:02 发布
阅读量2.7k 收藏 38
点赞数 7
分类专栏： JavaScript 文章标签： vue.js javascript 前端 vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IT_Holmes/article/details/122609460
版权

文章目录

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来绑定，就不用担心这个问题了！
			-->
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false;
			new Vue({
				el:"#root",
				data:{
					name:'张三',
					mood:'normal'
				},
				methods:{
					changeMood(){
						const arr = ['happy','sad','normal'];
						//Math.random()生成的随机数，随机生成[0,1)的数字，会生成0，但是不会生成1。
						let i = Math.random()*3;
						//Math.floor()是向下取整。
						let down = Math.floor(i);
						this.mood = arr[down];
					}
				}
			})
		</script>
	</body>
</html>

效果二，绑定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>

这种方式很好，我们可以直接通过操作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>

数组写法和对象写法的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">

			//上面的样子就像下面的对象样式一样！
			// let test = {fontSize: sizeNum+'px'};

			Vue.config.productionTip = false;
			new Vue({
				el:"#root",
				data:{
					name:'张三',
					sizeNum:40
				}
			})
		</script>
	</body>
</html>

通过样式对象写法来确定值的效果：

这里有个规律，就是两个单词组成的就小驼峰法连接起来就可以了。
例如：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
			-->
			<div class="basic" :style="[styleObj , styleObj2]">{{name}}</div>
		</div>
		<script type="text/javascript">

			Vue.config.productionTip = false;
			new Vue({
				el:"#root",
				data:{
					name:'张三',
					styleObj:{
						fontSize:'40px',
						backgroundColor:'red'
					},
					styleObj2:{
						color:"green",
						border:"2px solid yellow"
					}
				}
			})
		</script>
	</body>
</html>

上面的方式我们还可以简写一下！ 就直接通过数组，数组中存储样式对象的内容，就可。

<!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
    -->
    <div class="basic" :style="arrObj">{{name}}</div>
</div>
<script type="text/javascript">

    Vue.config.productionTip = false;
    new Vue({
        el: "#root",
        data: {
            name: '张三',
            arrObj: [
                {
                    fontSize: '40px',
                    backgroundColor: 'red'
                },
				{
                    color: "green",
                    border: "2px solid yellow"
                }
            ]
        }
    })
</script>
</body>
</html>

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>

    <hr>
    <!--
       最好的情况就是使用template标签来实现，它就不会多余的添加什么标签！
    -->
    <template v-if="n === 1">
      <h2>你好</h2>
      <h2>hello, world</h2>
      <h2>早上好</h2>
    </template>

  </div>
  <script>
    Vue.config.productionTip = false;
    new Vue({
      el:"#root",
      data:{
        n:1
      }
    })
  </script>
</body>
</html>

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来定义。
	  -->
      <li v-for="(p,index) in persons" :key="index">
        {{p.name}} - {{p.age}} - 索引：{{index}}
      </li>
    </ul>
  </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>

遍历对象：

<!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>

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>

在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述

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>

    <script>
        Vue.config.productionTip = false;
        new Vue({
            data:{
                persons:[
                    {id:"001",name:"张三",age:18},
                    {id:"002",name:"李四",age:19},
                    {id:"003",name:"王五",age:20}
                ]
            },
            methods: {
                add(){
                        const p = {id:'004',name:'老李',age:"30"};
                        this.persons.unshift(p); //unshift(xxx),将xxx插入 arrayObject 的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间
                    }
            },
        }).$mount('#root');
    </script>
</body>
</html>

在这里插入图片描述

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>

    <script>
        Vue.config.productionTip = false;
        new Vue({
            data:{
                persons:[
                    {id:"001",name:"张三",age:18},
                    {id:"002",name:"李四",age:19},
                    {id:"003",name:"王五",age:20}
                ]
            },
            methods: {
                add(){
                        const p = {id:'004',name:'老李',age:"30"};
                        this.persons.unshift(p); //unshift(xxx),将xxx插入 arrayObject 的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间
                    }
            },
        }).$mount('#root');
    </script>
</body>
</html>

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:[
			
		]
      },
	  watch:{
		  keyWord:{
			  immediate:true,
			  handler(newVal){
				  this.filterPersons = this.persons.filter((p)=>{
					  //a.indexOf(b)可以得到b在a的那个索引位置，如果没有返回-1.
					  //indexOf()可以作为判别a是否包含b的字符串。
					  return p.name.indexOf(newVal) !== -1;
				  })
			  }
		  }
	  }
    })
  </script>
  
</body>
</html>

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>

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(){
			  
			  const arr = this.persons.filter((p)=>{
			  				  return p.name.indexOf(this.keyWord) != -1;
			  })
			  
			  //sort函数进行排序的时候，会受到两个数据项obj1,obj2 ,我们可以通过 '-' 来对obj1和obj2进行一个排序。注意这里的排序是给arr数组排序。
			  if(this.sortType){
				  arr.sort((obj1,obj2)=>{
					  return this.sortType == 1 ? obj2.age-obj1.age : obj1.age-obj2.age;
				  })
			  }
			  return arr;
			  
		  }
	  }
    })
  </script>
  
</body>
</html>

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>

		<script>
			
			Vue.config.productionTip = false;
			
			let data ={
				name:"北京大学",
				address:"北京"
			}
			
			const obs = new Observer(data);
			
			function Observer(obj){
				
				const keys = Object.keys(obj);
				//console.log(keys);
				
				//forEach()作用就是给keys中的每一个属性k进行一个函数操作。
				keys.forEach((k)=>{
					Object.defineProperty(this,k,{
						get(){
							return obj[k];
						},
						set(val){
							//Vue框架要比我们写的完善的多，这里是展示一下，实际上vue在这要进行很多操作，就像下面输出的内容一样。
							console.log(`${k}被修改了，需要解析模板，生成虚拟DOM，对比不同 ... 然后，生成页面内容。`)
							obj[k] = val;
						}
					})
				})
				
			}
		</script>
		
	</body>
</html>

在这里插入图片描述
这里我们简易写的监测原理，实际上对应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>

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>

		<div id="root">
			
			<!-- 设计一个添加性别的按钮button -->
			<button type="button" @click="addSex">添加性别</button>
			<!-- 使用v-if判断student.sex是否存在，有返回true显示，没有返回false不显示。 -->
			<h2 v-if="student.sex">学生性别：{{student.sex}}</h2>
			
			<h2>学生年龄：真实：{{student.age.rAge}} , 对外：{{student.age.sAge}}</h2>
			<h2>朋友们</h2>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}} -- {{f.age}}
				</li>
			</ul>
			
		</div>
		
		<script>
			
			Vue.config.productionTip = false;
			
			const vm = new Vue({
				el:"#root",
				data:{
					student:{
						name:'tom',
						age:{
							rAge:40,
							sAge:29
						},
						friends:[
							{name:'jerry',age:35},
							{name:'tony',age:36},
						]
					}
				},
				methods:{
					//给sutdent添加一个sex属性。
					addSex(){
						// 两个可以使用！
						//Vue.set(this.student,"sex","男");
						this.$set(this.student,'sex','女');
					}
				}
			})
		</script>
		
	</body>
</html>

注意：这两种添加属性方式，不能给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>

		<div id="root">
			
			<h2>学生姓名:{{student.name}}</h2>
			<h2>学生年龄：真实：{{student.age.rAge}} , 对外：{{student.age.sAge}}</h2>
			<button type="button" @click="updateData1">修改索引按钮</button>
			<button type="button" @click="updateData2">通过方法</button>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
			
		</div>
		
		<script>
			
			Vue.config.productionTip = false;
			
			const vm = new Vue({
				el:"#root",
				data:{
					student:{
						name:'tom',
						age:{
							rAge:40,
							sAge:29
						},
						hobby:[
							'打篮球',
							'玩游戏',
							'睡觉'
						]
					}
				},
				methods:{
					updateData1(){
						//使用索引修改，虽然 _data 中的值改变了，并不会改变页面，因为数组内部的元素是没有reactive的getter和setter方法！
						this.student.hobby[0] = '踢足球';
					},
					updateData2(){
						//可以通过方法的方式来触发页面响应。
						this.student.hobby.push('吃东西');
					}
				}
			})
		</script>
		
	</body>
</html>

在这里插入图片描述

7.4 总结

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

xupengboo
关注
专栏目录
vue基础-第五章
码化疼
10-21 432
###今日目标 1.能够说出什么是路由 2.能够说出前端路由的实现原理 3.能够使用Vue-Router实现前端路由 4.能够实现嵌套路由，动态路由 5.能够实现命名路由以及编程式导航 6.理解并实现后台管理案例 ###1.路由的概念 路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。 那么url地址和真实的资源之间就有一种...
Vue学习笔记（尚硅谷天禹老师）
热门推荐
qq_55593227的博客
08-15 31万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
Vue(四)
weixin_44482737的博客
07-26 343
上述的修改代码中，this.persons[0]={id‘001’,name‘潘玮柏’,age50,sex‘男’}是不管用的，数据是修改了，但是页面没有响应的去渲染。需要用到非简写中的immediatetrue,这个代码在初始化时让handler调用一下，这样列表就出来了，如下两图所示，如果不写的话，列表就不会出来。1.使用这些APIpush()、pop()、shift()、unshift()、splice()、sort()、reverse()之后不成功再改成不简写。...
超级好用的vue行政区划组件(v-region)，没有之一~~~
厉害哥哥的博客
06-29 1万+
前言 好久没有更新博客了，最近真的是杂事缠身，生气的居然都没有心情码字了。直到遇到它，我的v-region组件，一款好用到窒息的行政区划组件，于是想要迫不及待的与大家安利一下。希望能够帮助到大家。虽然这款插件非常easy，但是对于我这个代码界的搬运工而言，绝对是能用别人的，自己不瞎BB。好了，话不多说。开始我们今天的正文。 正文 参考文档：https://terryz.gitee.io/vue/#/region/demo ...
前端路由(五)
所得皆惊喜
06-13 556
①. 前端路由简介 1>.前端路由简介 ①. 概念：根据不同的用户事件，显示不同的页面内容 ②. 本质：用户事件与事件处理函数之间的对应关系 ③. 基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换） ④. 代码展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta
vue区域选择组件
付纵横
09-15 1072
发布了一个组件，行政区选择器：https://www.npmjs.com/package/region-selection 数据来源：https://datav.aliyun.com/tools/atlas/#&lat=31.769817845138945&lng=104.29901249999999&zoom=4 (组件中包含的数据为Geojson格式，未参与编译，安装后可在文中require路径下找到) 数据组织：本人 npm iregion-selection 界面.
vue2+vue3学习笔记
02-20
Vue2+Vue3 学习笔记 mounted 和 updated 在 Vue 中，`mounted` 和 `updated` 是两个非常重要的生命周期钩子函数。`mounted` 在页面初次加载时调用，而 `updated` 在数据改变并且要在页面重新渲染完成之后调用。...
Vue3 学习笔记
weixin_52253964的博客
10-29 909
Vue3 学习笔记
尚硅谷vue3.0笔记
最新发布
05-30
尚硅谷vue3.0笔记
Vue 学习总结笔记 (一)
m0_67401153的博客
03-09 303
文章目录 1. Vue 的介绍 1.1 什么是Vue？ 1.2 Vue的诞生 和 特点 1.3 Vue 的引入 和 Vue devtools开发者工具 1.4 Vue 引入后浏览器端的信息处理 1.5 Vue.config 配置全局 2. MVC和MVVC的基本流程 3. Vue 的使用详解 3.1 Vue 的mvvm架构 3.2 Vue 的注意事项 (重要) 3.2.1 Vue实例对象和容器是一一对应的关系 3.2.2 开发中只有一个Vue实例 3.2.3 Vue中 {{ xxx }}
Vue注释代码块折叠时下方非同一代码块跟着折叠如何解决
Dylan1022520的博客
03-18 1602
代码块注释折叠问题
VUE3.0学习系列随笔（十）：省市区选择组件
一方通行的博客
02-05 4896
VUE3.0学习系列随笔（十）：省市区选择组件 1、数据来源 使用的依赖数据为：element-china-area-data，总共有六种数据模式 详情请参考官网为：https://www.npmjs.com/package/element-china-area-data （1）命令行窗口安装依赖，命令为： npm install element-china-area-data -S （2）Vue3.0 UI管理界面安装： 数据格式为： 2、采用ElementUI-plus实现 （1）采用el-cas
省市区三级联动(v-region)
weixin_48215380的博客
01-07 1556
最新有一个需求是要求写省市区的，也好久没有写这个了，有现成的轮子我觉得就直接用轮子，省时间，可以多学一些自己感兴趣的领域，话不多说，开始操作，先看效果图，轮子为VUE Componenthttps://terryz.gitee.io/vue/#/region/demo ......
超实用的vue省市区三级联动（带地区编码）
c_qianxia5040的博客
06-15 5303
基于vue+element 省市区三级联动，内含各地区编码
vue-地址插件 v-region
weixin_30633405的博客
11-20 1662
demo地址：https://terryz.gitee.io/vue/#/region/demo 转载于:https://www.cnblogs.com/huangmin1992/p/9987132.html
vue 手机端 省市区区域选择
小羽向前跑
04-23 2838
1 后端接口获取城市信息 2先获取省根据用户点击的省获取市 3再根据用户点击的市获取区 组件代码： <template> <div class="city"> <!-- 点击此处 省市区选择出现 --> <div class="chooseCity" @click="clickCity">{{choo...
VUE-地区选择器(V-Distpicker)
书写人生
04-29 2万+
V - Distpicker 地区选择器环境问题不多说,自己看文档,主要讲一下在实际使用过程中如何将下拉框的值赋值到对象属性上.文档: https://distpicker.uine.org/github: https://github.com/jcc/v-distpicker项目运用:1.表单... &lt;el-form-item label="地区"&gt; &lt;v-distpick...
前端数据处理——mapData
weixin_37877794的博客
05-09 1144
var aaa =[{ region_code: '450100000000', region_name: '南宁市', parent_code: '450000000000' }, { region_code: '450102000000', region_name: '兴宁区', parent_code: '450100000000' }, { region_code: '450103000000', region_name: '青秀区', parent_code: '450100000000'
vue3对vue2的响应式实现原理
qq_43440532的博客
11-03 145
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <script type="text/javascript" > //源数据 let person = { name:'张三', age:18 } //模.
Vue框架学习笔记：从Hello World到TodoList
"这篇学习笔记主要介绍了前端主流框架Vue.js的基础知识，包括如何创建第一个Vue应用（Hello World）以及通过Todo List的例子展示了Vue的数据绑定和基本操作。作者指出Vue吸收了其他框架如Knockout、Angular、React和...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xupengboo

你的鼓励将是我创作最大的动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值