Vue学习计划-Vue2--Vue核心（五）条件、列表渲染、表单数据-编程知识

1. 条件渲染

v-if
1. v-if=“表达式”
2. v-else-if = “表达式”
3. v-else = “表达式”
  适用于：切换频率较低的场景
特点：不显示dom元素，直接被删除

注意：v-if和v-else-if、v-else一起使用，但要求结构不能被打断
v-if和template一起使用, v-show不可以
v-show v-show = “表达式” 适用于：切换频率较高的场景特点：不展示dom元素，未被移除，仅仅是样式隐藏
备注：使用v-if时，元素可能无法取到，v-show一定可以获取到

示例：

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script></head><body><div id="app"><!-- v-show: 控制元素style样式中display属性实现显示与隐藏 --><p v-show="1 !== 3">这是v-show文本</p><p v-show="false">这是v-show文本</p><hr><!-- v-if: 对元素的删除与渲染 --><p v-show="1 !== 3">这是v-if文本</p><p v-if="true">这是v-if文本</p><hr><!-- v-if, v-else 的使用 --><button @click="n++">点击if事件</button><!-- <p v-if="n === 1">	8:00</p><p v-if="n === 1">	9:00</p><p v-if="n === 3">	10:00</p> --><p v-if="n === 1">	8:00</p><p v-else-if="n === 2">	9:00</p><p v-else-if="n === 3">	10:00</p><p v-else>其他时间</p><hr><!--v-if可以和 template使用，v-show不可以 --><!-- <p v-if="n === 1"> 小红</p><p v-if="n === 1"> 小李</p><p v-if="n === 1"> 小王</p> --><!-- template模板，不改变页面结构 --><!-- <template v-show="n === 1"> --><template v-if="n === 1"><p> 小红</p><p> 小李</p><p> 小王</p></template>	</div><script>const vm = new Vue({el: '#app',data: {n: 0,},})</script></body></html>

2. 列表渲染

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

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script></head><body><div id="app"><!-- 遍历数组 --><h2>人员列表</h2><ul><li v-for="(p, index) in persons" :key="index">{{ p.name }} - {{ p.age }}</li></ul><hr><!-- 遍历对象 --><ul><li v-for="(v, index) in obj" :key="index">{{ index }} - {{ v }}</li></ul><hr><!-- 遍历字符串(比较少用) --><ul><li v-for="(v, index) in 'ahggg'" :key="index">{{ index }} - {{ v }}</li></ul><hr><!-- 遍历数字（比较少用） --><ul><li v-for="(v, index) in 5" :key="index">{{ index }} - {{ v }}</li></ul></div><script>const vm = new Vue({el: '#app',data: {persons: [{ id: '001', name: '小红', age: 19 },{ id: '002', name: '小明', age: 20},{ id: '003', name: '小亮', age: 21}],obj: {name: '小丽',age: 19,sex: '女'}}})</script></body></html>

key作用与原理
1. 虚拟DOM中key的作用：
  1. key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，
  2. 随后Vue进行【新虚拟DOM】和【旧虚拟DOM】的差异比较，比较规则如下：
2. 对比规则：
  1. 旧虚拟DOM中找到与新虚拟DOM相同的key:
    - 若虚拟DOM中的内容没有变，直接使用之前的真实DOM
    - 若虚拟DOM中的内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
  2. 旧虚拟DOM中未找到与新虚拟DOM相同的key：
    - 创建新的真实DOM，随后渲染到页面
用index作为key可能会引发的问题：
1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作：
  - 会产生没有必要的真实DOM更新 ==>界面效果没问题，但效率低
2. 如果结构中还包含输入类的DOM：
  - 会产生错误的DOM更新，页面有问题
开发中如何选择key:
1. 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号等唯一值
2. 如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅用于渲染列表用于展示，使用index作为key是没有问题的

示例：

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script></head><body><div id="app"><!-- 唯一值作为key值： 逆序添加 --><button @click.once="handleClickUnshiftPerson">unshift添加person</button><ul><!-- <li v-for="(p, index) in persons" :key="p.id"> --><li v-for="(p, index) in persons" :key="index">{{ p.name }} - {{p.age }}<input type="text"></li></ul></div><script>const vm = new Vue({el: '#app',data: {persons: [{ id: 1, name: '小红', age: 19 },{ id: 2, name: '小梁', age: 20 },{ id: 3, name: '小名', age: 21 },]},methods: {handleClickUnshiftPerson(){this.persons.unshift({id: 4, name: '小丽', age:22})}},})</script></body></html>

3. 收集表单数据

若：<input type = "text"/>, 则v-model收集的是value值，用户输入的就是value值。
若：<input type = "radio"/>, 则v-model收集的是value值，且要给标签配置value值。
若：<input type = "checkbox"/>
1. 没有配置input的value属性，v-model收集的就是checked(勾选 or 未勾选，是布尔值)
2. 配置input的value属性：
  - v-model 的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  - v-model 的初始值是数组，那么收集的就是value组成的数组
备注：v-model的三个修饰符：
1. lazy: 失去焦点再收集数据
2. number: 输入字符串转为有效的数字
3. trim: 输入首尾空格过滤

示例：

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script></head><body><div id="app"><form @submit.prevent="demo"><!-- 完整写法 --><!-- <label for="demo">账号：</label> --><!-- <input type="text" id="demo"> -->账号：<input type="text" v-model.trim="obj.account">1{{ obj.account }}2<br><br>密码：<input type="password" v-model="obj.password"> {{ obj.password }}<br><br>年龄：<input type="number" v-model.number="obj.age"> {{ typeof(obj.age) }}<br><br>性别：男<input type="radio" name="sex" v-model="obj.sex" value="male">女<input type="radio" name="sex" v-model="obj.sex" value="female">{{ obj.sex }}<br><br>爱好：<!-- 多选框的初始值影响v-model收集回来的值 -->学习<input type="checkbox" v-model="obj.hobby" value="study" id="demo">打游戏<input type="checkbox" v-model="obj.hobby" value="game">读书<input type="checkbox" v-model="obj.hobby" value="read">{{ obj.hobby }}<br><br>家乡：<select v-model="obj.city"><option value="">请选择家乡</option><option value="sjz">石家庄</option><option value="xt">邢台</option><option value="hd">邯郸</option><option value="cd">承德</option></select>{{ obj.city }}<br><br>其他信息：<textarea v-model.lazy="obj.other"></textarea> {{ obj.other }}<br><br><input v-model="obj.argee" type="checkbox"> 阅读并接受<a href="http://www.baidu.com">《用户协议》</a> {{ obj.argee }}<br><br><button>提交</button></form></div><script>const vm = new Vue({el: "#app",data:{obj:{account: '',password: '',age: 18,sex: 'female',hobby: [],city:'',other: '',argee: false}},methods: {demo(){console.log(this.obj);}},})</script></body></html>