Vue-vue自定义指令&插槽&路由
一.自定义指令
自定义指令：自己定义的指令, 可以封装一些 dom 操作， 扩展额外功能
1.全局注册 - 语法
(全局注册写在main.js中)
Vue.directive('指令名', {
"inserted" (el) {
// 可以对 el 标签，扩展额外功能
el.focus()
}
})
2.局部注册 – 语法
(局部注册写在当前vue.js中)
directives: {
"指令名": {
inserted () {
// 可以对 el 标签，扩展额外功能
el.focus()
}
}
}
3.使用
4.自定义指令的值
语法:
我是内容
通过 binding.value 可以拿到指令值，指令值修改会 触发 update 函数。
el表示这个div
directives: {
color: {
inserted (el, binding) {
el.style.color = binding.value
},
update (el, binding) {
el.style.color = binding.value
}
}
}
二.插槽
1.插槽 - 默认插槽
插槽基本语法：
-
组件内需要定制的结构部分，改用slot占位
<slot></slot> -
使用组件时,
2.插槽 - 后备内容（默认值）
外部使用组件时，不传东西，则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.插槽 - 作用域插槽
基本使用步骤：
-
给 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>
三.路由入门
Vue中路由：路径 和 组件 的 映射 关系
目标：认识插件 VueRouter，掌握 VueRouter 的基本使用步骤
作用：修改地址栏路径时，切换显示匹配的组件
说明：Vue 官方的一个路由插件，是一个第三方包
官网：https://v3.router.vuejs.org/zh/
VueRouter 的 使用 (5 + 2)
5个基础步骤 (固定)
① 下载： 下载 VueRouter 模块到当前工程，版本3.6.5
npm i [email protected]
②引入(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’