vue笔记（1）——vue基础

事件修饰符

Vue中的事件修饰符：
1.prevent:阻止默认事件
2.stop:阻止事件冒泡
3.once:事件只触发一次
4.captrue:使用事件的捕获方式
5.self: 只有event.target 是当前操作的元素时才触发事件
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕（例如：一个swheet滚动事件，无需等滚动函数执行执行完成,滚动条就向下滚动）

键盘事件

1.Vue中常用的按键别名：
    回车：enter
    删除：delete  捕获删除和退格
    退出：esc
    空格：space
    换行：tab
    上：up
    下：down
    左：left
    右：right
2.Vue未提供别名的按键，可以使用按键原始的key值，但注意要转为kebab-case(多个单词使用短横线命名)
3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
    (1).配合keyup使用：按下修饰键的同时，在按下其他键，随后释放其他键，事件才被触发。
    (2).配合keydown使用：正常促发事件。
4.也可以使用keyCode去使用具体的按键（不推荐）
5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
事件技巧：
    (1).修饰符可以连续写
    (2).键名后面可以加具体的按键 如 @keyup.ctrl.y

计算属性-computed

1.定义：要用的属性不存在，要通过已有的属性计算得来。
2.原理：底层借助了Object.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
（1）初次读取时会执行一次。
（2）当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制，效率更高，调试方便。
5.备注：
（1）计算属性最终会出现在vm上，直接读取使用即可。
（2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化。

监视属性-watch

深度监视：
（1）vue中的watch默认不监视对象内部值的改变。
（2）配置deep:true可以监测对象内部值改变（多层）
备注：
（1）vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以
（2）使用watch时根据数据的具体结构，决定是否采用深度监视

watch:{
	deep:true,//深度监视
	immediate:true,//初始化时让handler调用一下
	handler(newValue,oldValue){
		
	}
}
//简写形式
watch:{
	isHot(newValue,oldValue){

	}
}
//另一种写法
vm.$watch('',{})
vm.$watch('',function(newValue,oldValue){})

computed和watch之间的区别：
    1.computed能完成的功能，watch都可以完成
    2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
两个重要的小原则：
    1.vue所管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
    2.所有不被vue所管理的函数（定时器的回调函数、Ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象

样式绑定

一、绑定class
1.字符串写法，适用于：样式的类名不确定，需要动态指定
2.数组写法，适用于：要绑定的样式个数不确定、名字也不确定
3.对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用（对象通过true/falsse确定用不用）
二、绑定style
1.对象写法 ：style={}
2.数组写法 :[{},{}]

条件渲染

v-show
v-if  v-else-if v-else
<template v-if=""></template> template只能配合v-if使用，可以控制代码块的显示，类似于包裹一个div，template不能配合v-show使用

列表渲染

遍历方式

可以使用in/of
//遍历数组
<li v-for="(p,index) of person" :key="index"></li>
//遍历对象
<li v-for="(k,index) of car" :key="index"></li>
//遍历字符串
<li v-for="(char,index) of str" :key="index"></li>
//遍历指定次数
<li v-for="(number,index) of 5" :key="index"></li>

key原理分析

vue中的key有什么用？
1.虚拟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作为可以是没有问题的。
（3）如果不写key，Vue会默认使用当前遍历的index作为key。

Vue监测数据改变原理

Vue监视数据的原理：
1.vue会监视data中的所有层次的数据。
2.如何监视对象中的数据？
    通过setter实现监视，且要在new Vue时就要传入监测的数据。
    (1).对象中后追加的属性，Vue默认不做响应式处理
    (2).如需给后添加的属性做响应，请使用如下API:
        Vue.set(target,propertyName/index,value)
        vm.$set(target,propertyName,index,value)
3.如何监测数组中的数据？
    通过包裹数组更新元素的方法实现，本质就是做了两件事：
    (1).调用原生对应的方法对数组进行更新。
    (2).重新解析模板，进而更新页面。
4.在Vue修改数组中的某个元素一定要用如下方法：
    (1).使用这些API:push(),pop(),unshift(),splice(),sort(),reverse()
    (2).Vue.set()或vm.$set()
    特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象 添加属性！！！

收集表单数据

收集表单数据：
    若：<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:输入首尾空格过滤

过滤器

定义：对要显示的数据进行特定的格式化后再显示（适用于一些简单的逻辑处理）
语法：
    1.注册过滤器：VUe.filter(name,callback) 或 new Vue(filters:{})
    2.使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
备注：
    1.过滤器也可以接收额外参数，多个过滤器也可以串联
    2.并没有改变原本的数据，是产生新的对应的数据

v-text指令

1.作用：向其所在的节点中渲染文本类容任内容
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会

v-html指令

v-html指令：
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
    (1).v-html会替换掉节点中的所有的内容，{{xx}}则不会。
    (2).v-html可以识别html结构
3.严重注意：v-html有安全性问题！！！
    (1).再网战上动态渲染任意html是非常危险的，容易导致xss攻击。
    (2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上。

v-cloak指令

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

v-once指令

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

v-pre指令

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

自定义指令

自定义指令：
1.定义语法：
    (1).局部指令：
    new Vue({directives:{指令名：配置对象}})
    或 new Vue({directives(){}})
    (2)全局指令：
    Vue.directive(指令名，配置对象)
    或 Vue.directive(指令名，回调函数)
2.配置对象中常用的3个回调：
    (1).bind:指令与元素成功绑定是调用。
    (2).inserted:指令所在元素被插入页面时调用。
    (3).update:指令所在模板结构被重新解析时调用。
3.备注：
    (1).指令定义时不加v-,但使用时要加v-。
    (2).指令名如果是多个单词，需要使用kebab-case命名方式，不要用cameCase命名。

生命周期

生命周期：
1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向vm或组件实例对象。
常用的生命周期钩子函数
1.mounted：发送请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等。
关于销毁vue实例
1.销毁后借助vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效，但原生DOM事件依旧有效。
3.一般不会在beforeDestroy操作数据，因为即使操作数据，也不会再触发更新流程了。