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>