目录
5.4.1 单页应用程序: SPA - Single Page Application
五、Vue2.x：自定义指令&插槽&路由入门
5.1 自定义指令
5.1.0 思考
5.1.1 基本语法(全局&局部注册)
自定义指令：自己定义的指令，可以封装一些 dom操作，扩展额外功能
注：“inserted”它表示的是当前指令所绑定的元素被添加到页面里面去的时候，会自动调用。一旦添加成功后，形参 el 就可以拿到我们指令所绑定的元素
总结：
自定义指令的作用?
- 封装一些dom操作，扩展额外功能，例如获取焦点
自定义指令的使用步骤?
1. 注册(全局注册或局部注册)
- 在inserted钩子函数中，配置指令dom逻辑
2. 标签上 v-指令名 使用
5.1.2 指令的值
需求：实现一个color指令 - 传入不同的颜色，给标签设置文字颜色
语法：在绑定指令时，可以通过 “等号” 的形式为指令 绑定 具体的参数值
通过 binding.value 可以拿到指令值，指令值修改会 触发 update函数。
总结：
1. 通过指令的值相关语法，可以应对更复杂指令封装场景
2. 指令值的语法：
①v-指令名= "指令值"，通过等号可以绑定指令的值
②通过binding.value可以拿到指令的值
③通过update钩子，可以监听指令值的变化，进行dom更新操作
5.1.3 v-loading 指令封装
场景：实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态 => 用户体验不好
需求：封装一个 v-loading 指令，实现加载中的效果
分析：
- 本质loading效果就是一个蒙层，盖在了盒子上
- 数据请求中，开启loading状态，添加蒙层
- 数据请求完毕，关闭loading状态，移除蒙层
实现：
- 准备一个loading类，通过伪元素定位，设置宽高，实现蒙层
- 开启关闭loading状态(添加移除蒙层)，本质只需要添加移除类即可
- 结合自定义指令的语法进行封装复用
加一个盒子 box2：
<template>
<div class="main">
<div class="box" v-loading="isLoading">
<ul>
<li v-for="item in list" :key="item.id" class="news">
<div class="left">
<div class="title">{
{ item.title }}</div>
<div class="info">
<span>{
{ item.source }}</span>
<span>{
{ item.time }}</span>
</div>
</div>
<div class="right">
<img :src="item.img" alt="">
</div>
</li>
</ul>
</div>
<div class="box2" v-loading="isLoading2"></div>
</div>
</template>
<script>
// 安装axios => yarn add axios
import axios from 'axios'
// 接口地址：http://hmajax.itheima.net/api/news
// 请求方式：get
export default {
data () {
return {
list: [],
isLoading:true,
isLoading2:true
}
},
async created () {
// 1. 发送请求获取数据
const res = await axios.get('http://hmajax.itheima.net/api/news')
setTimeout(() => {
// 2. 更新到 list 中
this.l