Vue day05

一、自定义指令

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

需求：dom更新完了，输入框立刻获得焦点 

  1.  全局&局部注册

全局注册

局部注册

2.  指令的值

v-指令名 = "指令值"

需求：实现一个 color 指令，传入不同的颜色，给标签设置相应的颜色

3.  v-loading 指令封装

场景：实际开发中，发送请求需要时间，请求得数据未回来时，页面处于空白状态，用户体验不好

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

二、插槽

1.  默认插槽

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

语法：

组件内用<slot></slot>占位

使用组件时，传入具体内容

需求：在页面显示一个对话框，封装成一个组件。组件的内容部分不希望写死

2.  后备内容（默认内容）

通过插槽完成了内容的定制，传什么显示什么，不传则空白。让插槽不传值时显示默认内容

3.  具名插槽

默认插槽：一个定制位置

具名插槽：多个定制位置

语法：

多个 slot 加上 name属性 方便区分

template 配合 v-slot:属性名（#属性名） 分发内容

需求：一个组件内由多处结构需要定制

4.  作用域插槽

插槽分类：默认插槽、具名插槽

作用域插槽：是插槽的一个传参语法，不属于插槽分类

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

三、综合案例 — 商品列表

• MyTag 组件封装

• MyTable 组件封装

四、路由

1.  单页应用程序

单页应用（SPA）：所有功能在一个html页面上实现，如网易云音乐

2.  路由概念

路由是一种映射关系

Vue 中的路由是路径和组件的映射关系，根据路由就能知道哪个路径应该匹配哪个组件 

3.  路由插件VueRouter 的基本使用

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

5个基础步骤 （固定）

2个核心步骤

1.  views目录下创建需要的组件，配置路由规则

2.  配置导航，配置路由出口（组件展示的位置）

4.  组件目录存放内容

组件分类有 页面组件 和 复用组件