Vue学习五：自定义指令、插槽、路由的使用

一、自定义指令

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

全局注册语法

Vue.directive('指令名',{
    "inserted" (el){
        //可以对el标签，扩展额外功能
    }
})

局部注册语法

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

案例：写一个指令，给input标签加上指令，让页面一加载就可以聚焦点

局部注册

<template>
    <div class="App">
        <h1>自定义指令</h1>
        <input v-focus type="text">
    </div>
</template>

<script>
    export default{
        directives:{
            focus:{
                inserted(el){
                    el.focus()
                }
            }
        }
    }
</script>

<style>

</style>

自定义指令-指令的值

指令值的语法:
①v-指令名= "指令值",通过等号可以绑定指令的值
②通过binding.value可以拿到指令的值
③通过update钩子，可以监听指令值的变化，进行dom更新操作

案例：自定义一个指令通过给不同的值，给标签渲染不同的颜色，赋不同的值还能渲染不同的颜色（vue指令接受数据不是响应式的，要用update监听数据的变化来赋值）

<template>
    <div class="App">
        <h1 v-color = "color1">指令一</h1>
        <h1 v-color = "color2">指令二</h1>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                color1:'blue',
                color2:'red'
            }
        },
        directives:{
            color:{
                inserted(el,binding){
                    el.style.color = binding.value
                },
                update(el,binding){
                    console.log("123")
                    el.style.color = binding.value
                }
            }
        }
    }
</script>

<style>

</style>

二、插槽

默认插槽
插槽基本语法:
1.组件内需要定制的结构部分，改用<slot></slot>占位
2.使用组件时, <MyDialog></MyDialog>标签内部,传入结构替换slot

后备内容：在slot标签中写的内容就是后备内容。

具名插槽
1. slot占位,给name属性起名字来区分
2. template配合v-slot:插槽名分发内容
v-slot:插槽名可以简化成#插槽名.

作用域插槽
(1)给slot标签,以添加属性的方式传值
(2)所有属性都会被收集到一个对象中
(3) template中,通过#插槽名= "obj"接收

三、路由的使用

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

单页应用就是请求一次资源，将所有的页面信息都获取到，再用a标签切换不同的路由实现不同页面的展示。首次加载慢，用户体验比较好。

VueRouter的使用(5+ 2)
5个基础步骤(固定)
①下载:下载VueRouter模块到当前工程，版本3.6.5（npm install vue-router@3.6.5 --save）
版本口诀：233，344（Vue2 VueRouter3.x Vuex3.x）（Vue3 VueRouter4.x Vuex4.x）
②引入

import VueRouter from 'vue-router'

③安装注册

Vue.use(VueRouter)

④创建路由对象

const router = new VueRouter()

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

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

2个核心步骤
①创建需要的组件(views目录)，配置路由规则

import Find from './views/Find'
import My from './views/My'
import Friend from './views/Friend'
Vue.use(VueRouter)
const router = new VueRouter({
    routes:[
        {path:'/find',component:Find},
        {path:'/my',component:My},
        {path:'/friend',component:Friend},
    ]
})

②配置导航，配置路由出口(路径匹配的组件显示的位置)

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

实例如下

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Find from './views/Find'
import My from './views/My'
import Friend from './views/Friend'
Vue.use(VueRouter)
const router = new VueRouter({
    routes:[
        {path:'/find',component:Find},
        {path:'/my',component:My},
        {path:'/friend',component:Friend},
    ]
})

Vue.config.productionTip = false

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

App.vue和其中一个页面组件（其他两个相似）

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

<script>
    export default{
        
    }
</script>

<style>
    div{
        width:600px;
        height: 600px;
    }
</style>

<template>
    <div>
        发现音乐
    </div>
</template>

<script>
    export default{
        name:'FindMusic'
    }
</script>

<style>
</style>