【Vue】学习笔记-列表渲染/数据监视

这篇具有很好参考价值的文章主要介绍了【Vue】学习笔记-列表渲染/数据监视。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

基本列表

v-for指令

  1. 用于展示列表数据
  2. 语法:v-for=“(item,index) in xxx” :key=“yyy”
  3. 可遍历:数组,对象,字符串(用的很少),指定次数(用的很少)
        <div id="root">
             <!--遍历数组-->
            <ul>
                <h3>遍历数组</h3>
                <li v-for="p in persons " :key="p.id">
                    {{p.name}}-{{p.age}}
                </li>
                <h3>遍历数组-index</h3>
                <li v-for="(p,index)  in  persons" :key="index">
                    {{p.name}}--{{p.age}}-{{index}}
                </li>
            </ul>

            <!--遍历对象-->
            <ul>
                <h3>遍历对象</h3>
                <li v-for="(value,k) of car" :key="k">
                    {{k}}-{{value}}
                </li>
            </ul>

           <!--遍历字符串-->
            <ul>
                <h3>遍历字符串</h3>
                <li v-for="(char,index) of str" :key="index">
                    {{char}}-{{index}}
                </li>
            </ul>

            <!--测试遍历指定次数-->
            <ul>
                <h3>测试遍历指定次数</h3>
                <li v-for="(number,index) of 5" :key="index">
                    {{number}}-{{index}}
                </li>
            </ul>           
        </div>
        <script type="text/javascript">
            Vue.config.productionTip =false 阻止Vue启动时生成提示
            //创建Vue实列
            const vm=new Vue({
                el:'#root', //el 用于指定当前Vue实例未哪个容器服务,值通常为css选择器字符串。document.getElementById(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>

【Vue】学习笔记-列表渲染/数据监视

Key的作用与原理

原理:
【Vue】学习笔记-列表渲染/数据监视
【Vue】学习笔记-列表渲染/数据监视
面试题:react. vue中的key有什么用?(key的内部原理)

  1. 虚拟Dom中key的作用:
  • key是虚拟DOM对象的标识,档数据发生改变时,Vue会根据【新数据】生成【新的虚拟DOM】,
  • 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:
  1. 对比规则:
    (1)旧虚拟DOM中找到了与虚拟DOM相同的key:
    1. 若虚拟DOM中内容没有变,直接使用之前的真实DOM!
    2. 若虚拟DOM中内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM
    (2)旧虚拟DOM中未找到与新虚拟DOM相同的key
    创建新的真实的DOM。随后渲染到页面。
  2. 用index作为key可能会引发的问题:
    1. 若对数据进行:逆序添加,逆序删除等破坏顺序操作:
    会产生没有必要的真实DOM更新==> 界面效果没问题,但效率低
    2.如果结构中还包含输入类的DOM:
    会产生错误DOM更新==》界面有问题
  3. 开发中如何选择key
    1.最好使用每条数据的唯一标识作为key,比如id,手机号,身份证,学号等唯一值。
    2.如果不存在对数据的逆序添加,逆序删除等破坏顺序操作。仅用于渲染列表用于展示。
    使用index作为leuy是没有问题的。
        <div id="root">
             <!--遍历数组-->
             <h3>遍历数组</h3>
             <button @click.once="add">添加一个老刘</button>
            <ul>
              
                <li v-for="p in persons " :key="p.id">
                    {{p.name}}-{{p.age}}
                    <input type="text">
                </li>
            </ul>         
        </div>
        <script type="text/javascript">
            Vue.config.productionTip =false 阻止Vue启动时生成提示
            //创建Vue实列
            const vm=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>

【Vue】学习笔记-列表渲染/数据监视

列表过滤

		<!-- 准备好一个容器-->
		<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>

列表排序

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

【Vue】学习笔记-列表渲染/数据监视

Vue 数据监视

更新时的一个问题
this.persons[0] = {id:‘001’,name:‘马老师’,age:50,sex:‘男’} 更改data数据,Vue不监听,模板不改变。

		<div id="root">
			<h2>人员列表</h2>
			<button @click="updateMei">更新马冬梅的信息</button>
			<ul>
				<li v-for="(p,index) of persons" :key="p.id">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false
			
			const vm = new Vue({
				el:'#root',
				data:{
					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:'男'}
					]
				},
				methods: {
					updateMei(){
						// this.persons[0].name = '马老师' //奏效
						// this.persons[0].age = 50 //奏效
						// this.persons[0].sex = '男' //奏效
						// this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
						this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})
					}
				}
			}) 

		</script>

模拟数据监测:

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

【Vue】学习笔记-列表渲染/数据监视

