第三阶段 vue day08

 scope 原理

    - 在根元素上添加随机的属性名

    - 通过属性选择器添加样式

 自选配置脚手架

 linkOnSave:false,----保存时不检查

混入mixin

    - 使用方法

        - 暴露 export default obj

        - 引入 import xxx from "../xxx"

            - .js后缀可以省略

            - index.js可以省略

        - 使用 `mixins:[xxx]`

    - 注意点

        - 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”

            - 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先

        - 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用

        - 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对

    - 两种模式

        - 全局混入  Vue.mixin()

        - 局部混入  mixins 选项

自定义指令

     两种模式

        - 全局注册字定义指令 Vue.directive()

        - 局部注册自定义    directives 选项

     指令的名字和使用

        - 注册指令时不加 v-

        - 使用指令时加 v-

    全局注册

        - Vue.directive('指令的名字'，配置对象)

        - Vue.directive('指令的名字'，配置对象)

    钩子函数

        - bind 指令第一次绑定到DOM元素上调用，只调用一次

        - inserted 被绑定元素插入父节点时调用

        - update 所在组件的 VNode 更新时调用

    - 指令钩子函数会被传入以下参数

        - el：指令所绑定的元素，可以用来直接操作 DOM。

        - binding：一个对象，包含以下 property

   

 

- 计算属性不能传参，还必须要有返回值，但是它可以缓存

过滤器  

 做数据格式化的工作    monent.js day.js

    总结

        - 本质上就是一个函数，接受到数据并返回格式化的数据

        - Vue3.x中没有

     使用方式

        1. 全局过滤器 Vue.filter()

        2. 局部过滤器 filters 选项

插件

1. vue-router \ vuex 官方提供的一套 vue 插件

了解插件的原理

1. 定义一个包含install函数的对象

    - install会接受一个参数 Vue

    - install函数会在Vue.use()注册时被执行

2. 引入你写的插件

3. 注册插件

` Vue.use(插件) `

       

 路由

- @表示src的别名，便于复制粘贴

 vue-router 的使用步骤

1. 项目必须安装 vue-router

2. 引入 vue-router 插件

3. 注册它 Vue.use()

4. 定义 路由规则

5. 实例化 路由对象

6. 将实例化的路由对象配置到 new Vue 的 router 选项上。

7. 在 App.vue 中放一个坑用于承载路由组件 <router-view>

路由组件

根路由打交道，且是某个path路径对应关系的组件，咱们就叫它路由组件

1. 不需要手动使用

2. 它会自动渲染到   路由视图组件(router-view)  中。

3. 在合适的时机，某个路由组件就会渲染到 router-view这个坑中