【Vue核心】12.列表渲染

最新推荐文章于 2023-08-20 10:50:34 发布
最新推荐文章于 2023-08-20 10:50:34 发布
阅读量590 收藏
点赞数
分类专栏： # 【Vue教程】 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beiluoL/article/details/128305314
版权

列表显示指令

  • 数组: v-for / index
  • 对象: v-for / key

v-for指令:
1.用于展示列表数据
2.语法：v-for=“(item, index) in xxx” :key=“yyy”
3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<!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>人员列表（遍历数组）</h2>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
					{{p.name}}-{{p.age}}
				</li>
			</ul>

			<!-- 遍历对象 -->
			<h2>汽车信息（遍历对象）</h2>
			<ul>
				<li v-for="(value,k) of car" :key="k">
					{{k}}-{{value}}
				</li>
			</ul>

			<!-- 遍历字符串 -->
			<h2>测试遍历字符串（用得少）</h2>
			<ul>
				<li v-for="(char,index) of str" :key="index">
					{{char}}-{{index}}
				</li>
			</ul>
			
			<!-- 遍历指定次数 -->
			<h2>测试遍历指定次数（用得少）</h2>
			<ul>
				<li v-for="(number,index) of 5" :key="index">
					{{index}}-{{number}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					],
					car:{
						name:'奥迪A8',
						price:'70万',
						color:'黑色'
					},
					str:'hello'
				}
			})
		</script>
</html>

key的内部原理

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

1.虚拟DOM中key的作用：

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

2.对比规则：

(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是没有问题的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>key的原理</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表（遍历数组）</h2>
			<button @click.once="add">添加一个赵六</button>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
					{{p.name}}-{{p.age}}
					<input type="text">
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				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:40}
						this.persons.unshift(p)
					}
				},
			})
		</script>
</html>

列表的高级处理

vue中修改数组的方法

在vue中修改数组的方法有：

1.push()函数，向数组尾部添加元素；

2.unshift()函数，向数组头部添加元素；

3.pop()函数，从数组尾部删除元素；

4.shift()函数，从数组头部删除元素；

在vue中修改数组的方法有以下几种

例数组结构如下：

var list = [3,4,5,6]

1.使用push()函数向数组尾部添加元素

list.push(7,8)list=[3,4,5,6,7,8]

2.使用unshift()函数向数组头部添加元素

list.unshift(1,2)  list=[1,2,3,4,5,6]

3.使用pop()函数从数组尾部删除一个元素

list.pop() list=[3,4,5]

4.使用shift()函数从数组头部删除一个元素

list.shift()   list=[4,5,6]

列表的更新显示

Vue.set() 和 vm.$set()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学校信息</h1>
			<h2>学校名称：{{school.name}}</h2>
			<h2>学校地址：{{school.address}}</h2>
			<h2>校长是：{{school.leader}}</h2>
			<hr/>
			<h1>学生信息</h1>
			<button @click="addSex">添加一个性别属性，默认值是男</button>
			<h2>姓名：{{student.name}}</h2>
			<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>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				school:{
					name:'测试',
					address:'sz',
				},
				student:{
					name:'tom',
					age:{
						rAge:40,
						sAge:29,
					},
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				}
			}
		})
	</script>
</html>

列表过滤

<!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>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<ul>
				<li v-for="(p,index) of filPerons" :key="index">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			//用watch实现
			//#region 
			/* new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					],
					filPerons:[]
				},
				watch:{
					keyWord:{
						immediate:true,
						handler(val){
							this.filPerons = this.persons.filter((p)=>{
								return p.name.indexOf(val) !== -1
							})
						}
					}
				}
			}) */
			//#endregion
			
			//用computed实现
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
					}
				}
			}) 
		</script>
</html>

列表排序

