一、自定义指令
1. 自定义指令基本介绍
1> 内置指令: vue3 自带的, 如: v-model, v-for, v-if, v-bind...
2> 自定义指令: 相对内置指令而言, 是程序员自己编写的指令, 当内置指令无法满足我们需求的时候, 就可以自己编写指令, 这种指令就称之为自定义指令
3> 作用: 封装一段公共的 DOM 操作的代码
4> 与 ref 属性操作 DOM 的区别:
1. ref 是作用在单个标签上的, 代码无法复用
2. 自定义指令可以把一段公共的 DOM 操作代码封装起来, 用起来更方便
5> 使用步骤:
1. 先定义:
main.js - > app.directive('指令名',{mounted(el){
//el 就是当前指令所在的DOM元素,拿到el就可以对它做任何原生DOM操作 }
})
2. 再使用:
<Xxx v-指令名/>
定义指令:
使用指令
具体代码:
main.js
//导入 bootstrap
import 'bootstrap/dist/css/bootstrap.css'//按需导入 createApp 函数
import { createApp } from 'vue'
//默认导入 App.vue
import App from './App.vue'
//导入通用按钮组件
// import TestButton from './component/TestButton.vue'//创建应用并指定渲染的位置
const app = createApp(App)// app.component('TestButton', TestButton)//定义指令
app.directive('jujiao',{//指令所在的标签插入到真实DOM中自动执行一次mounted(el){// el 就是指令所在的DOM元素, 拿到了el就可以对el做任何原生DOM操作console.log('mounted',el)//聚焦el.focus()}
})
// 指定渲染的位置
app.mount('#app')App.vue
<script setup></script>
<template><div><input type="text" v-jujiao /></div>
</template><style scoped></style>2. 自定义指令配合绑定数据
自定义指令配合绑定数据: v-color="表达式"
1. 定义指令
main.js
app.directive('color',{
//第一次渲染执行mounted()
mounted(el,binding){
// el: 指令所在元素
// binding: 指令绑定的信息对象, binding.value 获取指令表达式的结果
} , //后面对数据进行修改, 执行的是updated()
updated(el,binding){}
)}
2. 使用指令
<Xxx v-color = "响应式数据"/>
el: 指令所在元素
binding: 指令绑定的信息对象, binding.value 获取指令表达式的结果, 我们就可以使用el获取使用了自定义属性v-color的divb标签, 然后使用binding 来获取 div对象里面的值
但是此时出现一个问题, 我们ref里面数据改变并不影响字体的颜色
原因: mounted里面 指令所在表达式变了, 该函数不会再次执行(只会自动执行一次)
解决方案: 使用updated(), 我们后续更改数据后, 在uppdate(el,binding)方法里面去进行更改
具体代码
mian.js
//导入 bootstrap
import 'bootstrap/dist/css/bootstrap.css'//按需导入 createApp 函数
import { createApp } from 'vue'
//默认导入 App.vue
import App from './App.vue'
//导入通用按钮组件
// import TestButton from './component/TestButton.vue'//创建应用并指定渲染的位置
const app = createApp(App)// app.component('TestButton', TestButton)//定义指令
app.directive('color',{// el: 指令所在元素// binding: 指令绑定的信息对象, binding.value 获取指令表达式的结果// 指令所在的DOM元素变成真实DOM了, 会自动执行一次,因此数据变了,是无法执行的// 当指令所在表达式的值变了, 该函数不会再次执行了// 初始化进入mounted(初次渲染, 数据变了不负责)mounted(el,binding){console.log('1-mounted')console.log(el,binding)el.style.color = binding.value;}, //数据发生变化进入updated, 每次指令绑定表达式的值变了, 都会执行一次updated(el,binding){console.log("2-updated")//直接赋新值el.style.color = binding.value}
})// 指定渲染的位置
app.mount('#app')App.vue
<script setup>
import { ref } from 'vue';
// 提供的颜色响应式数据
const colorStr = ref('red')
</script>
<template><!-- 使用自定义属性, 并绑定数据 --><div v-color="colorStr">嘿嘿嘿</div>
</template><style scoped></style>3. 自定义组件 简化形式
1> 简化形式: 将以前指令的 mounted() 和 updated() 俩个钩子进行合写, 用一个函数来代替, 并且这个函数会在 mounted() 和 updated() 时机都会执行
2> 语法:
app.directive('color',(el,binding)=>{
el.style.color = bingding.value
})
3> 什么时候需要用到简写?
当自定义指令绑定了数据, 那么就可以简写(简写的本质 = mounted() + updated() )
当自定义指令没有绑定数据, 那么就可以采用之前的写法, 比如: 聚焦指令
app.directive('jujiao',{
mounted(el){
el.focus()}
)}
<input v-jujiao type = "text"/>
具体代码:
main.js
//导入 bootstrap
import 'bootstrap/dist/css/bootstrap.css'//按需导入 createApp 函数
import { createApp } from 'vue'
//默认导入 App.vue
import App from './App.vue'
//导入通用按钮组件
// import TestButton from './component/TestButton.vue'//创建应用并指定渲染的位置
const app = createApp(App)// app.component('TestButton', TestButton)//定义指令
//自定义指令的简写的时机: 需要使用改变的数据的时候
//如果只是要在组件执行一次, 那么使用mounted即可,不需要简写
app.directive('color', (el, binding) => {el.style.color = binding.value
})// 指定渲染的位置
app.mount('#app')App.vue
<script setup>
import { ref } from 'vue';
// 提供的颜色响应式数据
const colorStr = ref('red')
</script>
<template><!-- 使用自定义属性, 并绑定数据 --><div v-color="colorStr">嘿嘿嘿</div>
</template><style scoped></style>3. 自定义指令的应用: 封装v-loading指令
1> 目的: 在前后端请求的过程中, 为了减少用焦急等待, 可以在数据没有回来之前(此时页面是空白状态), 会给用户显示一个加载中的提示
2> 实现案例的步骤:
1. 准备静态结构+样式+数据渲染的代码, 之前写过的, 直接拿来用即可
2. 封装在那个v-loading 指令( 先定义,后使用)
v-loading的核心就是在控制红色盒子的添加还是移除
记得启动我们之前的项目
执行流程
具体代码:
main.js
// 按需导入 createApp 函数
import { createApp } from 'vue'
// 导入 App.vue
import App from './App.vue'
// 创建应用
const app = createApp(App)app.directive('loading', (el, binding) => {console.log(el, binding)// binding.value: 布尔值// 数据在加载中if (binding.value) {// 显示加载提示//获得类列表,添加类el.classList.add('loading')} else {// 数据加载完毕// 移除加载提示// 删除类el.classList.remove('loading')}
})// 指定渲染的位置
app.mount('#app')
App.vue
<script setup>
import axios from 'axios'
import { ref } from 'vue'
// 新闻列表
const newsList = ref([])
// 控制是否在加载中
const isLoading = ref(false)
getNewsData()
// 获取新闻列表
async function getNewsData() {// 请求前，把 isLoading 设置为加载中isLoading.value = true// 请求新闻数据const resp = await axios.get('http://localhost:4000/api/news')// 保存数据newsList.value = resp.data.data// 请求结束，把 isLoading 关闭加载状态isLoading.value = false
}
</script>
<template><div class="box"><ul v-loading="isLoading"><li v-for="item in newsList" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img :src="item.img" alt="img" /></div></li></ul></div>
</template><style>
.loading:before {z-index: 999;content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #fff url('./img/loading.gif') no-repeat center;background-size: auto;
}.box {position: relative;width: 800px;min-height: 600px;margin: 10px auto;border-radius: 5px;
}.news {display: flex;margin: 0 auto;padding: 20px 0;cursor: pointer;
}.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;
}.news .left .title {font-size: 20px;
}.news .left .info {color: #999999;
}.news .left .info span {margin-right: 20px;
}.news .right {width: 160px;height: 120px;
}.news .right img {width: 100%;height: 100%;object-fit: cover;
}
</style>
tips: 我们可以在浏览器里面的network设置弱网测试
二、插槽(很重要)
1. 插槽的介绍
1> 概念: 插槽本质就是一个占位符, 今后可以给这个占位符传入你想要的组件结构, 从而提高组件的灵活性和可复用性.
2> 作用: 让组件结构支持自定义
3> 分类: 默认/匿名插槽, 具名插槽, 作用域插槽
4> 使用步骤:
1. 先占位: 在组件内标签不能写死的位置用slot占位
2. 再传入/填充: 把组件写成双标签, 传入结构, 从而替换掉占位的slot
2. 默认插槽/匿名插槽
案例需求: 主体的内容不是写死的, 是可以变化的
1> 先占位: 在组件内标签不能写死的位置用slot占位
2> 再传入/填充: 把组件写成双标签, 传入结构, 从而替换掉占位的slot
具体代码:
App.vue
<script setup>
import MyDialog from './component/MyDialog.vue';
</script>
<template><div><!-- 2. 再使用组件的时候, 给组件传入想展示的结构, 从而替换掉占位的 slot 组件 --><!-- 此时我们组件必须是双标签的 --><!-- <MyDialog/> --><MyDialog><!-- 传入<span></span> --><!-- 这个span会替换掉<slot></slot> --><span>你确定要进行删除操作吗?</span></MyDialog><!-- 传入 <h3></h3> --><MyDialog><span>你确定要退出本系统吗?</span></MyDialog><MyDialog><!-- 账号和密码会替换掉<slot></slot> -->账号: <input type="text"/><br><br>密码: <input type="password"/><br><br></MyDialog></div>
</template>
<style scoped></style>MyDialog.vue
<script setup>
</script>
<template><div class="dialog"><div class="dialog-header"><h3>友情提示</h3><span class="close">✖</span></div><div class="dialog-content"><!-- 1. 当组件标签不确定的时候, 使用slot 来进行占位 --><slot></slot></div><div class="dialog-footer"><button>取消</button><button>确认</button></div></div>
</template>
<style scoped>
* {margin: 0;padding: 0;
}.dialog {width: 470px;height: 230px;padding: 0 25px;background-color: #ffffff;margin: 40px auto;border-radius: 5px;
}.dialog-header {height: 70px;line-height: 70px;font-size: 20px;border-bottom: 1px solid #ccc;position: relative;
}.dialog-header .close {position: absolute;right: 0px;top: 0px;cursor: pointer;
}.dialog-content {height: 80px;font-size: 18px;padding: 15px 0;
}.dialog-footer {display: flex;justify-content: flex-end;
}.dialog-footer button {width: 65px;height: 35px;background-color: #ffffff;border: 1px solid #e1e3e9;cursor: pointer;outline: none;margin-left: 10px;border-radius: 3px;
}.dialog-footer button:last-child {background-color: #007acc;color: #fff;
}
</style>注意: 插槽的默认值: 在使用 slot 占位的时候, 可以给slot之间包裹内容, 包裹的内容就称为插槽的默认值
默认值的生效规则:
1> 如果没有传, 就会显示默认值, 防止页面空白
2> 如果传入了, 就会用传入的, 替换掉占位的slot, 从而显示实际传入的标签结构
具体代码
3. 具名插槽
1> 什么时候使用具名插槽?
当需要使用多个slot的时候(一个组件内有多处结构不能写死, 需要传入标签进行定制)
2> 使用步骤
1. 先占位: 然后给slot取名: 在多处标签不确定的位置分别用slot占位, 然后给slot添加name属性
2. 再传入: 把组件写成双标签, 通过 template 配合 v-slot:插槽名字, 来区分不同的插槽, 然后发放标签结构(自定义结构)
3. 推荐给具名插槽自定义结构的写法:
<template #插槽名> 想要展示的标签结构 </template>
4. template标签的含义?
它是一个隐形的 div 标签, 它只是用来包裹一段标签结构, 不会出现真实DOM树上
流程
具体代码
App.vue
<script setup>
import MyDialog from './component/MyDialog.vue';
</script>
<!-- template是一个隐形的div(看不见),可以包裹任何标签结构 -->
<template><div><!-- 显示默认值 --><MyDialog /><MyDialog><template v-slot:header>温馨提示</template><template v-slot:body>请输入正确的手机号</template></MyDialog><MyDialog><template v-slot:header>警告</template><template v-slot:body>你确定要退出吗</template></MyDialog><!-- 和slot的name顺序无关 --><MyDialog><template v-slot:body>账号: <input type="text"><br>密码: <input type="password"><br></template><template v-slot:header><h4>登录</h4></template></MyDialog><!-- 简写v-slot: 就相当于# --><MyDialog><template #body>账号: <input type="text"><br>密码: <input type="password"><br></template><template #header><h4>登录</h4></template></MyDialog></div>
</template>
<style scoped></style>MyDialog.vue
4. 作用域插槽
1> 什么是作用域插槽?
带数据的插槽/或者说让插槽带数据
2> 带的什么数据?
对象 -> obj 里面的数据, <template #header = "obj"></template>
3> 带的是谁的数据?
带的是子组件绑定在 slot 标签上的自定义属性
4> 怎么使用这个数据?
通过 obj.属性名 来取值, 然后给子组件传递回去(替代插槽这个占位)
5> 作用域插槽的作用
1. 让组件的结构支持自定义(给组件分发标签)
2. 还能拿到组件带来的数据(这就是让插槽带数据), 收集slot上的携带的所有自定义属性
流程: 在slot上写自定义属性, 然后把值传进去, 在父组件的template v-slot:插槽名(对象名)/#插槽名(对象名),然后在双标签里面使用插值表达式使用对象里面的值,最后把整个<template>替换<slot>标签
具体代码:
App.vue
<script setup>
import MyDialog from './component/MyDialog.vue';
</script>
<!-- template是一个隐形的div(看不见),可以包裹任何标签结构 -->
<template><div><MyDialog><template #body="obj"><!-- 默认接收的数据 obj 是个空对象 --><p>{{ obj }}</p>账号: <input type="text"v-model="obj.account"><br>密码: <input type="password"v-model="obj.password"><br></template><template #header="obj"><h4>登录</h4><!-- <p> {{ obj }}</p> --></template></MyDialog></div>
</template>
<style scoped></style>MyDialog.vue
5. 作用域插槽封装表格组件案例
需求: 让表体内容不是写死的, 是能够发生变化的
封装表格组件: 使用作用域插槽语法
1. 创建 MyTable 组件 , 编写 html + css
2. 表头可以确定, 但是表体每次的数据不一样, 使用父传子,子接父传
3. 操作列的结构需要支持自定义, 这里需要用到插槽
解决子组件数据不确定问题: 用 props 解决 (父传子)
解决子组件标签不确定问题: 用 插槽 解决(让组件结构支持自定义)
实现删除和查看操作
我们实现删除和查看需要获取到列表元素的下标, 此时就可以通过插槽把index传过去
删除
查看
具体代码:
App.vue
<script setup>
import { ref } from 'vue'
import MyTable from './component/MyTable.vue'
const tableData1 = ref([{ id: 11, name: '狗蛋', age: 18 },{ id: 22, name: '⼤锤', age: 19 },{ id: 33, name: '铁棍', age: 17 }
])
const tableData2 = ref([{ id: 21, name: 'Jack', age: 18 },{ id: 32, name: 'Rose', age: 19 },{ id: 43, name: 'Henry', age: 17 }
])
//删除操作
const ondel = (i) => {if (window.confirm("确认删除吗?")) {tableData1.value.splice(i, 1);}
}
//查看按钮
const onDiplay = (i) => {//alter无法直接弹出一个对象, 因此我们就需要序列化一下alert(JSON.stringify(tableData2.value[i]))console.log(tableData2.value[i])
}
</script>
<template><MyTable :data="tableData1"><!-- #default是默认插槽 --><!-- 直接把index解构出来 --><template #default="{ i }"><!-- {{ i }} --><!-- 使用tempalte作为作用域插槽 --><button @click="ondel(i)">删除</button></template></MyTable><MyTable :data="tableData2"><template #default="{ i }"><button @click="onDiplay(i)">查看</button></template></MyTable>
</template>
<style>
body {background-color: #fff;
}
</style>MyTable.vue
<script setup>
const props = defineProps({// 接收父传子的数组: 为了让表格组件的表体数据不确定data: {type: Array,default: () => []}
})
</script>
<template><table class="my-table"><thead><tr><th>序号</th><th>姓名</th><th>年纪</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in props.data" :key="item.id"><td>{{ index + 1 }}</td><td>{{ item.name }}</td><td>{{ item.age }}</td><td><!-- 标签不确定, 此时就使用slot --><!-- 不写 默认会有 name="default" --><slot :i="index"></slot></td></tr></tbody></table>
</template>
<style>
.my-table {width: 450px;text-align: center;border: 1px solid #ccc;font-size: 24px;margin: 30px auto;
}.my-table thead {background-color: #1f74ff;color: #fff;
}.my-table thead th {font-weight: normal;
}.my-table thead tr {line-height: 40px;
}.my-table th,
.my-table td {border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;
}.my-table td:last-child {border-right: none;
}.my-table tr:last-child td {border-bottom: none;
}.my-table button {width: 65px;height: 35px;font-size: 18px;border: 1px solid #ccc;outline: none;border-radius: 3px;cursor: pointer;background-color: #ffffff;margin-left: 5px;
}
</style>三、商品列表案例
需求分析:
1、my-table 表格组件封装
• 动态传递表格数据渲染
• 表头⽀持用户自定义
• 主体⽀持用户自定义
2、my-tag 标签组件封装
• 双击显示输⼊框，输⼊框获取焦点
• 失去焦点，隐藏输⼊框
• 回显标签信息
• 内容修改, 回⻋修改标签信息
1. 封装 MyTable组件 并渲染
1> 创建 MyTable 组件, 静态结构+样式, 在App.vue中使用
2> 让表体的数据支持自定义(不能写死), 通过父传子来解决, 就是使用 props 技术
3> MyTable 收到数据, 并渲染
具体流程
2. 插槽自定义 MyTable 组件
1> 目的: 极大的提高组件的灵活性和复用性
2> 步骤
1. 在 MyTable 内部 用俩对 slot 占位并取名
2. 用 template #插槽名字 来自定义结构
1) 表头是具名插槽
2) 表体是作用域插槽(先给slot 绑定数据 在 template #default = "{row,i}"取值)
具体流程
3. MyTag 组件结构构建
1> 创建 MyTag组建
2> 控制 输入框 和 div 的互斥, 使用响应式数据 isEdit 来控制(默认为false)
3> 绑定双击事件, 双击后isEdit就是 true, div会隐藏, 显示输入框
4> 输入框显示自动聚焦(自定义v-focus), 失去焦点会把isEdit设置为false, 输入框消失, 显示div
4. MyTag 组建的交互效果(绑定v-model)
1> 原理: v-model 绑定在组建上
在组建上写了 v-model ="数据" 等同于下面俩句代码:
1. :modelValue = "数据"
2. @update:modelValue="数据"=$event"
2> 子组件对 v-model 代码的简化
const model = defineModel(), 返回值 model 是一个ref响应式数据, 子组件对其可读可写, 一旦子组件改变了这个 model, 这个值也会同步到父组件中, 从而达到一个双向数据绑定的效果.
具体流程:
具体代码:
main.js
// 按需导入 createApp 函数
import { createApp } from 'vue'
// 导入 App.vue
import App from './App.vue'
// 创建应用
const app = createApp(App)//定义 focus 指令
//自定义指令本质就是做Dom操作
app.directive('focus',{mounted(el){//el是原生的input标签el.focus()}
})
// 指定渲染的位置
app.mount('#app')
App.vue
<script setup>
import { ref } from 'vue'
import MyTable from './component/MyTable.vue';
import MyTag from './component/MyTag.vue';
// 商品列表
const goodsList = ref([{id: 101,picture:'https://tse4-mm.cn.bing.net/th/id/OIP-C.HFiEM_YNtQWOXkIGpZxxrgHaFJ?w=279&h=194&c=7&r=0&o=5&pid=1.7',name: '梨⽪朱泥三绝清代⼩品壶经典款紫砂壶',tag: '茶具'},{id: 102,picture:'https://tse2-mm.cn.bing.net/th/id/OIP-C.6B3rhW9i9ZBPPz9erN769AHaEK?w=255&h=180&c=7&r=0&o=5&pid=1.7',name: '全防⽔HABU旋钮⽜⽪⼾外徒步鞋⼭宁泰抗菌',tag: '男鞋'},{id: 103,picture:'https://tse3-mm.cn.bing.net/th/id/OIP-C.7svYKZAWrIk4Zv4v2TtlZQHaE7?w=252&h=180&c=7&r=0&o=5&pid=1.7',name: '⽑茸茸⼩熊出没，⼉童⽺羔绒背⼼73-90cm',tag: '⼉童服饰'},{id: 104,picture:'https://tse4-mm.cn.bing.net/th/id/OIP-C.LfM5LVy1XmbiF5iYcswRLAHaHa?w=199&h=199&c=7&r=0&o=5&pid=1.7',name: '基础百搭，⼉童套头针织⽑⾐1-9岁',tag: '⼉童服饰'}
])
</script>
<template><MyTable :data="goodsList"><!-- 顺序列数都可以调整 --><template #thead><th>序号</th><th>封面</th><th>名字</th><th>操作</th></template><!-- 解构 --><template #tbody="{ row, i }"><td>{{ i + 1 }}</td><td><img :src="row.picture"></td><td>{{ row.name }}</td><td><MyTag v-model="row.tag"></MyTag></td></template></MyTable>
</template>
<style lang="scss">
#app {width: 1000px;margin: 50px auto;img {width: 100px;height: 100px;object-fit: contain;vertical-align: middle;}td:last-child{width: 150px;}
}
</style>MyTag.vue
<script setup>
import { ref } from 'vue';
const model = defineModel()
//是否处于编辑状态
const isEdit = ref(false)
//双击
const onDbClick=()=>{isEdit.value = true
}
//在输入框上敲击了回车
const onEnter = (e)=>{// 获取输入框的值, 并去除首位空格const tagName = e.target.value.trim()if(tagName){// 如果有值, 需要把这个值同步到父组件中(直接修改model)model.value = tagName}// 敲完会回车不管输入框有没有值, 输入框都要消失isEdit.value = false;
}
</script>
<template><div class="my-tag"><!-- 失去焦点调用blur --><input v-focusv-if="isEdit"class="input" type="text" :value="model"@blur="isEdit=false"placeholder="输⼊标签" @keydown.enter="onEnter"/><div class="text"v-else@dblclick="onDbClick">{{ model }}</div></div>
</template>
<style lang="scss" scoped>
.my-tag {cursor: pointer;.input {appearance: none;outline: none;border: 1px solid #ccc;width: 100px;height: 40px;box-sizing: border-box;padding: 10px;color: #666;&::placeholder {color: #666;}}
}
</style>MyTable.vue
<script setup>
//子接
const props = defineProps({data:{type : Array,default: ()=> []}
})
</script>
<template><table class="my-table"><thead><tr><!-- 标签不能写死, 使用插槽 --><slot name="thead"></slot></tr></thead><tbody><tr v-for="(item,index) in props.data"><!-- 表头不确定, 表体也是不确定的, 也使用插槽 --><slot name="tbody":row="item":i="index"></slot></tr></tbody></table>
</template>
<style lang="scss" scoped>
.my-table {width: 100%;border-spacing: 0;img {width: 100px;height: 100px;object-fit: contain;vertical-align: middle;}t h {background: #f5f5f5;border-bottom: 2px solid #069;}t d {border-bottom: 1px dashed #ccc;}t d,th {text-align: center;padding: 10px;transition: all .5s;&.red {color: red;}}.none {height: 100px;line-height: 100px;color: #999;}
}
</style>总结:
