1024记忆 - 博客园

2022年9月19日

摘要： <KeepAlive> 缓存组件注意：只支持H5端 <KeepAlive include = "" exclude = "" max = ""></KeepAlive> @说明：缓存被包裹的组件先看段动态绑定组件代码： <component :is="activeComponent"></com 阅读全文

posted @ 2022-09-19 14:25 1024记忆阅读(302) 评论(0) 推荐(0)

Vue 组件插槽

摘要：默认插槽的定义与使用  <template> <button> <slot>提交</slot> </button> </template>  <template> <test>保存</test> </template> 具名插槽的定义阅读全文

posted @ 2022-09-19 08:27 1024记忆阅读(324) 评论(0) 推荐(0)

2022年9月17日

Vue 事件修饰符、按键修饰符、鼠标按键修饰符简介

摘要：事件修饰符一、事件可以同时绑定多个修饰符，比如： <a @click.stop.once="doThis"></a> 二、绑定多个修饰符时，有先后顺序且意义可能也不一样，比如： <div @click.prevent.self="..."> ... </div> <div @click.self. 阅读全文

posted @ 2022-09-17 18:03 1024记忆阅读(781) 评论(0) 推荐(0)

VUE小细节杂项整理

摘要：此文档主要整理一些不常用的，且常被遗忘掉的知识点一、${}方法的使用：用于在字符串内绑定数据常规字符串内绑定数据方法： <div :id="'a' + count"></div> 利用${}方法： // 注意：`号不是单引号// ${变量}<div :id="`a${count}`"></div 阅读全文

posted @ 2022-09-17 16:43 1024记忆阅读(100) 评论(0) 推荐(0)

Vue 绑定style简介

摘要：绑定style样式对应HTML 元素的 style 属性，比如要设置字段大小： <div :style="{fontSize: '2rem'}">你好，中国！</div> 样式名称建议采用驼峰写法，但是也可以用 kebab-cased 的形式，比如上例中，也可以写成： <div :style="{' 阅读全文

posted @ 2022-09-17 14:52 1024记忆阅读(591) 评论(0) 推荐(0)

Vue 绑定class的几种形态

摘要： Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。形态一：常规形态 <template> <div :class="className"></div> </template> <script setup> const className = 'text-pri 阅读全文

posted @ 2022-09-17 14:34 1024记忆阅读(528) 评论(0) 推荐(0)

Vue nextTick(callback) 简介

摘要： nextTick() 响应式数据变化之后，并不是立刻同步更新DOM视图。nextTick()函数可以取响应式数据变化之后的视图。 nextTick(callback) @说明：响应式数据变化后，等待其更新视图。这样就能获取最新的DOM内容 @参数： callback [可选] 回调函数 @返回：无阅读全文

posted @ 2022-09-17 11:46 1024记忆阅读(280) 评论(0) 推荐(0)

2022年9月16日

Vue onActivated()、onDeactivated() 被<KeepAlive>缓存组件的生命周期

摘要： onActivated()、onDeactivated() 当组件被<KeepAlive>组件缓存时，会触发这二个生命周期。比如: <KeepAlive><test></test></KeepAlive> ，此时test组件具有这二个生命周期这二个生命周期。执行顺序依次： onActivated 阅读全文

posted @ 2022-09-16 15:24 1024记忆阅读(3729) 评论(0) 推荐(0)

Vue onBeforeUpdate()、onUpdated() 组件视图更新生命周期钩子

摘要： onBeforeUpdate()、onUpdated() 这二个生命周期。执行顺序依次： onBeforeUpdate() 》 onUpdated() 使用前需要被引入： import { onBeforeUpdate, onUpdated } from 'vue' onBeforeUpdate() 阅读全文

posted @ 2022-09-16 15:08 1024记忆阅读(3072) 评论(0) 推荐(0)

Vue onBeforeMount()、onMounted() 、onBeforeUnmount()、onUnmounted() 组件挂载、卸载生命周期钩子

摘要： onBeforeMount()、onMounted() 、onBeforeUnmount()、onUnmounted() 这四个生命周期分别应在组件的挂载、卸载时触发。执行顺序依次： onBeforeMount() 》 onMounted() 》 onBeforeUnmount() 》 onUnmo 阅读全文

posted @ 2022-09-16 10:00 1024记忆阅读(8967) 评论(0) 推荐(0)