1、自定义指令

内置指令：内部提供的，每个指令都有自己各自独立的功能

自定义指令：自己定义的指令，可以封装一些dom操作，扩展额外功能

全局注册-语法

例如，当页面加载时，让元素获得焦点

    Vue.directive('指令名',{"insert"(el) {el.focus()}})

insert指的是当指令所绑定的元素被添加到页面中时会自动调用

该代码写在main.js文件中

局部组册-语法

    directives: {"指令名": {inserted() {else.foucs()} }}

局部注册的代码写在组件内的script中

使用的时候，和其他指令一样，v-指令名

* 自定义指令-指令的值

语法：在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值

通过binding.value可以拿到指令值，指令值修改会触发update函数

Vue.directive('指令名',{insert(el,binding) {//el为绑定的元素，binding.value获取等号后的值},update(el,binding) {//同样的逻辑，用于实时更新}

* 自定义指令-v-loading封装

场景：实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态

需求：封装一个v-loading指令，实现加载中的效果

分析：

1、本质loading效果就是一个蒙层，盖在盒子上

2、数据请求中，开启loading状态，添加蒙层

3、数据请求完毕，关闭loading状态，移除蒙层

实现：

1、准备一个loading类，通过伪元素定位，设置宽高，实现蒙层

2、开启关闭loading状态，本质只需添加移除类即可

3、结合自定义指令的语法进行封装复用

2、插槽

作用：让一些组件内部的一些结构支持自定义

分成后备内容插槽，具名插槽

插槽基本语法：

1、组件内需要定制的结构部分，改用<slot></slot>占位

2、使用组件时，<MyDialog></MyDialog>（自定义的组件）标签内部，传入结构替换slot

* 插槽-后备内容（默认值）

通过插槽完成了内容的定制，传什么就显示什么，但是如果不传，则是空白

插槽后备内容：封装组件时，可以为预留的<slot>插槽提供后备内容（默认内容）

语法：在该标签内，放置内容，作为默认内容

* 插槽-具名插槽

需求：一个组件内有多处结构，需要外部传入标签，进行定制

具名插槽语法：

1、多个slot使用name属性区分名字

2、template配合v-slot:对应属性值 来分发对应标签

其中的v-slot可以直接简写为#属性值

* 插槽-作用域插槽

作用域插槽：定义slot插槽的同时，是可以传值的。给插槽绑定数据，将来使用组件时可以用

基本步骤：

1、给slot标签，以添加属性的方式传值

<slot :id="item.id" msg="测试文本"></slot>

2、所有被添加的属性，都会被收集到一个对象里

3、在template中，通过#插槽名=“obj”接收，默认插槽名为default

3、路由入门

单页应用程序：SPA-Single Page Application

单页面应用：所有功能在一个html页面上实现

单页面之所以开发效率高，性能好，用户体验好，最大原因是页面按需更新

要按需更新，首先就要明确：访问路径和组件的对应关系

访问路径和组件的对应关系由路由确定

vue中的路由：路径和组件之间的映射关系

1、VueRouter

作用：修改地址栏路径时，切换显示匹配的组件

说明：Vue官方的一个路由插件，是一个第三方包

VueRouter的使用（5+2）

5个基础步骤（固定）

1、下载：下载VueRouter模块到当前工程

2、引入

import VueRouter from 'vue-router'

3、安装注册

Vue.use(VueRouter)

4、创建路由对象

const router=new VueRouter()

5、注入，将路由对象注入到new Vue实例中，建立联系

new Vue({render: h => h(App),router
}).$mount('#app')

以上操作都在main.js中完成

2个核心步骤

1、创建需要的组件（views目录），配置路由规则

例如：

import Find from './views/Find.vue'
import My from './views/My.vue'
const router =new VueRouter({routes: [{path:'/find',component: Find},{path:'/my',component: My}]
})

2、配置导航，配置路由出口（路径匹配的组件显示的位置）

例如：

    <a href="#/find"></a><a href="#/my"></a>

利用<router-view></router-view>进行视图的展示

2、组件存放目录问题

注意：.vue文件本质无区别

路径相关的组件，需要放置在views目录中

组件分类：页面组件与复用组件

一般页面组件放置在views目录中，而复用组件放置在components目录中