Vue2向Vue3过度核心技术自定义指令 港控/mmm° 2024-03-24 21:48 98阅读 0赞 #### 目录 #### * * 1 自定义指令 * * 1.指令介绍 * 2.自定义指令 * 3.自定义指令语法 * 4.指令中的配置项介绍 * 5.代码示例 * 6.总结 * 2 自定义指令-指令的值 * * 1.需求 * 2.语法 * 3.代码示例 * 3 自定义指令-v-loading指令的封装 * * 1.场景 * 2.需求 * 3.分析 * 4.实现 * 5.准备代码 -------------------- ### 1 自定义指令 ### ![在这里插入图片描述][1f1173466b9b4db08f3333441eea0069.png] #### 1.指令介绍 #### * 内置指令:**v-html、v-if、v-bind、v-on**… 这都是Vue给咱们内置的一些指令,可以直接使用 * 自定义指令:同时Vue也支持让开发者,自己注册一些指令。这些指令被称为**自定义指令** 每个指令都有自己各自独立的功能 #### 2.自定义指令 #### 概念:自己定义的指令,可以**封装一些DOM操作**,扩展额外的功能 #### 3.自定义指令语法 #### * 全局注册 //在main.js中 Vue.directive('指令名', { "inserted" (el) { // 可以对 el 标签,扩展额外功能 el.focus() } }) * 局部注册 //在Vue组件的配置项中 directives: { "指令名": { inserted () { // 可以对 el 标签,扩展额外功能 el.focus() } } } * 使用指令 注意:在使用指令的时候,一定要**先注册**,**再使用**,否则会报错 使用指令语法: v-指令名。如: **注册**指令时**不用**加**v-前缀**,但**使用时**一定要**加v-前缀** #### 4.指令中的配置项介绍 #### inserted:被绑定元素插入父节点时调用的钩子函数 el:使用指令的那个DOM元素 #### 5.代码示例 #### 需求:当页面加载时,让元素获取焦点(**autofocus在safari浏览器有兼容性**) App.vue <div> <h1>自定义指令</h1> <input v-focus ref="inp" type="text"> </div> #### 6.总结 #### 1.自定义指令的作用是什么? 2.使用自定义指令的步骤是哪两步? ### 2 自定义指令-指令的值 ### #### 1.需求 #### 实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色 #### 2.语法 #### 1.在绑定指令时,可以通过“等号”的形式为指令 绑定 具体的参数值 <div v-color="color">我是内容</div> 2.通过 binding.value 可以拿到指令值,**指令值修改会 触发 update 函数** directives: { color: { inserted (el, binding) { el.style.color = binding.value }, update (el, binding) { el.style.color = binding.value } } } #### 3.代码示例 #### App.vue <template> <div> <!--显示红色--> <h2 v-color="color1">指令的值1测试</h2> <!--显示蓝色--> <h2 v-color="color2">指令的值2测试</h2> <button> 改变第一个h1的颜色 </button> </div> </template> <script> export default { data () { return { color1: 'red', color2: 'blue' } } } </script> <style> </style> ### 3 自定义指令-v-loading指令的封装 ### #### 1.场景 #### 实际开发过程中,发送请求需要时间,在请求的数据未回来时,页面会处于**空白状态** => 用户体验不好 #### 2.需求 #### 封装一个 v-loading 指令,实现加载中的效果 #### 3.分析 #### 1.本质 loading效果就是一个蒙层,盖在了盒子上 2.数据请求中,开启loading状态,添加蒙层 3.数据请求完毕,关闭loading状态,移除蒙层 #### 4.实现 #### 1.准备一个 loading类,通过伪元素定位,设置宽高,实现蒙层 2.开启关闭 loading状态(添加移除蒙层),本质只需要添加移除类即可 3.结合自定义指令的语法进行封装复用 .loading:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff url("./loading.gif") no-repeat center; } #### 5.准备代码 #### <template> <div class="main"> <div class="box"> <ul> <li v-for="item in list" :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=""> </div> </li> </ul> </div> </div> </template> <script> // 安装axios => yarn add axios || npm i axios import axios from 'axios' // 接口地址:http://hmajax.itheima.net/api/news // 请求方式:get export default { data () { return { list: [], isLoading: false, isLoading2: false } }, async created () { // 1. 发送请求获取数据 const res = await axios.get('http://hmajax.itheima.net/api/news') setTimeout(() => { // 2. 更新到 list 中,用于页面渲染 v-for this.list = res.data.data }, 2000) } } </script> <style> .loading:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff url('./loading.gif') no-repeat center; } .box2 { width: 400px; height: 400px; border: 2px solid #000; position: relative; } .box { width: 800px; min-height: 500px; border: 3px solid orange; border-radius: 5px; position: relative; } .news { display: flex; height: 120px; width: 600px; 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> [1f1173466b9b4db08f3333441eea0069.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/373bb0cb3e1a4355bdd41f0f8f92e09b.png
相关 Vue2向Vue3过度核心技术综合案例 目录 1 面经基础版-案例效果分析 1.面经效果演示 2.功能分析 3.实现思路分析:配置路由 曾经终败给现在/ 2024年03月24日 21:50/ 0 赞/ 95 阅读
相关 Vue2向Vue3过度核心技术声明式导航 目录 1 声明式导航-导航链接 1.需求 2.解决方案 3.通过router-link自带的两 本是古典 何须时尚/ 2024年03月24日 21:49/ 0 赞/ 85 阅读
相关 Vue2向Vue3过度核心技术插槽 目录 1 插槽-默认插槽 1.作用 2.需求 3.问题 4.插槽的基本语 Love The Way You Lie/ 2024年03月24日 21:48/ 0 赞/ 84 阅读
相关 Vue2向Vue3过度核心技术组件通信 目录 1 组件基础知识scoped解决样式冲突 1.1 默认情况: 1.2 代码演示 1.3 浅浅的花香味﹌/ 2024年03月24日 21:37/ 0 赞/ 90 阅读
相关 Vue2向Vue3过度核心技术生命周期 目录 1 Vue生命周期 2 Vue生命周期钩子 3 生命周期钩子小案例 1.1 在created中发送数据 小灰灰/ 2024年03月24日 21:35/ 0 赞/ 83 阅读
相关 Vue2向Vue3过度核心技术watch侦听器 目录 1 watch侦听器 1.1 作用: 1.2 语法: 1.3 侦听器代码准备 以你之姓@/ 2024年03月24日 21:33/ 0 赞/ 59 阅读
还没有评论,来说两句吧...