Vue基础
Vue简介
Vue是什么
是一套用于构建用户界面的渐进式JavaScript框架
简单应用：只需一个轻量小巧的核心库
复杂应用：可以引入各式各样的Vue插件
渐进式：Vue可以自底向上逐层的应用 （从简单应用到复杂应用就是渐进式）
Vue特点：
1、采用组件化模式，提高代码复用率、且让代码更好维护
2、声明式编码，让编码人员无需直接操作DOM，提高开发效率
3、使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点
初始Vue
1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
const vm = new Vue({
el: '#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data: { //data中用于存储数据，数据供el所指定的容器去使用
name: '我恁爹'
}
});2、root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
Hello,{{name}}
3、root容器里的代码被称为【Vue模板】
4、Vue实例和容器是一 一对应的
5、真实开发中只有一个Vue实例，并且会配合着组件一起使用
6、{{XXX}}中的XXX要写js表达式，且XXX可以自动读取到data中的所有属性
7、一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
Vue模板
插值语法
功能: 用于解析标签体内容
语法: {{xxx}}
xxxx 会作为 js 表达式解析，且可以直接读到data中的所有属性
例：
你好，{{name}}
指令语法
功能: 解析标签属性、解析标签体内容、绑定事件。。。
语法：v-bind:href = 'xxxx'
xxxx 会作为 js 表达式被解析 （可以简写为：href=“xxxx”）
说明：Vue 中有很多的指令，形式都是v-？？？，此处只是用 v-bind 举个列
点我去尚硅谷学习数据绑定方式
单向数据绑定
语法：v-bind:href ="xxx" 或简写为 :href
特点：数据只能从 data 流向页面
双向数据绑定
语法：v-mode:value="xxx" 或简写为 v-model="xxx"
特点：数据不仅能从 data 流向页面，还能从页面流向 data
注：双向绑定一般都应用在表单元素上（如input、select）
v-model：value可以简写为v-model，因为v-model默认收集的就是value值
el和data的两种写法
el
1、new Vue时配置el属性
new Vue({
el: '#root',//第一种
data: {
name: 'sb'
}
})2、先创建Vue 实例，随后通过vm.$mount('#root')指定el的值
v.$mount('#root') //第二种data
1、对象式
data的第一种写法，对象式
data: {
name: 'sb'
}2、函数式
使用组件时，data必须使用函数式，否则会报错
//data的第二种写法，函数式
data() {
console.log(this);
return {
name: 'sb'
}
}注：由Vue管理的函数，一定不要写箭头函数，因为箭头函数的this指向不是Vue实例
mvvm模型
M：模型(Model) ：对应 data 中的数据
V：视图(View) ：模板
VM：视图模型(ViewModel) ： Vue 实例对象
注：data中所有的属性，最后都出现在了vm身上
vm身上所有的属性及Vue原型上的所有属性，在Vue模板中都可以直接使用
数据代理
Object.defineProperty()方法
let number = 18;
let person = {
name: 'sv',
sex: 'man'
}
Object.defineProperty(person, 'age', {
// enumerable: true, //控制属性是否可以枚举（遍历），默认值是false
// writable: true, //控制属性是否可以被修改，默认值是false
// configurable: true //控制属性是否可以被删除，默认值是false
//当有人读取person对象的age属性时，get函数（getter）就会被调用，且返回值就是age的值
get() {
console.log('有人读取age属性了');
return number;
},
//当有人修改person对象的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
set(value) {
console.log('有人修改了age属性，且值是', value);
number = value;
}
})通过一个对象对另一个对象中属性的操作（读/写）就是数据代理
例：通过obj2操作obj1中的x
let obj1 = {
x: 100
}
let obj2 = {
y: 200
}
Object.defineProperty(obj2, 'x', {
get() {
return obj1.x
},
set(value) {
obj1.x = value
}
})Vue中的数据代理
通过vm对象来代理data对象中属性的操作（读/写）
好处：更加方便的操作data中的数据
原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性
事件处理
事件的基本使用
语法：使用v-on：xxx 或 @xxx 绑定事件，其中xxx是事件名
事件的回调需配置在methods对象中，最终会在vm上
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
@click=“demo” 和 @click=“demo（$event）” 效果一样，但后者可以传参
你是来{{name}}的吧！
new Vue({
el: '#root',
data: {
name: '拉屎'
},
methods: {
showInfo1() {
alert('叫爸爸！')
},
showInfo2(event, number) {
alert(number + '叫爸爸！！')
}
}
})事件修饰符
prevent：阻止默认事件（常用）
快张嘴stop：阻止事件冒泡（常用）
once：事件只触发一次（常用）
capture：使用事件的捕获模式（外层执行）
div1
div2
self：只有event.target是当前操作的元素时才触发的元素（也可以阻止冒泡）
passive：事件的默认行为立即执行，无需等待事件回调执行完毕
- 1
- 2
- 3
- 4
new Vue({
el: '#root',
data: {
name: '小飞棍'
},
methods: {
showInfo(e) {
alert('啊！！！')
},
showMsg(msg) {
console.log(msg);
},
demo() {
for (let i = 0; i < 1000000; i++) {
console.log('#');
}
console.log('一滴都没了');
}
}
})键盘事件
1、Vue中常用的按键别名：
回车：enter
删除：delete（捕获’删除‘和’退格’键）
退出：esc
空格：space
换行：tab（特殊，必须配合keydown去使用）
上：up
下：down
左：left
右：right
2、Vue为提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3、系统修饰键（特殊）：ctrl、alt、shift、meta
配合keyup使用：按下修饰键的同时，在按下其他键（可以固定一个键生效，例如@keyup.ctrl.y），随后释放其他键，事件才被释放
配合keydown使用：正常触发事件
4、也可以使用keyCode去指定具体的按键（不推荐）
5、Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名
计算属性
定义：要用的属性不存在，要通过已有的属性计算得来
原理：底层借助了Object.defineproperty方法提供的getter和setter
get函数什么时候执行？
1、初次读取时执行一次
2、当依赖的数据发生改变时会被再次调用
优势：与methods实现相比，内部有缓存机制（复用），效率更高
注：
1、计算属性最终都会出现在vm上，直接读取使用即可
2、如果计算属性要被修改，那必须写set函数去响应修改，且set中引起计算时依赖的数据发生改变
姓：
名：
全名：{{fullName}}
new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三'
},
computed: {
fullName: {
//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
//get什么时候调用？1.初次读取fullName时 2、所依赖的数据发生变化时
get() {
//此处的this是vm
return this.firstName + '-' + this.lastName
},
//set什么时候调用？当fullName被修改时
set(value) {
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})只考虑读取不考虑修改的时候就可以使用简写形式
new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三'
},
computed: {
fullName() {
return this.firstName + '-' + this.lastName
}
}
})监视属性watch
当被监视的属性变化时，回调函数自动调用，进行相关操作
今天天气很{{info}}
监视的属性必须存在，才能进行监视！！
监视的两种方法：
new Vue时传入watch配置
const vm = new Vue({
el: '#root',
data: {
isHot: true
},
computed: {
info() {
return this.isHot ? '炎热' : '冻人'
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
},
watch: {
isHot: {
handler(newValue, oldValue) {
// immediate:true,//初始化时让handler调用一下
console.log('isHot被修改了', newValue, oldValue);
}
}
}
})通过vm.$watch监视
vm.$watch('isHot', {
handler(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue);
}
})深度监视
Vue中的watch默认不监测对象内部值的改变（一层）
配置deep：true可以监测对象内部值改变（多层）
注：
Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
使用watch时根据数据的具体结构，决定是否采用深度监视
watch简写
watch: {
isHot(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue);
}
}vm.$watch简写
vm.$watch('isHot', function(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue);
})computed和watch之间的区别
1、computed能完成的功能，watch都可以完成
2、watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
两个重要的小原则：
1、所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象
2、所有不被Vue所管理的函数（定时器的回调、ajax的回调等），最好写成箭头函数，这样this的指向才是vm 或 组件实例
绑定样式
class样式
语法： :class="xxx"
xxx可以是字符串、对象、数组（这三个数据类型是指在vm的data中存储的数据类型）。
字符串写法适用于：类名不确定，要动态获取。
{{name}} mood: 'normal',数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
{{name}}classArr: ['atguigu1', 'atguigu2', 'atguigu3'],对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
{{name}}classObj: {
atguigu1: false,
atguigu2: false,
},style样式
语法：:style="{fontSize: xxx}"
其中xxx是动态值
{{name}}styleObj: {
fontSize: '40px',
color: 'red',
},语法：:style="[a,b]"是（数组对象）
其中a、b是样式对象。
{{name}}styleArr: [{
fontSize: '40px',
color: 'blue',
}, {
backgroundColor: 'gray'
}]条件渲染
v-if
写法：
(1).v-if="表达式"
欢迎来到{{name}}
(2).v-else-if="表达式"
Angular
React(3).v-else="表达式"
Angular
React
Vue
哈哈适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”（中间不能插入其他元素），v-else-if、v-else不能单独使用，要配合v-if一起使用。
v-show
语法：v-show="表达式"
欢迎来到{{name}}
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
v-if与template的配合使用，template不影响结构，渲染时自动脱掉
你好
尚硅谷
北京
基本列表
v-for指令（遍历）
用于展示列表数据
语法：v-for="(item, index) in xxx" :key="yyy"
可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
面试题：react、vue中的key有什么作用？（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?
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示， 使用index作为key是没有问题的。
列表过滤（案例）
人员列表
-
{{p.name}}-{{p.age}}-{{p.sex}}
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
})
}
}
}
})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
})
}
}
})列表排序（案例）
人员列表
-
{{p.name}}-{{p.age}}-{{p.sex}}
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
}
}
})Vue监视数据的原理
vue会监视data中所有层次的数据。
如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API：
Vue.set(target，propertyName/index，value)
或
vm.$set(target，propertyName/index，value)
如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
收集表单数据
若：，则v-model收集的是value值，用户输入的就是value值。
若：，则v-model收集的是value值，且要给标签配置value值。
若：
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
过滤器
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
注册过滤器
Vue.filter(name,callback) 或 new Vue{filters:{}}
使用过滤器
{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据
内置指令
学过的指令
v-bind : 单向绑定解析表达式, 可简写为 :xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听, 可简写为@
v-if : 条件渲染（动态控制节点是否存存在）
v-else : 条件渲染（动态控制节点是否存存在）
v-show : 条件渲染 (动态控制节点是否展示)
v-text指令
作用：向其所在的节点中渲染文本内容。
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
v-html指令
作用：向指定节点中渲染包含html结构的内容。
与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。
严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
v-cloak指令（没有值）
本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
v-once指令
v-once所在节点在初次动态渲染后，就视为静态内容了。
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
v-pre指令
跳过其所在节点的编译过程。
可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
自定义指令
定义语法：
局部指令：
new Vue({ directives:{指令名:配置对象} })
或
new Vue({ directives{指令名:回调函数} })
全局指令（new Vue外）：
Vue.directive(指令名,配置对象)
或
Vue.directive(指令名,回调函数)
配置对象中常用的3个回调
(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。
注：一般来说，bind和update中的内容基本一致
例：创建一个fbind自定义属性
fbind: {
//指令与元素成功绑定时（一上来）
bind(element, binding) {
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element, binding) {
element.focus()
},
//指令所在的模板被重新解析时
update(element, binding) {
element.value = binding.value
}
}备注：
1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名，出现这种情况使用引号将名字括住，不然会报错。
生命周期
1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm 或 组件实例对象。
生命周期分析
1) 初始化显示
beforeCreate()数据代理、数据监测前
此时，无法通过vm访问到data中的数据、methods中的方法
created()数据代理、数据监测后
此时，可以通过vm访问到打data的数据、methods中配置的方法
beforeMount()虚拟DOM转为真实DOM前
此时：页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作都不奏效
mounted()虚拟DOM转为真实DOM后
此时：页面呈现的是经过Vue编译的DOM结构，所有对DOM的操作都奏效（尽量避免操作），一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件
2) 更新状态: this.xxx = value
beforeUpdate()数据更新前
此时，数据是新的，页面是旧的。即：页面和数据未保持同步
updated()数据更新后
此时，数据与页面都是新的。即：页面和数据保持同步
销毁 vue 实例: vm.$destory()
beforeDestory()
此时：vm中所有的data、methods、指令等都处于可用状态（可用但不再进行数据更新），马上执行销毁过程。一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾工作
destoryed()
常用的生命周期钩子
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效，但原生DOM事件依然有效。
3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。