Vue基础（2）

条件渲染

v-if

写法：

• v-if="表达式" 
• v-else-if="表达式"
• v-else="表达式"

   示例：当n为1、2、3时，Angular、React、Vue会分别显示，为0和其他值时，显示的是哈哈。

		<div id="root">
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
			<div v-if="n === 1">Angular</div>
			<div v-else-if="n === 2">React</div>
			<div v-else-if="n === 3">Vue</div>
			<div v-else>哈哈</div>

		</div>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				n:0
			}
		})
	</script>

         注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”，既使用v-if、v-else-if、v-else的标签之间不能有其他标签。

v-show

写法：v-show="表达式"

示例：只有n为1时信息才会显示

		<div id="root">
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
			<!-- 使用v-show做条件渲染 -->
			<h2 v-show="n === 1">欢迎来到北京</h2>
		</div>

	<script type="text/javascript">
		Vue.config.productionTip = false
		const vm = new Vue({
			el:'#root',
			data:{
				n:0
			}
		})
	</script>

二者的区别：

v-if

特点：不展示的DOM元素直接被移除。

适用于：切换频率较低的场景。

v-show

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

适用于：切换频率较高的场景。

 列表渲染

使用：

v-for指令:

1. 用于展示列表数据

2. 语法：v-for="(item, index) in xxx" :key="yyy"

3. 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少

		<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:'三轮车',
						price:'10000元',
						color:'蓝色'
					},
					str:'hello'
				}
			})
		</script>

 key：

虚拟DOM中key的作用：

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

对比规则：

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

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

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

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

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

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

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

 开发中如何选择key:

• 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
• 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

 收集表单数据

<input type="text"/>

则v-model收集的是value值，用户输入的就是value值。

<input type="radio"/>

则v-model收集的是value值，且要给标签配置value值。

<input type="checkbox"/>

1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

2.配置了input的value属性:

• v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
• v-model的初始值是数组，那么收集的的就是value组成的数组

示例 

<div id="root">
			<form @submit.prevent="demo">
				账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
				密码：<input type="password" v-model="userInfo.password"> <br/><br/>
				年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
				性别：
				男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
				女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
				爱好：
				学习<input type="checkbox" v-model="userInfo.hobby" value="study">
				打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
				吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
				<br/><br/>
				所属校区
				<select v-model="userInfo.city">
					<option value="">请选择校区</option>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="shenzhen">深圳</option>
					<option value="wuhan">武汉</option>
				</select>
				<br/><br/>
				其他信息：
				<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
				<input type="checkbox" v-model="userInfo.agree">阅读并接受《用户协议》
				<button>提交</button>
			</form>
		</div>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				userInfo:{
					account:'',
					password:'',
					age:18,
					sex:'female',
					hobby:[],
					city:'beijing',
					other:'',
					agree:''
				}
			},
			methods: {
				demo(){
					console.log(JSON.stringify(this.userInfo))
				}
			}
		})
	</script>

v-model的三个修饰符：

• lazy：失去焦点再收集数据
• number：输入字符串转为有效的数字，一般与type="number"一起使用
• trim：输入首尾空格过滤

上面代码中的其他信息 ，不会每次输入都会实时影响vm的值，只有textarea失焦后值才会从页面流向data