P8

v-modle双向绑定

v-for 注意index的使用

v-show 根据条件显示（一开始就被创建）

P13

v-if

P13

v-for

*js中的解构

v-for中的判断

p17 模糊查询

P18 事件对象

P19

事件修饰符

双向数据绑定

多选项

下拉列表

P22

购物车案例

累加

P24

表单修饰符

P25

计算属性

P26

watch监听

可以处理异步，计算属性不可以

P42

props传参

父页面设置

子页面接收和验证

P43

属性透传

父页面设置的属性和事件会在子组件中应用，应用在子元素的根节点上。

在子页面设置禁止透传来避免但是↓

可以在子页面上设置v-bind来透传到某个元素上

P44

子传父

1、在父页面的子组件上定义自定义四件，

2、在父页面上定义相应的方法，以便子组件做内容传递

3、子组件的元素上定义事件，用来触发子传父的核心内容。↓

4、子组件在事件中执行this.$emit("evnet"),"event"为父页面上定义的自定义事件。

这样就可以执行父页面上的handlevnet事件。

传递参数

方法1：

子组件设置参数内容

父组件通过data进行接收

方法2：

直接通过子组件元素$emit传递数据。

P45 $refs

蓝色的获取当前元素的整个对象

获取整个child的实例对象，可以随便访问旗下的内容

P47 provide injcet 跨级通讯

↑在顶级页面中使用provide向外共享数据。可以通过this关键字把整个当前组件对象共享出去，可以提供修改当前组件内容的功能。

↑在子页面上通过inject引用，获取相关信息，并可以修改相关数据。

P48 订阅发布

订阅发布模式↑

发布者↑

订阅者↑

P49 动态组件

蓝色为传统if-else进行组件切换，红色为动态组件。↑

通过修改动态组件的参数值切换组件↑

keep-alive缓存切换前的数据↑

选择需要进行缓存或不进行缓存的组件↑

需要组件中指定组件名称与keep-alive中的include的值相同↑

P50 v-model

蓝色的内容是自己定义 属性和方法来控制显示内容来实现双向绑定，但是子组件内部就组要定语相应的名称来接收和控制属性信息，这样就照成了子组件的重用性降低。通过使用v-model，子组件就只需定语一套属性信息，提高了重复利用的效率。↑

子组件需要使用的属性名称。↑

v-model被编译后的内容，所以子组件的名称是这些。↑

v-model可以重新定义名称。↑

P51 异步组件

v异步组件，按需加载。↑

v可以根据情况配置等待加载组件和加载失败组件。↑

P52 插槽

在不使用插槽功能前，父页面调用子组件时，在子组件标签内写入一段HTML代码，是没有作用的，显示的仍然是在子组件内的内容。↑

在父组件里的子组件标签内的HTML内容的作用域是当前父页。

通过在子组件中使用slot标签，可以把在父组件中写的html代码在子组件定义的区域内进行显示出来。↑

P53 具名插槽

父组件内使用v-slot。↑

可以使用#形式。↑

子组件内定语name。↑

P54 作用域插槽

子组通过自定义名称mylist对外暴露出datalist。↑

父组件获取myprops.mylist获取子组件作用域里的datalist。↑

P56 生命周期更新阶段

任何状态信息改变后，updated都会被执行

可以通过nexttick函数来改变这样情况，比updated执行晚，且只会执行一次。

P60 swiper组件封装

作用域问题

slideChange：function（）这种写法，此函数内使用this关键字，作用域是mySwiper这个实例的作用域。↑

slideChange:()=>的形式的作用域是mounted()一级。↑

P62 指令的应用

自定义指令只可以传递一个参数，可以通过传递对象的方式，实现多个值传递的功能。↑

定义指令，可以分开写mounted、updated，也可以简写形式，直接写自定义的指令名称。↑

P67 reactive函数

一定需要是state.去引用↑

P68 ref函数

对象包装、函数包装

在input中使用ref，用来获取当前dom对象，并绑定myinput。

P69 toRefs函数

尝试违法P67中reactive的使用方法来实现双向绑定。不使用const定义的reactive的名称引用reactive中的属性，想通过赋值的形式做引用。↓

这种尝试是错误的！如果非得想不通过reactvie定语的函数名点属性名的形式，那可以通过使用torefs转变一下ref来使用↑。

知识点：展开合并↑

P77 单文件组件使用VCA的语法糖

案例：点击列表项展示详细信息。↑

动态组件：在父页面中定义which变量来控制组件的切换，当是list时显示list列表，当false时显示detail。↑

通过provide来和子组件数据传递。子组件通过inject来获取which并修改。

在子组件中，当点击触发handleclick方法时修改which的值，实现组件切换。list.vue子组件↓

当点击触发list.vue的方法后需要展示详细信息，因为是单页面组件就需要隐藏其他信息，方便详情展示。所以detail.vue子组件控制首页的nevibar的隐藏，到了当前子组件会自动执行onMounted生命周期函数↓

定义全局指令。↓

定义局部指令，注意名称匹配的时候的区分。↓

P83 动态路由匹配

重要

1. 详情页到list页的回退
2. 详情页到其他详情页的跳转

如果使用方法二，需要参数名称与路由中的配置一致。获取整个路由对象，模版中使用路由对象。↓

第三种处理方式路由配置。↓

第三种处理方式路由配置。↓

第三种处理方式的效果是带问号传参的形式。↓

第三种处理方式获取参数的方法。↓

↑上几个图片上的router由idnex.js配置路由。↓

模版中获取当前匹配到的路由实例。↓

前面的示例中从list表页到详细页的跳转及传参完成后，详细页返回到list页的实现。↓

实现从详情页到另一个内容详情页的跳转，因为还是在当前组件上mounted函数不会再次执行，所以会调整失败，解决方法就是通过wathc监听$route.parms的变化来做相应处理。↓

P84 路由模式

去掉浏览器地址栏中的#。↓

P86 组件内守卫

原来详细页到详细 页跳转需要watch监听，现在可以使用beforeRouteUpdate函数来处理。↓

P86 路由懒加载

P86 VCA与路由

P90 vuex中使用mutation

ES6的语法中支持方法名使用变量的形式来定义，方便开发人员各自管理自己的逻辑。

P98 optionStore

当只有一个参数的时候往往可以省略前面的小括号

基本类型可以这样写，也可以把return去掉↑

对象类型不能省略小括号↑