1.Vue介绍：构建用户界面的渐进式框架
1）构建用户界面：基于数据渲染出用户可以看到的界面
2）渐进式：循序渐进，不用非得把Vue中所有的API学完才能开发Vue，可以学一点开发一点
3）框架：就是一套完整的解决方案
举个例子：
如果把一个完整的项目比喻为一个装修好的房子，那么框架就是一个毛坯房。
我们只需要再毛坯房的基础上，增加功能代码即可。
说到框架，就不得不说库：
-- 库，类似工具箱，是一堆方法的集合，比如：axios，lodash，echarts等
-- 框架，是一套完整的解决方案，实现了大部分功能，我们只需要按照一定的规则去编码即可。
框架有一套必须让开发者遵循的规则或者说约束，学习框架就是学的这些规则。
2.{{}}插值表达式只能在标签中间使用，不能在标签属性中使用
3.响应式特性：简单地说就是数据变，视图对应变
4.Vue中的指令
带有v- 前缀的就是Vue中的指令，指令提高了操作Dom的效率。
vue中的指令按照用途分为六类：
-- 内容渲染指令（v-html，v-text）
-- 条件渲染指令（v-show，v-if，v-else，v-else-if），用来辅助开发者按需控制Dom的显示和隐藏
-- 事件绑定指令（v-on），用来为DOM绑定事件，v-on简写为@
-- 属性绑定指令（v-bind）：用来动态设置html的标签属性，比如src，url，title，v-bind可以简写为：，比如:src 用来设置图片地址
-- 双向绑定指令（v-model）
所谓双向绑定就是数据改变后，呈现的页面结果会里面更新；页面数据更新后，数据也会随之而变。
作用：给表单元素（input，radio，select）使用，双向绑定数据，可以快速获取和设置表单内容。
-- 列表渲染指令（v-for）：辅助开发者基于一个数组来循环渲染一个列表结构
v-for中的key，用于给列表项添加唯一标识，便于Vue进行列表项的正确排序复用。加上就行了。
5.computed计算属性
基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。
computed计算属性和methods方法比较：
computed计算属性封装了一段对于数据的处理，只为求得一个结果。
methods是给Vue实例提供一个方法，Vue实例调用它进行业务逻辑处理。
6.计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算，并再次缓存。
7.当一个结果依赖多个其他值时，推荐使用计算属性；当处理业务逻辑时，推荐使用methods方法。
8.watch监视器
作用：监视数据变化，执行一些业务逻辑或者异步操作
写法：
<script>
data:{
words: '苹果',
obj: {
words: '苹果'
}
},
watch: {
// 该方法会在数据发生变化时，触发执行
数据属性名(newValue, oldValue) {
一些业务逻辑 或者 异步操作
},
'对象.属性名' (newValue, oldValue) {
一些业务逻辑 或者 异步操作
}
}
</script>watch监听器完整写法 ----> 增加额外的配置项
1）deep：true 对复杂类型进行深度监听
2）immdiate：true 初始化，立刻执行watch中的方法
9.Vue生命周期
就是一个Vue实例从创建到销毁的整个过程
1）创建阶段：创建响应式数据
2）挂在阶段：渲染模板
3）更新阶段：修改数据，更新视图
4）销毁阶段：销毁Vue实例
10.Vue生命周期钩子
Vue生命周期过程中，会自动运行一些函数，这些函数被称为生命周期钩子函数，使得开发者可以在特定阶段设计自己的相关代码。
11.Vue CLI
Vue CLI是Vue官方提供的一个全局命令工具
可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【继承了webpack配置】
12.组件化开发
一个页面拆分为一个一个组件，每个组件有自己独立的结构，样式，行为。
将所有代码写在一个页面中，代码混乱，难以维护。
13.scoped解决样式冲突
默认情况：写在组件中的样式会全局生效--->因此很容易造成多个组件之间的样式冲突问题。所以给组件加上scoped属性，可以让样式只作用于当前组件。
原理：当前组件内标签都被添加 data-v-hash值的属性，css选择器都被添加data-v-hash值的属性选择器。
最终效果：必须是当前组件的元素，才会有这个自定义属性，才会被这个样式作用到。
14.data必须是一个函数
data为什么要写成函数：
一个组件的data选项必须是一个函数。目的是为了：保证每个组件实例，维护独立的一份数据对象。每次创建新的组件实例，都会新执行一次data函数，得到一个新对象。
15.组件通信
就是指组件与组件之间的数据传递。
-- 组件的数据是独立的，无法直接访问其他组件的数据
-- 想使用其他组件的数据，就需要组件通信
16.组件关系分为父子组件和非父子组件
父子组件：父组件通过props将数据传递给子组件，子组件通过$emit通知父组件修改更新数据。
17.谁的数据，谁负责
18.非父子通信---event bus 事件总线
19.v-model原理
v-model本质上是一个语法糖。例如应用在输入框上，就是value属性和input事件的合写。
<template>
<div id="app">
<input v-model="msg" type="text">
<input :value="msg" @input="msg = $event.target.value" type = "text">
</div>
</template>作用：
提供数据的双向绑定
-- 数据变，视图跟着变 :value
-- 视图变，数据跟着变 @input
20.v-model使用在其他表单元素上的原理
不同的表单元素，v-model在底层的处理机制是不一样的。比如给checkbox使用v-model
底层处理的是checked属性和change事件
（大体都是类似的）
21.通过v-model实现父子组件数据的双向绑定
其实就是：
子组件：props通过value接收数据，事件触发input
父组件：v-model直接绑定数据
代码：
// 父组件，selectId是父组件data函数中的数据
<BaseSelect v-model="selectId"></BaseSelect>
// 子组件
<select :value="value" @change="handleChange">...</select>
props: {
value:String
},
methods: {
handleChange(e) {
this.$emit('input', e.target.value)
}
}22. .sync修饰符
可以实现子组件和父组件数据的双向绑定
简单理解：子组件可以修改父组件传过来的props值
场景：封装弹框类的基础组件，visible属性 true显示 false隐藏
本质：.sync修饰符就是 :属性名 和 @updata:属性名 的合写
23.ref和$refs
作用：利用ref和$refs可以用于获取dom元素或者组件实例
查找范围：当前组件内
语法：给要获取的盒子添加ref属性
示例代码：
1.给要获取的盒子添加ref属性
<div ref="chartRef">我是渲染图表的容器</div>
2.获取时通过$refs获取 this.$refs.chartRef
mounted() {
console.log(this.$refs.chartRef)
}注意：之前只用document.querySelect('.box')获取的是真个页面中的盒子。然后使用ref标注某个dom元素，后续在需要使用这个dom元素的时候，通过$refs会找得更加精准。
24.Vue是异步更新DOM的，为了提高性能，所以正常情况下是不能立即获得DOM元素焦点的
为了立即获取编辑框焦点可以使用$nextTick
语法:
// inp是在编辑框标签元素，通过$ref绑定的inp名称,用于$refs来找到这个dom元素
this.$nextTick(() => {
this.$refs.inp.focus()
})
25.自定义指令
自己定义一些指令，可以封装一些DOM操作，扩展额外的功能。（由此可以看出Vue中v-开头的指令主要的作用就是操作DOM元素）
分为全局注册和局部注册
语法：
// 全局注册
Vue.directive('指令名', {
"inserted" (el) {
// 可以对el标签，扩展额外的功能
el.focus()
}
})
// 局部注册
directives: {
"指令名": {
inserted() {
// 可以对el标签，扩展额外的功能
el.focus()
}
}
}
// el就是使用指令的DOM元素使用指令语法：v-指令名。注册指令的时候不用加v-前缀，但是使用的时候一定要加v-前缀
26.插槽---默认插槽
作用：组件内的一些内容部分，不希望写死，让组件内部的一些结构支持自定义
插槽也支持预留默认值
27.插槽---具名插槽
多个slot使用name属性区分名字
28.插槽---作用域插槽
定义slot插槽的同时，是可以传值的。给插槽上可以绑定数据，将来使用组件的时候可以用这些数据。
1）给slot标签，以添加属性的方式传值
<slot :id = "item.id" msg = "测试文本"></slot>2）所有添加的属性，都会被收集到一个对象中
{id:3, msg: '测试文本'}3）在template中，通过#插槽名 = "obj"来接受，默认插槽名为default
<MyTable :list="list">
<template #default="obj">
<button @click="del(obj.id)">删除</button>
</template>
<MyTable>