vue自定义指令&路由

vue自定义指令

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

注册

需求：当页面加载时，让元素将获得焦点（（autofocus 在 safari 浏览器有兼容性）获取焦点：dom元素.focus()）

全局注册

main.js中

Vue.directive（'指令名'，{
    // inserted 当绑定的元素被添加到页面的时候会自动调用
    "inserted" (el) {
        //el可以获取当前元素，可以对 el 标签，扩展额外功能
        el.focus()
    }
})

局部注册

组件vue文件中

directives:{
    "指令名"：{
      inserted () {
            //el可以获取当前元素，可以对 el 标签，扩展额外功能
            el.focus()
        }
    }
}

指令的值

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

语法：在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值
```
<div v-color="colo">我是内容</div>
```

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

directives: {
    color: {
        // 1。inserted 提供的是元素被添加到页面中时的逻辑
        inserted (el, binding) {
            el.style.color = binding.value
        },
        // 2.update 指令的值修改的时候触发，提供值变化后，dom更新的逻辑
        update(el, binding) {
            el.style.color = binding.value
        }
    }
}

v-loading指令封装

分析：

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

实现：

准备一个loading 类，通过伪元素（操作方便，只需移除class）定位，设置宽高，实现蒙层
开启关闭loading 状态（添加移除蒙层），本质只需要添加移除类即可

<style>
    .loading:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #fff url("./loading.gif")no-repeat center;
    }
</style>

<template>
    <div v-loading="isLoading">
        
    </div>
</template>

directives:{
    loading:{
        inserted(el,binding){
            binding.value ? el.classList.add('loading'):el.classList.move("loading")
        },
        inserted(el,binding){
            binding.value ? el.classList.add('loading'):el.classList.move("loading")
        }
        
    }
}

插槽

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

插槽 - 默认插槽

一个定制位置

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

<template>
 <div>
        <slot></slot>
    </div>
</template>

使用组件时,<MyDialog></MyDialog>标签内部,传入结构替换slot

<template>
 <div>
       <MyDialog>
         xxx
           <p>
               xxx
              
           </p>
        </MyDialog>
    </div>
</template>

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

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

<slot>我是默认显示的内容</slot>

外部使用组件时，不传东西，则slot会显示后备内容
外部使用组件时，传东西了，则slot整体会被换掉

插槽 - 具名插槽

可以定制多处

语法：

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

<div class="dialog-header">
    <slot name="head"></slot>
</div>
<div class="dialog-content">
    <slot name="content"></slot>
</div>
<div class="dialog-footer">
    <slot name="footer"></slot>
</div>

template 配合包裹需要分发的结构
v-slot 名字来分发对应标签

<MyDialog>
    <template v-slot:head>大标题</template>
    <template v-slot:content>内容文本</template>
    <templatee v-slot:footer>
        <button>按钮</button>
    </template>
</MyDialog>

V-slot : 插槽名可以简化成 #插槽名
```
<template #head>大标题</template>
```

插槽 - 作用域插槽

是插槽的一个传参语法

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

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

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

在template中，通过#插槽名="对象名”接收，默认插槽名为default

<MyTable>
    <template #default="obj">
        <button>删除</button>
    </template>
</MyTable>

单页应用程序&路由

单页应用程序

所有功能在一个html页面上实现

优点：按需更新性能高，开发效率高，用户体验好

缺点：学习成本，首屏加载慢，不利于SEO

应用场景：系统类网站/内部网站/文档类网站/移动端站点

路由

路由是一种映射关系，而vue中的路由是 路径和组件的映射关系

VueRouter 的使用（5+2）

5个基本步骤（固定）

下载：下载VueRouter模块到当前工程，版本3.6.5（vue2用3，vue3用4）

控制台输入
```
yarn add vue-router@3.6.5
```
引入

main.js中
```
import VueRouter from'vue-router'
```
安装注册

main.js中
```
Vue.use(VueRouter)
```
创建路由对象

main.js中
```
const router = new VueRouter()
```

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

main.js中

new Vue({
    render:h => h(App),
    router
    //router 是简写，router:touter
}).$mount('#app')

2个核心步骤

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

src 文件夹下新建 views 创建组件

main.js文件下（完善上面的第四步）

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 },
        ]
})

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

<a href="#/find">发现音乐</a>
<a href="#/my">我的音乐</a>

<div class="top">
    <router-view></router-view>
</div>

如果因为组件名字太短报错的话，在组件文件加上name（多个单词）

// 组件文件中
<script>
    export default{
        name:'多个单词的名字'
    }
</script>

组件存放目录问题

views文件夹

页面组件－页面展示－配合路由用
components文件夹

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

vue自定义指令&路由