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文件夹
复用组件－展示数据－常用于复用
