• Vue2复习3 绑定样式 条件渲染 列表渲染 Key作用与原理,列表过滤排序，Vue监测数据改变的原理_对象

    绑定样式
     1. class样式、
    写法:class="xxx" xxx可以是字符串、对象、数组。
    字符串写法适用于：类名不确定，要动态获取。
    对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
    数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
     2. style样式
    :style="{fontSize: xxx}"其中xxx是动态值。
    style="[a,b]"其中a、b是样式对象

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>绑定样式</title>
    6. 		<style>
    7. 			.basic{
    8. 				width: 400px;
    9. 				height: 100px;
    10. 				border: 1px solid black;
    11. 			}
    12. 			
    13. 			.happy{
    14. 				border: 4px solid red;;
    15. 				background-color: rgba(255, 255, 0, 0.644);
    16. 				background: linear-gradient(30deg,yellow,pink,orange,yellow);
    17. 			}
    18. 			.sad{
    19. 				border: 4px dashed rgb(2, 197, 2);
    20. 				background-color: gray;
    21. 			}
    22. 			.normal{
    23. 				background-color: skyblue;
    24. 			}
    25.  
    26. 			.atguigu1{
    27. 				background-color: yellowgreen;
    28. 			}
    29. 			.atguigu2{
    30. 				font-size: 30px;
    31. 				text-shadow:2px 2px 10px red;
    32. 			}
    33. 			.atguigu3{
    34. 				border-radius: 20px;
    35. 			}
    36. 		</style>
    37. 		<script type="text/javascript" src="../js/vue.js"></script>
    38. 	</head>
    39. 	<body>
    40. 	
    41. 		<!-- 准备好一个容器-->
    42. 		<div id="root">
    43. 			<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    44. 			<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>
    45.  
    46. 			<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
    47. 			<div class="basic" :class="classArr">{{name}}</div> <br/><br/>
    48.  
    49. 			<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
    50. 			<div class="basic" :class="classObj">{{name}}</div> <br/><br/>
    51.  
    52. 			<!-- 绑定style样式--对象写法 -->
    53. 			<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
    54. 			<!-- 绑定style样式--数组写法 -->
    55. 			<div class="basic" :style="styleArr">{{name}}</div>
    56. 		</div>
    57. 	</body>
    58.  
    59. 	<script type="text/javascript">
    60. 		Vue.config.productionTip = false
    61. 		
    62. 		const vm = new Vue({
    63. 			el:'#root',
    64. 			data:{
    65. 				name:'zt',
    66. 				mood:'normal',
    67. 				classArr:['atguigu1','atguigu2','atguigu3'],
    68. 				classObj:{
    69. 					atguigu1:false,
    70. 					atguigu2:false,
    71. 				},
    72. 				styleObj:{
    73. 					fontSize: '40px',
    74. 					color:'red',
    75. 				},
    76. 				styleObj2:{
    77. 					backgroundColor:'orange'
    78. 				},
    79. 				styleArr:[
    80. 					{
    81. 						fontSize: '40px',
    82. 						color:'blue',
    83. 					},
    84. 					{
    85. 						backgroundColor:'gray'
    86. 					}
    87. 				]
    88. 			},
    89. 			methods: {
    90. 				changeMood(){
    91. 					const arr = ['happy','sad','normal']
    92. 					const index = Math.floor(Math.random()*3)
    93. 					this.mood = arr[index]
    94. 				}
    95. 			},
    96. 		})
    97. 	</script>
    98. 	
    99. </html>

    条件渲染

    1.v-if
    写法：
       (1).v-if="表达式" 
       (2).v-else-if="表达式"
       (3).v-else="表达式"
    适用于：切换频率较低的场景。
      特点：不展示的DOM元素直接被移除。
      注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

      2.v-show
       写法：v-show="表达式"
       适用于：切换频率较高的场景。
       特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
       3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

     

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>条件渲染</title>
    6. 		<script type="text/javascript" src="../js/vue.js"></script>
    7. 	</head>
    8. 	<body>
    9.  
    10. 		<!-- 准备好一个容器-->
    11. 		<div id="root">
    12. 			<h2>当前的n值是:{{n}}</h2>
    13. 			<button @click="n++">点我n+1</button>
    14. 			<!-- 使用v-show做条件渲染 -->
    15. 			<!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
    16. 			<!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->
    17.  
    18. 			<!-- 使用v-if做条件渲染 -->
    19. 			<!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
    20. 			<!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->
    21.  
    22. 			<!-- v-else和v-else-if -->
    23. 			<!-- <div v-if="n === 1">Angular</div>
    24. 			<div v-else-if="n === 2">React</div>
    25. 			<div v-else-if="n === 3">Vue</div>
    26. 			<div v-else>哈哈</div> -->
    27.  
    28. 			<!-- v-if与template的配合使用 -->
    29. 			<template v-if="n === 1">
    30. 				<h2>你好</h2>
    31. 				<h2>zt</h2>
    32. 				<h2>北京</h2>
    33. 			</template>
    34.  
    35. 		</div>
    36. 	</body>
    37.  
    38. 	<script type="text/javascript">
    39. 		Vue.config.productionTip = false
    40.  
    41. 		const vm = new Vue({
    42. 			el:'#root',
    43. 			data:{
    44. 				name:'zt',
    45. 				n:0
    46. 			}
    47. 		})
    48. 	</script>
    49. </html>

    列表渲染

    基本列表

    v-for指令:
    1.用于展示列表数据

    2.语法：v-for="(item, index) in xxx" :key="yyy"
    3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

     

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>基本列表</title>
    6. 		<script type="text/javascript" src="../js/vue.js"></script>
    7. 	</head>
    8. 	<body>
    9.  
    10. 		<!-- 准备好一个容器-->
    11. 		<div id="root">
    12. 			<!-- 遍历数组 -->
    13. 			<h2>人员列表（遍历数组）</h2>
    14. 			<ul>
    15. 				<li v-for="(p,index) of persons" :key="index">
    16. 					{{p.name}}-{{p.age}}
    17. 				</li>
    18. 			</ul>
    19.  
    20. 			<!-- 遍历对象 -->
    21. 			<h2>汽车信息（遍历对象）</h2>
    22. 			<ul>
    23. 				<li v-for="(value,k) of car" :key="k">
    24. 					{{k}}-{{value}}
    25. 				</li>
    26. 			</ul>
    27.  
    28. 			<!-- 遍历字符串 -->
    29. 			<h2>测试遍历字符串（用得少）</h2>
    30. 			<ul>
    31. 				<li v-for="(char,index) of str" :key="index">
    32. 					{{char}}-{{index}}
    33. 				</li>
    34. 			</ul>
    35. 			
    36. 			<!-- 遍历指定次数 -->
    37. 			<h2>测试遍历指定次数（用得少）</h2>
    38. 			<ul>
    39. 				<li v-for="(number,index) of 5" :key="index">
    40. 					{{index}}-{{number}}
    41. 				</li>
    42. 			</ul>
    43. 		</div>
    44.  
    45. 		<script type="text/javascript">
    46. 			Vue.config.productionTip = false
    47. 			
    48. 			new Vue({
    49. 				el:'#root',
    50. 				data:{
    51. 					persons:[
    52. 						{id:'001',name:'张三',age:18},
    53. 						{id:'002',name:'李四',age:19},
    54. 						{id:'003',name:'王五',age:20}
    55. 					],
    56. 					car:{
    57. 						name:'奥迪A8',
    58. 						price:'70万',
    59. 						color:'黑色'
    60. 					},
    61. 					str:'hello'
    62. 				}
    63. 			})
    64. 		</script>
    65. </html>

    Key作用与原理

    react、vue中的key有什么作用？（key的内部原理）

    1. 虚拟DOM中key的作用:

    key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 
     随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，

    比较规则如下：

    (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

    ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！

    ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

    (2).旧虚拟DOM中未找到与新虚拟DOM相同的key

    创建新的真实DOM，随后渲染到到页面。

    3. 用index作为key可能会引发的问题：

    1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:

    会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低

    2. 如果结构中还包含输入类的DOM：

    会产生错误DOM更新 ==> 界面有问题。

    4. 开发中如何选择key?:

    1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

    2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，

    使用index作为key是没有问题的。

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>key的原理</title>
    6. 		<script type="text/javascript" src="../js/vue.js"></script>
    7. 	</head>
    8. 	<body>
    9. 	
    10. 		<!-- 准备好一个容器-->
    11. 		<div id="root">
    12. 			<!-- 遍历数组 -->
    13. 			<h2>人员列表（遍历数组）</h2>
    14. 			<button @click.once="add">添加一个老刘</button>
    15. 			<ul>
    16. 				<li v-for="(p,index) of persons" :key="index">
    17. 					{{p.name}}-{{p.age}}
    18. 					<input type="text">
    19. 				</li>
    20. 			</ul>
    21. 		</div>
    22.  
    23. 		<script type="text/javascript">
    24. 			Vue.config.productionTip = false
    25. 			
    26. 			new Vue({
    27. 				el:'#root',
    28. 				data:{
    29. 					persons:[
    30. 						{id:'001',name:'张三',age:18},
    31. 						{id:'002',name:'李四',age:19},
    32. 						{id:'003',name:'王五',age:20}
    33. 					]
    34. 				},
    35. 				methods: {
    36. 					add(){
    37. 						const p = {id:'004',name:'老刘',age:40}
    38. 						this.persons.unshift(p)
    39. 					}
    40. 				},
    41. 			})
    42. 		</script>
    43. </html>

    列表过滤

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>列表过滤</title>
    6. 		<script type="text/javascript" src="../js/vue.js"></script>
    7. 	</head>
    8. 	<body>
    9. 		<!-- 准备好一个容器-->
    10. 		<div id="root">
    11. 			<h2>人员列表</h2>
    12. 			<input type="text" placeholder="请输入名字" v-model="keyWord">
    13. 			<ul>
    14. 				<li v-for="(p,index) of filPerons" :key="index">
    15. 					{{p.name}}-{{p.age}}-{{p.sex}}
    16. 				</li>
    17. 			</ul>
    18. 		</div>
    19.  
    20. 		<script type="text/javascript">
    21. 			Vue.config.productionTip = false
    22. 			
    23. 			//用watch实现
    24. 			//#region 
    25. 			/* new Vue({
    26. 				el:'#root',
    27. 				data:{
    28. 					keyWord:'',
    29. 					persons:[
    30. 						{id:'001',name:'马冬梅',age:19,sex:'女'},
    31. 						{id:'002',name:'周冬雨',age:20,sex:'女'},
    32. 						{id:'003',name:'周杰伦',age:21,sex:'男'},
    33. 						{id:'004',name:'温兆伦',age:22,sex:'男'}
    34. 					],
    35. 					filPerons:[]
    36. 				},
    37. 				watch:{
    38. 					keyWord:{
    39. 						immediate:true,
    40. 						handler(val){
    41. 							this.filPerons = this.persons.filter((p)=>{
    42. 								return p.name.indexOf(val) !== -1
    43. 							})
    44. 						}
    45. 					}
    46. 				}
    47. 			}) */
    48. 			//#endregion
    49. 			
    50. 			//用computed实现
    51. 			new Vue({
    52. 				el:'#root',
    53. 				data:{
    54. 					keyWord:'',
    55. 					persons:[
    56. 						{id:'001',name:'马冬梅',age:19,sex:'女'},
    57. 						{id:'002',name:'周冬雨',age:20,sex:'女'},
    58. 						{id:'003',name:'周杰伦',age:21,sex:'男'},
    59. 						{id:'004',name:'温兆伦',age:22,sex:'男'}
    60. 					]
    61. 				},
    62. 				computed:{
    63. 					filPerons(){
    64. 						return this.persons.filter((p)=>{
    65. 							return p.name.indexOf(this.keyWord) !== -1
    66. 						})
    67. 					}
    68. 				}
    69. 			}) 
    70. 		</script>
    71. </html>

    列表排序 

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>列表排序</title>
    6. 		<script type="text/javascript" src="../js/vue.js"></script>
    7. 	</head>
    8. 	<body>
    9. 		<!-- 准备好一个容器-->
    10. 		<div id="root">
    11. 			<h2>人员列表</h2>
    12. 			<input type="text" placeholder="请输入名字" v-model="keyWord">
    13. 			<button @click="sortType = 2">年龄升序</button>
    14. 			<button @click="sortType = 1">年龄降序</button>
    15. 			<button @click="sortType = 0">原顺序</button>
    16. 			<ul>
    17. 				<li v-for="(p,index) of filPerons" :key="p.id">
    18. 					{{p.name}}-{{p.age}}-{{p.sex}}
    19. 					<input type="text">
    20. 				</li>
    21. 			</ul>
    22. 		</div>
    23.  
    24. 		<script type="text/javascript">
    25. 			Vue.config.productionTip = false
    26. 			
    27. 			new Vue({
    28. 				el:'#root',
    29. 				data:{
    30. 					keyWord:'',
    31. 					sortType:0, //0原顺序 1降序 2升序
    32. 					persons:[
    33. 						{id:'001',name:'马冬梅',age:30,sex:'女'},
    34. 						{id:'002',name:'周冬雨',age:31,sex:'女'},
    35. 						{id:'003',name:'周杰伦',age:18,sex:'男'},
    36. 						{id:'004',name:'温兆伦',age:19,sex:'男'}
    37. 					]
    38. 				},
    39. 				computed:{
    40. 					filPerons(){
    41. 						const arr = this.persons.filter((p)=>{
    42. 							return p.name.indexOf(this.keyWord) !== -1
    43. 						})
    44. 						//判断一下是否需要排序
    45. 						if(this.sortType){
    46. 							arr.sort((p1,p2)=>{
    47. 								return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
    48. 							})
    49. 						}
    50. 						return arr
    51. 					}
    52. 				}
    53. 			}) 
    54.  
    55. 		</script>
    56. </html>
    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>更新时的一个问题</title>
    6. 		<script type="text/javascript" src="../js/vue.js"></script>
    7. 	</head>
    8. 	<body>
    9. 		<!-- 准备好一个容器-->
    10. 		<div id="root">
    11. 			<h2>人员列表</h2>
    12. 			<button @click="updateMei">更新马冬梅的信息</button>
    13. 			<ul>
    14. 				<li v-for="(p,index) of persons" :key="p.id">
    15. 					{{p.name}}-{{p.age}}-{{p.sex}}
    16. 				</li>
    17. 			</ul>
    18. 		</div>
    19.  
    20. 		<script type="text/javascript">
    21. 			Vue.config.productionTip = false
    22. 			
    23. 			const vm = new Vue({
    24. 				el:'#root',
    25. 				data:{
    26. 					persons:[
    27. 						{id:'001',name:'马冬梅',age:30,sex:'女'},
    28. 						{id:'002',name:'周冬雨',age:31,sex:'女'},
    29. 						{id:'003',name:'周杰伦',age:18,sex:'男'},
    30. 						{id:'004',name:'温兆伦',age:19,sex:'男'}
    31. 					]
    32. 				},
    33. 				methods: {
    34. 					updateMei(){
    35. 						// this.persons[0].name = '马老师' //奏效
    36. 						// this.persons[0].age = 50 //奏效
    37. 						// this.persons[0].sex = '男' //奏效
    38. 						// this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
    39. 						this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})
    40. 					}
    41. 				}
    42. 			}) 
    43.  
    44. 		</script>
    45. </html>

    Vue监测数据改变的原理_对象

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>Vue监测数据改变的原理</title>
    6. 		<!-- 引入Vue -->
    7. 		<script type="text/javascript" src="../js/vue.js"></script>
    8. 	</head>
    9. 	<body>
    10. 		<!-- 准备好一个容器-->
    11. 		<div id="root">
    12. 			<h2>学校名称：{{name}}</h2>
    13. 			<h2>学校地址：{{address}}</h2>
    14. 		</div>
    15. 	</body>
    16.  
    17. 	<script type="text/javascript">
    18. 		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    19.  
    20. 		const vm = new Vue({
    21. 			el:'#root',
    22. 			data:{
    23. 				name:'zt',
    24. 				address:'cs',
    25. 				student:{
    26. 					name:'tom',
    27. 					age:{
    28. 						rAge:40,
    29. 						sAge:29,
    30. 					},
    31. 					friends:[
    32. 						{name:'jerry',age:35}
    33. 					]
    34. 				}
    35. 			}
    36. 		})
    37. 	</script>
    38. </html>

    模拟一个数据监测

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>Document</title>
    6. 	</head>
    7. 	<body>
    8. 		<script type="text/javascript" >
    9.  
    10. 			let data = {
    11. 				name:'尚硅谷',
    12. 				address:'北京',
    13. 			}
    14.  
    15. 			//创建一个监视的实例对象，用于监视data中属性的变化
    16. 			const obs = new Observer(data)		
    17. 			console.log(obs)	
    18.  
    19. 			//准备一个vm实例对象
    20. 			let vm = {}
    21. 			vm._data = data = obs
    22.  
    23. 			function Observer(obj){
    24. 				//汇总对象中所有的属性形成一个数组
    25. 				const keys = Object.keys(obj)
    26. 				//遍历
    27. 				keys.forEach((k)=>{
    28. 					Object.defineProperty(this,k,{
    29. 						get(){
    30. 							return obj[k]
    31. 						},
    32. 						set(val){
    33. 							console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
    34. 							obj[k] = val
    35. 						}
    36. 					})
    37. 				})
    38. 			}
    39. 			
    40. 			
    41.  
    42.  
    43. 		</script>
    44. 	</body>
    45. </html>

    Vue.set的使用 Vue监测数据改变的原理

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>Vue监测数据改变的原理</title>
    6. 		<!-- 引入Vue -->
    7. 		<script type="text/javascript" src="../js/vue.js"></script>
    8. 	</head>
    9. 	<body>
    10. 		<!-- 准备好一个容器-->
    11. 		<div id="root">
    12. 			<h1>学校信息</h1>
    13. 			<h2>学校名称：{{school.name}}</h2>
    14. 			<h2>学校地址：{{school.address}}</h2>
    15. 			<h2>校长是：{{school.leader}}</h2>
    16. 			<hr/>
    17. 			<h1>学生信息</h1>
    18. 			<button @click="addSex">添加一个性别属性，默认值是男</button>
    19. 			<h2>姓名：{{student.name}}</h2>
    20. 			<h2 v-if="student.sex">性别：{{student.sex}}</h2>
    21. 			<h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
    22. 			<h2>朋友们</h2>
    23. 			<ul>
    24. 				<li v-for="(f,index) in student.friends" :key="index">
    25. 					{{f.name}}--{{f.age}}
    26. 				</li>
    27. 			</ul>
    28. 		</div>
    29. 	</body>
    30.  
    31. 	<script type="text/javascript">
    32. 		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    33.  
    34. 		const vm = new Vue({
    35. 			el:'#root',
    36. 			data:{
    37. 				school:{
    38. 					name:'zt',
    39. 					address:'cs',
    40. 				},
    41. 				student:{
    42. 					name:'tom',
    43. 					age:{
    44. 						rAge:40,
    45. 						sAge:29,
    46. 					},
    47. 					friends:[
    48. 						{name:'jerry',age:35},
    49. 						{name:'tony',age:36}
    50. 					]
    51. 				}
    52. 			},
    53. 			methods: {
    54. 				addSex(){
    55. 					// Vue.set(this.student,'sex','男')
    56. 					this.$set(this.student,'sex','男')
    57. 				}
    58. 			}
    59. 		})
    60. 	</script>
    61. </html>

    Vue监测数据改变的原理_数组

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>Vue监测数据改变的原理_数组</title>
    6. 		<!-- 引入Vue -->
    7. 		<script type="text/javascript" src="../js/vue.js"></script>
    8. 	</head>
    9. 	<body>
    10. 		<!-- 准备好一个容器-->
    11. 		<div id="root">
    12. 			<h1>学校信息</h1>
    13. 			<h2>学校名称：{{school.name}}</h2>
    14. 			<h2>学校地址：{{school.address}}</h2>
    15. 			<h2>校长是：{{school.leader}}</h2>
    16. 			<hr/>
    17. 			<h1>学生信息</h1>
    18. 			<button @click="addSex">添加一个性别属性，默认值是男</button>
    19. 			<h2>姓名：{{student.name}}</h2>
    20. 			<h2 v-if="student.sex">性别：{{student.sex}}</h2>
    21. 			<h2>年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
    22. 			<h2>爱好</h2>
    23. 			<ul>
    24. 				<li v-for="(h,index) in student.hobby" :key="index">
    25. 					{{h}}
    26. 				</li>
    27. 			</ul>
    28. 			<h2>朋友们</h2>
    29. 			<ul>
    30. 				<li v-for="(f,index) in student.friends" :key="index">
    31. 					{{f.name}}--{{f.age}}
    32. 				</li>
    33. 			</ul>
    34. 		</div>
    35. 	</body>
    36.  
    37. 	<script type="text/javascript">
    38. 		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    39.  
    40. 		const vm = new Vue({
    41. 			el:'#root',
    42. 			data:{
    43. 				school:{
    44. 					name:'尚硅谷',
    45. 					address:'北京',
    46. 				},
    47. 				student:{
    48. 					name:'tom',
    49. 					age:{
    50. 						rAge:40,
    51. 						sAge:29,
    52. 					},
    53. 					hobby:['抽烟','喝酒','烫头'],
    54. 					friends:[
    55. 						{name:'jerry',age:35},
    56. 						{name:'tony',age:36}
    57. 					]
    58. 				}
    59. 			},
    60. 			methods: {
    61. 				addSex(){
    62. 					// Vue.set(this.student,'sex','男')
    63. 					this.$set(this.student,'sex','男')
    64. 				}
    65. 			}
    66. 		})
    67. 	</script>
    68. </html>

    Vue监视数据的原理：
    1. vue会监视data中所有层次的数据。

    2. 如何监测对象中的数据？
        通过setter实现监视，且要在new Vue时就传入要监测的数据。
        (1).对象中后追加的属性，Vue默认不做响应式处理
        (2).如需给后添加的属性做响应式，请使用如下API：
         Vue.set(target，propertyName/index，value) 或 
         vm.$set(target，propertyName/index，value)

    3. 如何监测数组中的数据？
      通过包裹数组更新元素的方法实现，本质就是做了两件事：
       (1).调用原生对应的方法对数组进行更新。
        (2).重新解析模板，进而更新页面。

     4.在Vue修改数组中的某个元素一定要用如下方法：
    1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
      2.Vue.set() 或 vm.$set()
     特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>总结数据监视</title>
    6. 		<style>
    7. 			button{
    8. 				margin-top: 10px;
    9. 			}
    10. 		</style>
    11. 		<!-- 引入Vue -->
    12. 		<script type="text/javascript" src="../js/vue.js"></script>
    13. 	</head>
    14. 	<body>
    15. 		<!-- 准备好一个容器-->
    16. 		<div id="root">
    17. 			<h1>学生信息</h1>
    18. 			<button @click="student.age++">年龄+1岁</button> <br/>
    19. 			<button @click="addSex">添加性别属性，默认值：男</button> <br/>
    20. 			<button @click="student.sex = '未知' ">修改性别</button> <br/>
    21. 			<button @click="addFriend">在列表首位添加一个朋友</button> <br/>
    22. 			<button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/>
    23. 			<button @click="addHobby">添加一个爱好</button> <br/>
    24. 			<button @click="updateHobby">修改第一个爱好为：开车</button> <br/>
    25. 			<button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
    26. 			<h3>姓名：{{student.name}}</h3>
    27. 			<h3>年龄：{{student.age}}</h3>
    28. 			<h3 v-if="student.sex">性别：{{student.sex}}</h3>
    29. 			<h3>爱好：</h3>
    30. 			<ul>
    31. 				<li v-for="(h,index) in student.hobby" :key="index">
    32. 					{{h}}
    33. 				</li>
    34. 			</ul>
    35. 			<h3>朋友们：</h3>
    36. 			<ul>
    37. 				<li v-for="(f,index) in student.friends" :key="index">
    38. 					{{f.name}}--{{f.age}}
    39. 				</li>
    40. 			</ul>
    41. 		</div>
    42. 	</body>
    43.  
    44. 	<script type="text/javascript">
    45. 		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    46.  
    47. 		const vm = new Vue({
    48. 			el:'#root',
    49. 			data:{
    50. 				student:{
    51. 					name:'tom',
    52. 					age:18,
    53. 					hobby:['抽烟','喝酒','烫头'],
    54. 					friends:[
    55. 						{name:'jerry',age:35},
    56. 						{name:'tony',age:36}
    57. 					]
    58. 				}
    59. 			},
    60. 			methods: {
    61. 				addSex(){
    62. 					// Vue.set(this.student,'sex','男')
    63. 					this.$set(this.student,'sex','男')
    64. 				},
    65. 				addFriend(){
    66. 					this.student.friends.unshift({name:'jack',age:70})
    67. 				},
    68. 				updateFirstFriendName(){
    69. 					this.student.friends[0].name = '张三'
    70. 				},
    71. 				addHobby(){
    72. 					this.student.hobby.push('学习')
    73. 				},
    74. 				updateHobby(){
    75. 					// this.student.hobby.splice(0,1,'开车')
    76. 					// Vue.set(this.student.hobby,0,'开车')
    77. 					this.$set(this.student.hobby,0,'开车')
    78. 				},
    79. 				removeSmoke(){
    80. 					this.student.hobby = this.student.hobby.filter((h)=>{
    81. 						return h !== '抽烟'
    82. 					})
    83. 				}
    84. 			}
    85. 		})
    86. 	</script>
    87. </html>

  • 相关阅读:
    （附源码）springboot在线仓库 毕业设计745131
    HCNP Routing&Switching之MSTP
    Unity中Shader立方体纹理Cubemap
    《AI一键生成抖音商品种草文案》让你秒变带货王！
    Oracle ADG状态查看与相关视图
    科研小白的成长之路——博一年度总结
    ELF文件结构
    科普rabbitmq，rocketmq，kafka三者的架构比较
    提升程序运行速度-计算加速的20种方法
    sklearn学习笔记之线性回归
  • 原文地址：https://blog.csdn.net/weixin_40746230/article/details/125407343