随笔分类 - VUE
摘要：引入 '@dcloudio/uni-app' 库，代码如下： import { onResize } from '@dcloudio/uni-app';
阅读全文
摘要：一、父组件设置子组件的样式： 一般情况下子组件内部负责各自样式。不过在很多场合里，我们也会要求父组件来修改子组件默认样式。 父组件可以通过传入class样式修改有限的样式，或者通过:deep深度修改子组件内部样式。 （在uni-app单文件中，通过在父组件中定义全局样式，无法实现修改。） 子组件 <
阅读全文
摘要：uni-app 支持如下页面生命周期函数： 文档：https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle 函数名说明平台差异说明最低版本 onInit 监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Obje
阅读全文
摘要：状态管理 Pinia 此功能和VUEX类似，局有全站通用状态共享的特性。 在 HBuilder X 下不需要安装，直接使用即可，步骤如下： 第一步：在 main.js 中引入插件： import { createSSRApp } from 'vue'; import * as Pinia from
阅读全文
摘要：<TransitionGroup>动画过渡组件 用于v-for列表中元素或组件的插入、移动、顺序改变的过渡效果。 它应用于对象不是根元素，而是所有子元素，且所有子元素必需指定key属性。 它和属性、用法和<Transition>基本相同，不同的是过渡效果对象差异。 <TransitionGroup>
阅读全文
摘要：Vue 组合式函数：export导出一个函数。函数内可以定义生命周期勾子、数据及方法，它是可复用的模块。类似Mixin 混入。但比Mixin更有优势。 组合式函数示例： useDemo.js import { ref, onMounted } from 'vue' export function a
阅读全文
摘要：<Transition>动画过渡组件 可在组件或元素显示、隐藏时产生过渡效果。 触发条件： v-if v-show 动态组件component的切换 注意事件： 1、<Transition> 仅支持单个元素或组件作为其插槽内容。如果内容是一个组件，这个组件必须仅有一个根元素,且根元素是templat
阅读全文
摘要：<Teleport> 传递组件 注意：uni-app中不支持！ @说明：将组件内的一部份模板传送到组件外层对象上，且不影响整个组件逻辑。 <Teleport to="" display=""></Teleport> 属性： to [必需 String | HTMLElement] 指定目标容器。可以
阅读全文
摘要：<KeepAlive> 缓存组件 注意：只支持H5端 <KeepAlive include = "" exclude = "" max = ""></KeepAlive> @说明：缓存被包裹的组件 先看段动态绑定组件代码： <component :is="activeComponent"></com
阅读全文
摘要：默认插槽的定义与使用 <!-- 组件 test 定义 --> <template> <button> <slot>提交</slot> </button> </template> <!-- 父组件调用 --> <template> <test>保存</test> </template> 具名插槽的定义
阅读全文
摘要：事件修饰符 一、事件可以同时绑定多个修饰符，比如： <a @click.stop.once="doThis"></a> 二、绑定多个修饰符时，有先后顺序且意义可能也不一样，比如： <div @click.prevent.self="..."> ... </div> <div @click.self.
阅读全文
摘要：此文档主要整理一些不常用的，且常被遗忘掉的知识点 一、${}方法的使用：用于在字符串内绑定数据 常规字符串内绑定数据方法： <div :id="'a' + count"></div> 利用${}方法： // 注意：`号不是单引号// ${变量}<div :id="`a${count}`"></div
阅读全文
摘要：绑定style样式对应HTML 元素的 style 属性，比如要设置字段大小： <div :style="{fontSize: '2rem'}">你好，中国！</div> 样式名称建议采用驼峰写法，但是也可以用 kebab-cased 的形式，比如上例中，也可以写成： <div :style="{'
阅读全文
摘要：Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。 形态一：常规形态 <template> <div :class="className"></div> </template> <script setup> const className = 'text-pri
阅读全文
摘要：nextTick() 响应式数据变化之后，并不是立刻同步更新DOM视图。nextTick()函数可以取响应式数据变化之后的视图。 nextTick(callback) @说明：响应式数据变化后，等待其更新视图。这样就能获取最新的DOM内容 @参数： callback [可选] 回调函数 @返回：无
阅读全文
摘要：onActivated()、onDeactivated() 当组件被<KeepAlive>组件缓存时，会触发这二个生命周期。 比如: <KeepAlive><test></test></KeepAlive> ，此时test组件具有这二个生命周期 这二个生命周期。执行顺序依次： onActivated
阅读全文
摘要：onBeforeUpdate()、onUpdated() 这二个生命周期。执行顺序依次： onBeforeUpdate() 》 onUpdated() 使用前需要被引入： import { onBeforeUpdate, onUpdated } from 'vue' onBeforeUpdate()
阅读全文
摘要：onBeforeMount()、onMounted() 、onBeforeUnmount()、onUnmounted() 这四个生命周期分别应在组件的挂载、卸载时触发。执行顺序依次： onBeforeMount() 》 onMounted() 》 onBeforeUnmount() 》 onUnmo
阅读全文
摘要：effectScope() 官方解释：创建一个 effect 作用域，可以捕获其中所创建的响应式副作用 (即计算属性和侦听器)，这样捕获到的副作用可以一起处理。 个人理解：叫它 侦听管家 更形象。 通俗的说，它可以把计算属性、监听器放在一个函数内管理，然后统一停止监听。 代码示例： // 定义侦听管
阅读全文
摘要：shallowReadonly() 说明：浅层次只读。其第二层及其以下可读写。 const state = shallowReadonly({ foo: 1, nested: { bar: 2 } }) // 更改状态自身的属性会失败 state.foo++ // ...但可以更改下层嵌套对象 is
阅读全文