<!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>人员列表</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) of filPerons" :key="p.id">
					{{p.name}}-{{p.age}}-{{p.sex}}
					<input type="text">
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					sortType:0, //0原顺序 1降序 2升序
					persons:[
						{id:'001',name:'马冬梅',age:30,sex:'女'},
						{id:'002',name:'周冬雨',age:31,sex:'女'},
						{id:'003',name:'周杰伦',age:18,sex:'男'},
						{id:'004',name:'温兆伦',age:19,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						const arr = this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
						//判断一下是否需要排序
						if(this.sortType){
							arr.sort((p1,p2)=>{
								return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
							})
						}
						return arr
					}
				}
			}) 

		</script>
</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的根数据对象 添加属性！！！

模拟一个数据监测

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<script type="text/javascript" >

			let data = {
				name:'測試',
				address:'深圳',
			}

			//创建一个监视的实例对象，用于监视data中属性的变化
			const obs = new Observer(data)		
			console.log(obs)	

			//准备一个vm实例对象
			let vm = {}
			vm._data = data = obs

			function Observer(obj){
				//汇总对象中所有的属性形成一个数组
				const keys = Object.keys(obj)
				//遍历
				keys.forEach((k)=>{
					Object.defineProperty(this,k,{
						get(){
							return obj[k]
						},
						set(val){
							console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
							obj[k] = val
						}
					})
				})
			}
			
			


		</script>
	</body>
