Vue 学习笔记(五) P33~P39

最新推荐文章于 2024-05-20 21:58:55 发布

运妙心藏

最新推荐文章于 2024-05-20 21:58:55 发布

阅读量239

点赞数

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/u010921682/article/details/102708491

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

P33 12 登录切换的小案例用key管理可复用元素

<div id="app">
	<span v-if="isUser">
		<label for="username">用户账号</label>
		<input type="text" id="username" placeholder="用户账号">
	</span>

	<span v-else>
		<label for="usermail">用户邮箱</label>
		<input type="text" id="usermail" placeholder="用户邮箱">
	</span>
	<button @click="isUser=!isUser">切换类型</button>
</div>

<script>
	const vm = new Vue({
		el: "#app",
		data: {
			isUser: true,
		},
	});
</script>

在这里插入图片描述

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
上面的案例中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，不会被替换掉——仅仅是替换了它的 placeholder。

P34 13 登录切换的input复用问题

这样也不总是符合实际需求，具有唯一值的 key 属性可用来表达“这两个元素是完全独立的，不要复用它们”。

<span v-if="isUser">
	<label for="username">用户账号</label>
	<input type="text" id="username" placeholder="用户账号" key="username">
</span>

<span v-else>
	<label for="usermail">用户邮箱</label>
	<input type="text" id="usermail" placeholder="用户邮箱" key="usermail">
</span>
<button @click="isUser=!isUser">切换类型</button>

在这里插入图片描述

P35 14 v-show的使用及和v-if的区别

<div id="app">
	<!-- 当条件为false时,包含v-if的元素,根本就不会存在在DOM中 -->
	<h2 v-if="isShow" id="aaa">{{message}}</h2>
	
	<!-- 当条件为false时,v-show为所在元素添加一个行内样式:display: none -->
	<h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>

<script src="js/vue.js"></script>
<script>
	const vm = new Vue({
		el: "#app",
		data: {
			message: "Hello Vue.js!",
			isShow: true
		}
	})
</script>

在这里插入图片描述
当我们修改vm.isShow=false时

开发中如何选择?
- 当需要在显示与隐藏之间频繁切换时,使用v-show
- 当只有一次切换时,使用v-if

P36 15 v-for遍历数组和对象

遍历数组

<div id="app">
	<!-- 1 -->
	<ul>
		<li v-for="name in names">{{name}}</li>
	</ul>

	<!-- 2 -->
	<ul>
		<li v-for="(name, index) in names">{{index+1}}. {{name}}</li>
	</ul>
</div>

<script src="js/vue.js"></script>
<script>
	const vm = new Vue({
		el: "#app",
		data: {
			names: ['aaa', 'bbb', 'ccc', 'ddd']
		}
	})
</script>

在这里插入图片描述

小结
- name 为自定义名字,你也可以起其它的名字,如item
- index 为数组下标值,从0开始

遍历对象

<!-- 2-1 -->
<ul>
	<li v-for="item in info">{{item}}</li>
</ul>

<!-- 2-2 -->
<ul>
	<li v-for="(item, key) in info">{{item}}-{{key}}</li>
</ul>

<!-- 2-3 -->
<ul>
	<li v-for="(item, key, index) in info">{{item}}-{{key}}-{{index}}</li>
</ul>

// vue-data
info:{
	name: 'liujing',
	age: 18,
	height: 1.75
}

在这里插入图片描述

小结
- item为自定义名字

P37 16 v-for v-bind:key

在这里插入图片描述

<ul>
	<li v-for="letter in letters" key="letter">{{letter}}</li>
</ul>

发现我现在学习的效率有点慢啊, 要加快了,速度太慢了,总共有P231呢,我太难了!!!
我在想做笔记到底有没有意义呢???反正费时间是真的
231-27=194 - -!!!

P38 17 数组中哪些方法是响应式的

<div id="app">
	<!-- 绑定唯一key,是为了插入效率-->
	<ul>
		<li v-for="letter in letters" :key="letter">{{letter}}</li>
	</ul>
	<button @click="btnClick">按钮</button>

</div>

<script src="js/vue.js"></script>
<script>
	const vm = new Vue({
		el: "#app",
		data: {
			letters: ['B', 'A', 'D', 'E', 'C'],
		},
		methods:{
			btnClick(){
				
				// 1. 直接用下标修改数组数据,界面上不是响应式,但实际数据已经修改
				// this.letters[0] = 'aaa';
				
				// 2-0 push 是响应式的, 在数组的最后面插入一个元素
				// this.letters.push("aaa");
				// this.letters.push('aaa', 'bbb', 'ccc');

				// 2-1 pop 是响应式的, 删除数组最后一个元素
				// this.letters.pop();

				// 3-1 shift 在开头处删除元素
				// this.letters.shift();
				
				// 3-2 unshift 在开头处添加元素
				// this.letters.unshift('aaa');
				// this.letters.unshift('aaa', 'bbb', 'ccc');
				
				// 4 可变参数,如 sum(...nums)
				
				// 5 删除元素
				// 参数1: 开始位置, 参数2: 删除长度,如果不填,默认从删除位置开始删除到尾,
				// const start = 1;
				// this.letters.splice(start, this.letters.length-start);
				// this.letters.splice(start);
				
				// 6 替换
				// this.letters.splice(1, 3, 'm', 'n', 'l');
				// this.letters.splice(1, 3, 'm', 'n', 'l', 'x');
				// 理解为 从位置1开始先删除3个,然后再插入所有元素
				// 插入
				// 从上面衍生为只要第二个参数为0,则会直接插入
				// this.letters.splice(1, 0, 'm', 'n', 'l', 'x');
				
				// 7 修改 1 this.letters[0] = 'aaa' 使之成 响应式
				// this.letters.splice(0, 1, 'aaa');
				// 等同于上面的方法
				// Vue.set(this.letters, 0, 'aaa'); 
				
				
				// 8 sort
				// this.letters.sort();
				
				// 9 reverse
				this.letters.reverse();
				
			}
		}
	})
</script>

注意
- 看代码中注释

P39 18 作业的回顾和实现

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Title</title>
	<style>
		.active {
			color: red
		}
	</style>
</head>

<body>
	<div id="app">
		<!-- 案例: 一个列表,默认第一个为红色,点击哪个,哪个变红,没被点的都是其它统一色-->
		<ul>
			<li v-for="(letter, index) in letters" :class="{active: curIndex===index}" @click="liClick(index)">
				{{index}}. {{letter}}
			</li>
		</ul>

	</div>

	<script src="js/vue.js"></script>
	<script>
		const vm = new Vue({
			el: "#app",
			data: {
				letters: ['AAA', 'BBB', 'CCC', 'DDD', 'EEE'],
				curIndex: 0
			},
			methods: {
				liClick(index) {
					this.curIndex = index;
				}
			}
		})
	</script>
</body>

</html>

在这里插入图片描述

运妙心藏

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 学习笔记(五) P33~P39

P33 12 登录切换的小案例P34 13 登录切换的input复用问题P35 14 v-show的使用及和v-if的区别P36 15 v-for遍历数组和对象P37 16 v-for绑定和非绑定key的区别P38 17 数组中哪些方法是响应式的P39 18 作业的回顾和实现...
复制链接

扫一扫