vue基础：渲染&表单数据&过滤器&指令&生命周期

一、条件渲染

和 Java的if与else if差不多，vue提供了一些条件的渲染，分别是v-if、v-else-if、v-else 与 v-show

这两大类条件渲染虽然都是条件渲染。但是使用场景与特点并不一样

1、v-if

写法：

​ (1).v-if=“表达式”

​ (2).v-else-if=“表达式”

​ (3).v-else=“表达式”

通过表达式的布尔值判断该元素是否展示在页面上

• 若表达式结果为false，不展示
• 若表达式结果为true，展示

特点：

• 不展示的dom元素直接被移除

使用场景：

• 适用于切换频率较低的场景（原因是因为频繁移除显示dom元素效率较低）

注意：

• v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”（与Java的条件if同理）

<!-- v-else和v-else-if -->
<div v-if="n === 1">111111</div>
<div v-else-if="n === 2">222222</div>
<div v-else-if="n === 3">33333</div>
<div v-else>66666</div>

2、v-show

写法：

• v-show=“表达式”

与v-if一样，当表达式结果为true才显示元素

特点：

• 不展示的DOM元素未被移除，仅仅是使用样式隐藏掉（通过display属性隐藏）

适用场景：

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

<!-- 使用v-show做条件渲染 -->
<h2 v-show="false">66666666</h2>
<h2 v-show="1 === 1">777777777</h2>

二、列表渲染

列表渲染主要用v-for对数组里面的数组进行遍历，用于展示列表数据

语法：v-for=”(item, index) in xxx” :key=“yyy”

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

			<!-- 遍历数组 -->
			<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>

new Vue({
				el:'#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'
				}
			})

列表渲染用的key，如果列表需要经常排序等操作，不能用index，应该用数组的对象的id作为key，否则可能不仅效率低下，而且会出现bug

1、列表过滤

列表除了显示出来，还可能会有过滤的操作，也就是前端实现搜索框搜索的操作，这里面用到的原理就是过滤

对于过滤的操作，可以用watch监视属性实现、用computed计算属性实现

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

1.1、用watch监视属性实现列表过滤

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

1.2、用computed计算属性实现列表过滤

			//用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
						})
					}
				}
			}) 

2、列表排序

列表排序则是通过一个点击事件，对数组里面的数据进行排序

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

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

3、监测数据的原理

Vue会监视data中所有层次的数据

• 监测对象中的数据：
  • 通过setter实现监视，且在new Vue就传入监测数据
    • 如果在对象中后追加的属性，Vue默认不做响应式处理
    • 如需给后添加的属性做响应式，请使用如下API：
      • Vue.set(target，propertyName/index，value) 或 vm.$set(target，propertyName/index，value)
• 监测数组中的数据：
  • 在Vue修改数组中的某个元素一定要用如下方法：
    • 使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
    • Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

三、收集表单数据

收集表单数据一般通过v-model来实现数据的双向绑定

• 若：<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组成的数组

四、过滤器

过滤器本质上就是一个函数，可以将某些数据例如时间转化为特定的样式

			<!-- 过滤器实现（传参） 参数为格式化样式，不传也行 -->
			<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
			<h3 :x="msg | mySlice">123456</h3>

			//局部过滤器
			// 本质就是一个函数 
			filters:{
				// str形参默认值
				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
					// console.log('@',value)
					return dayjs(value).format(str)
				}
			}

		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

五、指令

1、内置指令：v-cloak

特点：

1. 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2. 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

2、内置指令：v-once

特点：

1. v-once所在节点在初次动态渲染后，就视为静态内容了。
2. 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

3、内置指令：v-pre

特点：

1. 跳过其所在节点的编译过程。
2. 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

4、自定义指令

自定义指令总结：

​ 一、定义语法：

​ (1).局部指令：

new Vue({
		directives:{指令名:配置对象}  或      
		directives{指令名:回调函数}
								})

​ (2).全局指令：

  Vue.directive(指令名,配置对象) 或  Vue.directive(指令名,回调函数)

​ 二、配置对象中常用的3个回调：

​ (1).bind：指令与元素成功绑定时调用。

​ (2).inserted：指令所在元素被插入页面时调用。

​ (3).update：指令所在模板结构被重新解析时调用。

​ 三、备注：

​ 1.指令定义时不加v-，但使用时要加v-；

​ 2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

			directives:{
				//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
				/* 'big-number'(element,binding){
					// console.log('big')
					element.innerText = binding.value * 10
				}, */
				//简写
				big(element,binding){
					console.log('big',this) //注意此处的this是window
					// console.log('big')
					element.innerText = binding.value * 10
				},
				fbind:{
					//指令与元素成功绑定时（一上来）
					bind(element,binding){
						element.value = binding.value
					},
					//指令所在元素被插入页面时
					inserted(element,binding){
						element.focus()
					},
					//指令所在的模板被重新解析时
					update(element,binding){
						element.value = binding.value
					}
				}
			}

六、生命周期