</html>
我有满天星辰
关注
专栏目录
【Python百日进阶-Web开发-Vue3】Day512 - Vue基础：v-for列表渲染
岳涛的博客
02-09 338
Vue 实现了一些巧妙的方法来最大化对 DOM 元素的重用，因此用另一个包含部分重叠对象的数组来做替换，仍会是一种非常高效的操作。注意：同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的。对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。与模板上的 v-if 类似，也可以在 标签上使用 v-for 来渲染一个包含多个元素的块。
尚硅谷vue教程课件.pdf
12-03
Vue技术栈包括Vue核心、vue-cli、vue-resource、axios、vue-router、vuex、element-ui等组件。 3. 模板语法 模板语法是Vue的核心部分，包括插值语法和指令语法。插值语法使用双大括号表达式，指令语法以v-开头，...
Vue--BM记事本
m0_62600503的博客
08-20 439
2.删除功能：v-on调用参数 fliter过滤 覆盖修改原数组。3.添加功能：v-model绑定，unshift修改原数组添加。1.列表渲染：v-for key的设置。
Vue列表渲染(金丹后期)
LuckFairyLuckBaby的博客
09-10 415
列表渲染 用 v-for 把一个数组对应为一组元素 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 <ul id="example-1"> <li v-for="item in items"> {{ i...
js中数组的增删改方法
lintengz的博客
11-26 1005
push方法(向数组末尾添加一个或多个元素) list.push(1,2,3,4) pop方法( 删除数组中的最后一个元素) list.pop() shift方法( 删除数组中的第一个元素) list.shift() 当数组为空时,shift方法不进行任何操作,返回undefined值 unshift方法( 往数组的开头添加一个或多个元素) list.unshift(123,456)...
vue之push() pop() shift() unshift() splice() sort() reverse()等等
m0_46426259的博客
12-16 1万+
一、变更方法 Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新 push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 let arr = ['a', 'b', 'c', 'd'] console.log(arr) // ["a", "b", "c", "d"] console.log(arr.push('new')) //6 console.log(arr) // ["a", "b", "c", "d", "new"] 1234 pop() 方法数组最后一位元素
vue 项目中 向数组 添加元素 的方式
YHLSunshine的博客
04-21 1万+
vue 项目中 向数组 添加元素 的方式 及合并数组的方法
vue - vue基础-vue核心内容.doc
07-08
此外，Vue还支持条件渲染、列表渲染、事件处理、计算属性、侦听器等多种特性，这些都是构建复杂前端应用的关键组成部分。随着对Vue的深入学习，开发者还将接触到Vuex（状态管理）、Vue Router（路由管理）、Vue CLI...
Vue开发教程.pdf
最新发布
06-05
#### 二、Vue核心特性 ##### 1. 数据驱动视图 **Vue.js**采用了数据驱动的设计理念，即数据的变化会直接导致视图的自动更新。这一特性极大地简化了开发者的工作流程，让他们能够更多地关注于业务逻辑的开发而非DOM...
Vue图书列表.rar
04-30
在这个“Vue图书列表”的小案例中，我们将深入探讨Vue的基础知识和一些核心特性，特别是如何在实际应用中实现数据双向绑定、利用数组的变异方法以及动态响应式数据。 首先，数据双向绑定是Vue的核心特性之一，它...
vue.js,ajax渲染页面的实例
10-18
在这个实例中，使用了v-for指令对数据进行列表渲染，而v-bind指令用于动态绑定DOM属性。 8. VUE的MVVM架构： Vue.js遵循MVVM（Model-View-ViewModel）模式，其中ViewModel作为View和Model的桥梁，自动更新DOM以...
【vue】vue+ES6处理数组：shift、unshift、map、filter、foreach、every、some、reduce、find、findIndex等方法
michiko98的博客
09-24 4818
map() test(){ let arr=[0,1,2,3,4]; arr.map((val, idx) => { console.log(val+','+idx); }) }, each() foreach() reduce() filter() test(){ let arr=[0,1,2,3,4]; let result = arr.filter(one => one>2);
Vue-数组中的响应式方法-push pop shift unshift splice sort resourse
ICanWin_lll的博客
01-18 2970
一、vue中数组中的响应式的方法 push pop shift unshift splice sort resourse 1.push() 数组尾添加一个元素 letters: ['a', 'b', 'c', 'd'] this.letters.push('aaa') this.letters.push('aaaa', 'bbbb', 'cccc') letters:['a', 'b', 'c', 'd','aaaa','bbbb','cccc'] 2.pop() 删除数组中的最后一个元素
JavaScript数组方法
做一个开心的全栈工程师
05-17 481
var list = [0,1,2];使用pop()，push()，shift()，unshift()来操作栈和队列1.shift()方法 作用：删除 语法：arrayObject.shift() 方法描述：删除数组中的第一个元素 参数描述：无 是否影响原数组：是 返回值：被删除的值 举例: list.shift();//返回0，此时list = [1,2];2.unshift()方
Vue数组更新相关方法和过滤与排序的使用
weixin_46019681的博客
04-03 1602
Vue将被监听的数组进行了包裹，他们会触发视图更新，被包裹的方法包括：push(),pop(),shift(),unshift(),splice(),sort(),reverse(). 顺便提一下用于过滤数据的方法filter() 1.push() 向数组末尾添加任意数量数据，并返回修改后数组的长度。有两种方式： eg1：通过v-on指令，绑定add方法，在add方法里使用push() eg2. 直接在标签里调用push方法 result： eg3. 在控制台添..
vue2实现数组push/pop/shift/unshift方法重写
qq_44472790的博客
03-06 2263
// 获取数组原型 const orginalPrototype = Array.prototype // 备份用来重新操作 const arrPrototype = Object.create(orginalPrototype) const newArr = ['push', 'pop', 'shift', 'unshift'] newArr.forEach(methods => { // 自定义数组 arrPrototype[methods] = function() {
push()、pop()、shift()、unshift()方法简单整理
阿泽呀的博客
08-04 1万+
这四个都很常用返回值不一样，注意区别 push()   在数组的末尾添加一个或多个元素 返回数组新长度 pop()   移除数组的最后一项，返回移除的项 shift()  移除数组的第一项，返回移除项 unshift()  在数组的第一项前面添加一个或多个元素，返回数组的长度   var arr = new Array(); var Arr = arr.push("red","yel...
javascript js队列 push()、shift()与pop()、unshift()理解
热门推荐
rachel_2016的博客
01-21 2万+
队列：先进先出； 在学习js的过程中，碰到这样一个问题： var colors=new Array(); var count=colors.unshift("red","green"); //推入多个项 count=colors.unshift("black"); //推入单个项 var item=colors.pop(); ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值