Vue的学习（4）

1.自定义指令

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

• 小结：

• 自定义指令的作用?
• 封装一些 dom 操作，扩展额外功能，例如获取焦点
• 自定义指令的使用步骤?
• 1. 注册 (全局注册 或 局部注册)
• 在 inserted 钩子函数中，配置指令dom逻辑
• 2. 标签上 v-指令名 使用

自定义指令 - 指令的值

• 需求：实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色
•  语法：在绑定指令时，可以通过“等号”的形式为指令 绑定 具体的参数值

< div v-color =" color " > 我是内容 </ div >

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

directives: {

color: {

inserted ( el , binding ) {

el . style . color = binding . value

},

update ( el , binding ) {

el . style . color = binding . value

}

}

}

• 小结：

• 1. 通过指令的值相关语法，可以应对更复杂指令封装场景
• 2. 指令值的语法：
• ① v-指令名 = "指令值" ，通过 等号 可以绑定指令的值
• ② 通过 binding.value 可以拿到指令的值
• ③ 通过 update 钩子，可以监听指令值的变化，进行dom更新操作

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

• 场景：实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态 => 用户体验不好

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

• 场景：实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态 => 用户体验不好
• 需求：封装一个 v-loading 指令，实现加载中的效果

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

• 分析：
• 1. 本质 loading 效果就是一个蒙层，盖在了盒子上
• 2. 数据请求中，开启loading状态，添加蒙层
• 3. 数据请求完毕，关闭loading状态，移除蒙层

• 实现：
• 1. 准备一个 loading 类，通过伪元素定位，设置宽高，实现蒙层
• 2. 开启关闭 loading 状态（添加移除蒙层），本质只需要添加移除类即可
• 3. 结合自定义指令的语法进行封装复用

.loading:before {

content : "" ;

position : absolute ;

left : 0 ;

top : 0 ;

width : 100% ;

height : 100% ;

background : #fff url ( "./loading.gif" )

no-repeat center ;

}

• 小结：

• 1. 通过指令相关语法，封装了指令 v-loading 实现了请求的loading效果
• 2. 核心思路：
• (1) 准备类名 loading，通过伪元素提供遮罩层
• (2) 添加或移除类名，实现loading蒙层的添加移除
• (3) 利用指令语法，封装 v-loading 通用指令
• inserted 钩子中，binding.value 判断指令的值，设置默认状态
• update 钩子中，binding.value 判断指令的值，更新类名状态

2.插槽

插槽 - 默认插槽

• 作用：让组件内部的一些 结构 支持 自定义
• 需求: 将需要多次显示的对话框, 封装成一个组件
• 问题：组件的内容部分，不希望写死，希望能使用的时候自定义。怎么办？

• 插槽基本语法：

• 1. 组件内需要定制的结构部分，改用<slot></slot>占位
• 2. 使用组件时, <MyDialog></MyDialog>标签内部, 传入结构替换slot

• 小结：

• 场景：当组件内某一部分结构不确定，想要自定义怎么办?
• 用插槽 slot 占位封装
• 使用：插槽使用的基本步骤?
• 1. 先在组件内用 slot 占位
• 2. 使用组件时, 传入具体标签内容插入

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

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

能否给插槽设置 默认显示内容 呢？

• 插槽后备内容：封装组件时，可以为预留的 `<slot>` 插槽提供后备内容（默认内容）。
• 语法: 在 <slot> 标签内，放置内容, 作为默认显示内容
• 效果:
•    外部使用组件时，不传东西，则slot会显示后备内容

<MyDialog></MyDialog>

• 外部使用组件时，传东西了，则slot整体会被换掉

< MyDialog > 我是内容 </ MyDialog >

< template >

< div class = "dialog" >

< div class = "dialog-header" >

< h3 > 友情提示 </ h3 >

< span class = "close" > ✖ </ span >

</ div >

< div class = "dialog-content" >

< slot > 我是后备内容 </ slot >  》》（上面的块引用的内容‘< MyDialog > 我是内容 </ MyDialog >’）

</ div >

< div class = "dialog-footer" >

< button > 取消 </ button >

< button > 确认 </ button >

</ div >

</ div >

</ temp小结：

• 小结
• 如何给插槽设置默认显示内容?
•   在slot标签内，写好后备内容
• 什么时候插槽后备内容会显示?
•   当使用组件并未给我们传入具体标签或内容时

插槽 - 具名插槽

• 需求：一个组件内有多处结构，需要外部传入标签，进行定制
• 默认插槽：一个的定制位置

• 具名插槽语法:

3. v-slot:插槽名 可以简化成 #插槽名

• 小结：

• 组件内 有多处不确定的结构 怎么办?
• 具名插槽
• 1. slot占位, 给name属性起名字来区分
• 2. template配合 v-slot:插槽名 分发内容
• v-slot:插槽名 可以简化成什么?
• #插槽名

插槽 - 作用域插槽

• 作用域插槽: 定义 slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据，将来 使用组件时可以用。
• 场景：封装表格组件
• 1. 父传子，动态渲染表格内容
• 2. 利用默认插槽，定制操作列
• 3. 删除或查看都需要用到 当前项的 id，属于 组件内部的数据
• 通过 作用域插槽 传值绑定，进而使用

< MyTable : list =" list " >

< button > 删除 </ button >

</ MyTable >

< MyTable : list =" list2 " >

< button > 查看 </ button >

</ MyTable >

• 基本使用步骤：

• 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 >

• 小结：

• 作用域插槽的作用是什么？
• 可以给插槽上绑定数据，供将来使用组件时使用
• 作用域插槽使用步骤？
• （1）给 slot 标签, 以 添加属性的方式传值
• （2）所有属性都会被收集到一个对象中
• （3）template中, 通过 ` #插槽名= "obj" ` 接收

路由入门

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

• 单页面应用(SPA): 所有功能在 一个html页面 上实现
•  具体示例: 网易云音乐 https://music.163.com/

• 小结：

• 1. 什么是单页面应用程序?
• 所有功能在一个html页面上实现
• 2. 单页面应用优缺点?
• 优点：按需更新性能高，开发效率高，用户体验好
• 缺点：学习成本，首屏加载慢，不利于SEO
• 3. 应用场景？
• 系统类网站 / 内部网站 / 文档类网站 /移动端站点