原理

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

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学生信息</h1>
			<button @click="student.age++">年龄+1岁</button> <br/>
			<button @click="addSex">添加性别属性,默认值:男</button> <br/>
			<button @click="student.sex = '未知' ">修改性别</button> <br/>
			<button @click="addFriend">在列表首位添加一个朋友</button> <br/>
			<button @click="updateFirstFriendName">修改第一个朋友的名字为:张三</button> <br/>
			<button @click="addHobby">添加一个爱好</button> <br/>
			<button @click="updateHobby">修改第一个爱好为:开车</button> <br/>
			<button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
			<h3>姓名:{{student.name}}</h3>
			<h3>年龄:{{student.age}}</h3>
			<h3 v-if="student.sex">性别:{{student.sex}}</h3>
			<h3>爱好:</h3>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
			<h3>朋友们:</h3>
			<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:{
				student:{
					name:'tom',
					age:18,
					hobby:['抽烟','喝酒','烫头'],
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				},
				addFriend(){
					this.student.friends.unshift({name:'jack',age:70})
				},
				updateFirstFriendName(){
					this.student.friends[0].name = '张三'
				},
				addHobby(){
					this.student.hobby.push('学习')
				},
				updateHobby(){
					// this.student.hobby.splice(0,1,'开车')
					// Vue.set(this.student.hobby,0,'开车')
					this.$set(this.student.hobby,0,'开车')
				},
				removeSmoke(){
					this.student.hobby = this.student.hobby.filter((h)=>{
						return h !== '抽烟'
					})
				}
			}
		})
	</script>

【Vue】学习笔记-列表渲染/数据监视文章来源地址https://www.toymoban.com/news/detail-424253.html

到了这里,关于【Vue】学习笔记-列表渲染/数据监视的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【学习笔记】Vue3源码解析:第五部分 - 实现渲染(2)

    课程地址:【已完结】全网最详细Vue3源码解析!(一行行带你手写Vue3源码) 第五部分-:(对应课程的第33 - 35节) 第33节:《讲解组件渲染流程》 1、在 render 函数中拿到虚拟dom vnode后,编写patch函数,它接收3个参数:null、vnode、container,分别代表:上一次的虚拟dom即旧的虚

    2024年04月23日
    浏览(53)
  • Vue插槽实现商品列表-编辑渲染

    2024年02月11日
    浏览(45)
  • 【Vue3】2-8 : 条件渲染与列表渲染及注意点

    一、条件渲染 - v-if = 表达式 1.1 真值与假值 1.2  v-if ,v-else-if ,v-else 1.3  实战:isShow1 为真值时 显示 bbbbb >  代码 >  效果 二、列表渲染 - v-for 2.1 渲染 - 数组 >  代码 >  效果 2.2 渲染 - 对象 >  代码 >  效果 2.3 渲染 - 整数  >  代码 >  效果 2.3 渲染 - 文本

    2024年02月02日
    浏览(47)
  • 零基础入门Vue之影分身之术——列表渲染&渲染原理浅析

    从 条件渲染 那一篇,我学习到了如何用Vue对dom节点根据条件显示 但单单有条件还不够啊,有时候数据是一大坨一大坨的数据,如果Vue不提供咱要么使用“v-html” 要么就没办法实现 v-html又感觉太low了,Vue提供了另外的指令更好的实现,那便是:列表渲染 简单的列表渲染可以

    2024年02月19日
    浏览(33)
  • Vue2 第五节 class与style绑定,条件渲染和列表渲染

    1.class与style绑定 2.条件渲染 3.列表渲染 (1)绑定class 就是用v-bind绑定一个class 有三种不同的写法 1. 字符串写法:适用于样式的类名不确定,需要动态指定    2.数组写法:适用于要绑定的个数个名字都不确定,数组中的样式连同class里面有的样式都会绑定到div中    3. 对象写

    2024年02月15日
    浏览(33)
  • Vue-16、Vue列表渲染(v-for的使用)

    1、vue遍历数组 也可以这样写 2、遍历对象

    2024年01月21日
    浏览(47)
  • vue3【列表渲染】v-for 详细介绍(vue中的“循环”)

    在本文之前已经有文章简单概要介绍过vue中的渲染,点击帮你快速复习👏👏,包括 条件渲染 和 列表渲染 。 二者同样重要,但是 对于项目而言,使用更多的是列表渲染,主要表现为“循环”。 下面让我们继续深入地了解列表渲染的相关内容吧~👏👏👏 我们可以使用 v-f

    2024年02月22日
    浏览(47)
  • 学习笔记Day3:数据框、矩阵和列表

    要经常检查代码生成的结果,警惕不报错的错误 向量:一维 表格:二维 列表:三维 判断数据结构:class()或is族函数判断,或根据其生成的函数来判断 二维,每列只允许一种数据类型 数据框来源 用代码新建 由已有数据转换或处理得到 读取表格文件 R语言内置数据(iris,

    2024年03月11日
    浏览(79)
  • R语言学习笔记--列表list、数据框

    1-列表 列表 可以包含不同类型的 对象 ,也就是说,列表不是将某些具体的值组织起来,而是组织R对象。列表将数据组织在一个一维集合中。 列表非常好用,因为它可以装任何类型的对象,不要求数据之间是同质的。 创建列表 list()  以上代码,创建了一个列表,其中第一个

    2024年02月15日
    浏览(53)
  • Vue列表渲染(v-for)以及key的作用与原理

    索引值的两种写法:      代码: v-for=\\\"p in persons\\\"  :key=\\\"p.id\\\"         persons : 指的是data中定义的那些数据,数据池。         p  :是一个形参,接收persons中的每一个数据。         :key=\\\"p.id\\\" :动态绑定数据,让每一个li都有唯一的标识(每一个节点的标识)。    遍历

    2024年02月16日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包