自定义指令

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

指令.jpg

需求：当页面加载时，让元素获得焦点

mounted (){
  this.$refs.inp.focus()
}

全局注册 — 语法
全局注册指令，需要在 main.js 文件中书写

 vue.directives:('指令名'，{
      "inserted" (el) {
        // 可以对 el 标签，扩展额外功能
        el.focus()
      }
  })

局部注册 — 语法
在当前组件里定义

//在Vue组件的配置项中
directives: {
  "指令名": {
    inserted () {
      // 可以对 el 标签扩展额外功能
      el.focus()
    }
  }
}

使用时在页面对应部分 <input v-指令名 type="text">

指令的值

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

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

v-指令名="指令值"，通过等号可以绑定指令的值如 <div v-coler="color>我是内容</div>"
通过 binding.value 可以拿到指令值，指令值修改会触发 update 函数
通过 update 钩子，可以监听指令值的变化，进行 dom 更新操作

<template> 
  <div> 
    <h1 v-color="color1">指令的值1测试</h1>
    <h1 v-color="color2">指令的值2测试</h1> 
  </div> 
</template> 

<script> 
  export default { 
    data () { 
      return { 
        color1: 'red',
        color2: 'orange' 
        }
      }, 
    directives: { 
      color: { 
        // 1. inserted 提供的是元素被添加到页面中时的逻辑 
        inserted (el, binding) {
          // console.log(el, binding.value);
          // binding.value 就是指令的值 
          el.style.color = binding.value 
        }, 
        // 2. update 指令的值修改的时候触发，提供值变化后，dom更新的逻辑
        update (el, binding) { 
          console.log('指令的值修改了'); 
          el.style.color = binding.value 
        } 
      }
    } 
  } 
</script>

封装v-loading指令

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

分析:

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

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

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

插槽

默认插槽

场景：当组件内某一部分结构不确定，想要自定义时，用插槽 slot 占位封装

基本语法:

组件内需要定制的结构部分，改用 <slot></slot> 占位
使用组件时, <MyDialog></MyDialog> 标签内部, 传入结构替换 slot
给插槽传入内容时，可以传入纯文本、html标签、组件

后备内容

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

语法: 在 <slot> 标签内，放置内容, 作为默认显示内容

具名插槽

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

语法：

多个 slot 使用 name 属性区分名字
template 配合 v-slot:名字 来分发对应标签
v-slot:插槽名 可简化为 #插槽名

作用域插槽

插槽分类

默认插槽（组件内定制一处的结构）
具名插槽（组件内定制多处的结构）

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

作用域插槽：定义 slot 插槽的同时, 是可以传值的，给插槽上可以绑定数据，将来使用组件时可以用
场景：封装表格组件

父传子动态渲染表格内容
利用默认插槽，定制操作列
删除或者查看都需要用到 当前项的id，属于组件内部的数据 通过作用域插槽传值绑定，进而使用

基本使用步骤：

给 slot 标签, 以添加属性的方式传值

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

所有添加的属性, 都会被收集到一个对象中
```
{ id: 3, msg: '测试文本' }
```

在template中, 通过 #插槽名= "obj" 接收，默认插槽名为 default

<MyTable :list="list">
  <template #default="obj">
    <button @click="del(obj.id)">删除</button>
  </template>
</MyTable>

单页应用程序(SPA)

单页应用程序(SPA) : 所有功能在一个html页面上实现

按需更新性能高，开发效率高，用户体验好
学习成本，首屏加载慢，不利于搜索引擎优化

路由

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

Vue中的路由：路径和组件的映射关系

根据路由就能知道不同路径的，应该匹配渲染哪个组件

基本使用

VueRouter 的介绍（5+2）

固定5个固定的步骤:

下载 VueRouter 模块到当前工程，版本3.6.5
```
yarn add vue-router@3.6.5
```
main.js 中引入VueRouter
```
import VueRouter from 'vue-router'
```
安装注册
```
Vue.use(VueRouter)
```
创建路由对象
```
const router = new VueRouter()
```

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

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

两个核心步骤:

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

import Find from './views/Find'
import My from './views/My'
import Friend from './views/Friend'
import VueRouter from 'vue-router'

const router = new VueRouter({
  // routes 路由规则们
  // route  一条路由规则 { path: 路径, component: 组件 }
  //数组包对象
  routes: [
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend },
  ]
})

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

   <div class="footer_wrap">
     <a href="#/find">发现音乐</a>
     <a href="#/my">我的音乐</a>
     <a href="#/friend">朋友</a>
   </div>
   <div class="top">
     <router-view></router-view>
   </div>

组件存放目录问题

.vue 文件本质无区别，分类放目的：更易维护

src/views文件夹

页面组件 - 页面展示 - 配合路由用
src/components文件夹

复用组件 - 展示数据 - 常用于复用

vue2/3学习(5)