Vue-vue自定义指令&插槽&路由

一.自定义指令

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

1.全局注册 - 语法

(全局注册写在main.js中)

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

2.局部注册 – 语法

(局部注册写在当前vue.js中)

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

3.使用

<input v-指令名 type=“text”>

4.自定义指令的值

语法:

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

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

el表示这个div

directives: {
  color: {
    inserted (el, binding) {
      el.style.color = binding.value
    },
    update (el, binding) {
      el.style.color = binding.value
    }
  }
}

二.插槽

1.插槽 - 默认插槽

插槽基本语法：

1. 组件内需要定制的结构部分，改用slot占位

   <slot></slot>
   

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

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

<slot>默认值</slot>

外部使用组件时，不传东西，则slot会显示后备内容

3.插槽 - 具名插槽

具名插槽语法:
1.多个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>

2.template配合v-slot:名字来分发对应标签

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

简化:

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

<MyDialog>
  <template #head>
    大标题
  </template>
  <template #content>
    内容文本
  </template>
  <template #footer>
    <button>按钮</button>
  </template>
</MyDialog>

4.插槽 - 作用域插槽

基本使用步骤：

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>

三.路由入门

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

目标：认识插件 VueRouter，掌握 VueRouter 的基本使用步骤
作用：修改地址栏路径时，切换显示匹配的组件
说明：Vue 官方的一个路由插件，是一个第三方包
官网：https://v3.router.vuejs.org/zh/

VueRouter 的 使用 (5 + 2)

5个基础步骤 (固定)
① 下载： 下载 VueRouter 模块到当前工程，版本3.6.5
npm i vue-router@3.6.5
②引入(main.js)

import VueRouter from ‘vue-router’
③ 安装注册(main.js)

Vue.use(VueRouter)
④ 创建路由对象

const router = new VueRouter()
⑤ 注入，将路由对象注入到new Vue实例中，建立关联

new Vue({

render: h => h(App),

router
}).$mount(‘#app’)

⑥创建需要的组件 (views文件夹)，配置路由规则

1.import Find from ‘./views/Find.vue’

import My from ‘./views/My.vue’

2.const router = new VueRouter({
routes: [ { path: ‘/find’, component: Find },
{ path: ‘/my’, component: My } ] })
⑦配置导航，配置路由出口(路径匹配的组件显示的位置)

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

<router-view></router-view>

组件存放目录问题 (组件分类)

分类开来 更易维护
src/views文件夹 页面组件 - 页面展示 - 配合路由用
src/components文件夹 复用组件 - 展示数据 - 常用于复用

路由的封装抽离

创建router/index.js把③⑥放进去,

记得引入import Vue from ‘vue’(头)/export default router(尾)

main.js中引入import router from ‘./router/index.js’