VUE基础（四）

最新推荐文章于 2024-07-25 21:13:00 发布

小废废的学习笔记

最新推荐文章于 2024-07-25 21:13:00 发布

阅读量184

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_51528800/article/details/124892483

版权

VUE基础（四）

条件渲染

v-if：

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

v-show：

写法：v-show=“表达式”。
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉。

使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到

列表渲染

基本列表

v-for指令：
1、用于展示列表数据
2、语法：

，其中key可以是index，也可以是遍历对象的唯一标识
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) in persons" :key="index">
					{{p.name}}-{{p.age}}
				</li>
			</ul>

			<h2>书包种类（遍历对象）</h2>
			<ul>
				<li v-for="(value,k) in car" :key="k">
					{{k}}-{{value}}
				</li>
			</ul>

			<h2>遍历字符串</h2>
			<ul>
				<li v-for="(char,index) in str" :key="index">
					{{char}}-{{index}}
				</li>
			</ul>
			
			<h2>遍历指定次数</h2>
			<ul>
				<li v-for="(number,index) in 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:'书包',
						price:'20',
						color:'黑色'
					},
					str:'hello'
				}
			})
		</script>
    </body>
</html>

key的作用与原理

react、vue中的key有什么作用？（key的内部原理）：
1、虚拟DOM中key的作用：key是虚拟DOM中对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
旧虚拟DOM中找到了与新虚拟DOM相同的key：
若虚拟DOM中内容没变, 直接使用之前的真实DOM
若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
旧虚拟DOM中未找到与新虚拟DOM相同的key：创建新的真实DOM，随后渲染到到页面

2、用index作为key可能会引发的问题：
若对数据进行逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低
若结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题

列表排序

例：

<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 filPersons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
    
    <script>
        new Vue({
            el:'#root',
            data:{
                persons:[
                    {id:'001',name:'马冬梅',age:30,sex:'女'},
				    {id:'002',name:'王二麻子',age:45,sex:'女'},
				    {id:'003',name:'李四',age:21,sex:'男'},
				    {id:'004',name:'张三',age:22,sex:'男'}
                ],
                keyWord:'',
                sortType:0,//0代表原顺序，1代表升序，3代表降序
            },
            computed:{
                filPersons(){
                    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>
</body>

Vue数据监视

Vue监视数据的原理：

1、vue会监视data中所有层次的数据

2、如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据
①对象中后追加的属性，Vue默认不做响应式处理
②如需给后添加的属性做响应式，请使用如下API：
Ⅰ、Vue.set(target,propertyName/index,value)
Ⅱ、vm.$set(target,propertyName/index,value)
3、如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
①调用原生对应的方法对数组进行更新
②重新解析模板，进而更新页面
4、在Vue修改数组中的某个元素一定要用如下方法：
①使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
②Vue.set() 或 vm.$set()

小废废的学习笔记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE基础（四）

VUE基础（四）条件渲染v-if：写法：1、 v-if=“表达式”2、v-else-if=“表达式”3、v-else适用于：切换频率较低的场景特点：不展示的DOM元素直接被移除注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断。v-show：写法：v-show=“表达式”。适用于：切换频率较高的场景。特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉。使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到列表渲染基本
复制链接

扫一扫