vue3 js 方式实现学习时长正向计数器 时分秒转秒 秒转时分秒
摘要：//学习时长 const Locktime = ref('00:00:00'); const timeAlarmTWO = ref(null); const hour = ref(0); const minute = ref(0); const second = ref(10); const rec
阅读全文
posted @
2024-03-01 22:07
wuzx-blog
阅读(188)
推荐(0) 编辑
19：vue3 依赖注入
摘要：1、通过Prop 逐级透传问题（传统老的方法只能逐级传递） 传统方式代码如下： App.vue 1 <template> 2 <h3>祖宗</h3> 3 <Parent :msg="msg"></Parent> 4 </template> 5 6 <script> 7 import Parent f
阅读全文
posted @
2023-07-12 11:33
wuzx-blog
阅读(63)
推荐(0) 编辑
18：vue3 异步加载
摘要：在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了 defineAsyncComponent 方法来实现此功能： 1 <template> 2 <h3>异步加载</h3> 3 <KeepAlive> 4 <component :is="tabCompon
阅读全文
posted @
2023-07-11 17:43
wuzx-blog
阅读(118)
推荐(0) 编辑
17：vue3 组件保持存活状态
摘要：<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例 1、不使用KeepAlive，组件不保持存活，验证如下： A组件 1 <template> 2 <h3>ComponentA</h3> 3 <p>{{ message }}</p> 4 <button @c
阅读全文
posted @
2023-07-11 17:28
wuzx-blog
阅读(116)
推荐(0) 编辑
16：vue3 动态组件
摘要：A组件 1 <template> 2 <h3>ComponentA</h3> 3 </template> B组件 1 <template> 2 <h3>ComponentB</h3> 3 </template> App.vue 1 <template> 2 <h3>动态组件(A、B两个组件动态切换)
阅读全文
posted @
2023-07-11 17:05
wuzx-blog
阅读(86)
推荐(0) 编辑
15：vue3 组件生命周期函数应用
摘要：1 <template> 2 <h3>组件生命周期函数应用</h3> 3 <!--验证Dom结构加载时机--> 4 <p ref="name">我的内容</p> 5 <!--模拟网络加载数据--> 6 <ul> 7 <li v-for="(item,index) in banner" :key="i
阅读全文
posted @
2023-07-11 16:12
wuzx-blog
阅读(22)
推荐(0) 编辑
14：vue3 生命周期（生命周期钩子）
摘要：每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。 生命周期函数 创建期：beforeCreate created 挂载期
阅读全文
posted @
2023-07-07 14:52
wuzx-blog
阅读(75)
推荐(0) 编辑
13：vue3 插槽 slot
摘要：1、插槽基础知识 用Parent.vue，导入SlotBase.vue组件 1 <template> 2 <SlotBase> 3 <div> 4 <h3>插槽标题</h3> 5 <p>插槽内容</p> 6 </div> 7 </SlotBase> 8 </template> 9 10 <scrip
阅读全文
posted @
2023-07-07 14:14
wuzx-blog
阅读(56)
推荐(0) 编辑
12：vue3 组件事件（子传父 ）
摘要：1、触发与监听事件（子传父this.$emit） Parent.vue 1 <template> 2 <h3>Parent父组件</h3> 3 <Child @parentEvent="parentEventHandle"></Child> 4 <p>子组件传递的数据：{{ message }}</
阅读全文
posted @
2023-07-07 10:59
wuzx-blog
阅读(196)
推荐(0) 编辑
11：vue3 组件传递数据 Props（父传子）
摘要：1、父子组件通过Props传递数据，数据可以为固定数据，也可以多个数据，也可以动态数据 新建Parent.vue组件 1 <template> 2 <h3>Parent</h3> 3 <Child gd_title="Parent传固定数据" gd_title2="传递第二个参数" :dt_titl
阅读全文
posted @
2023-07-05 21:48
wuzx-blog
阅读(1172)
推荐(0) 编辑
10：vue3 组件注册方式（全局注册和局部注册）
摘要：组件注册方式 一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。 全局注册 将09节课程的Header组件进行全局注册演练 在main.js中添加Header.vue组件的注册 1 import { createApp
阅读全文
posted @
2023-07-05 15:39
wuzx-blog
阅读(1437)
推荐(0) 编辑
09： vue3 组件嵌套关系
摘要：组件嵌套关系 组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构： 这和我们嵌套 HTML 元素的方式类似，Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。 创建组件及引用关系 项目中新建pa
阅读全文
posted @
2023-07-05 15:03
wuzx-blog
阅读(882)
推荐(0) 编辑
08：vue3 组件基础
摘要：定义一个组件 在components文件夹下新建MyComponent.vue组件 写入下面代码 1 <script> 2 export default { 3 data() { 4 return { 5 count: 0 6 } 7 } 8 } 9 </script> 10 11 <templat
阅读全文
posted @
2023-07-05 13:45
wuzx-blog
阅读(19)
推荐(0) 编辑
07： vue3 侦听器
摘要：1 <template> 2 <p>{{ message }}</p> 3 <button @click="updateHandle()">修改数据</button> 4 </template> 5 6 <script> 7 export default{ 8 data(){ 9 return{ 1
阅读全文
posted @
2023-07-04 16:01
wuzx-blog
阅读(21)
推荐(0) 编辑
04： vue3 列表渲染
摘要：1、简单绑定 2、复杂数据模拟json 3、遍历对象 5、位置索引 6、通过 key 管理状态 最理想情况key值还是通过后台接口获取的唯一主键id
阅读全文
posted @
2023-07-04 15:54
wuzx-blog
阅读(11)
推荐(0) 编辑
03 ：vue3 条件渲染
摘要：1 <template> 2 <h1>条件渲染</h1> 3 4 <P>1、v-if v-else 示例：</P> 5 <div v-if="flag">你能看见我么，if</div> 6 <div v-else>那你还是看看我吧，else</div> 7 8 <p>2、v-else-if 示例：<
阅读全文
posted @
2023-07-04 09:47
wuzx-blog
阅读(19)
推荐(0) 编辑
02：vue3 模版语法
摘要：1、将vue-demo项目清理为空 （1）index.html 不动 （2）main.js删除样式引用 （3）App.vue只保留template和script （4）清空文件夹assets和components 2、模版语法 （1）文本插值 打开App.vue写一下代码 1 <template>
阅读全文
posted @
2023-06-30 15:56
wuzx-blog
阅读(32)
推荐(0) 编辑
01：vue3 开发前准备
摘要：（1）需要安装nodeJs版本16.0或以上版本 以下是2023年6月30日官方文档截图 （2）查看你的电脑里node版本 通过cmd命令查看 node -v查看是否大于等于16 （3） 创建vue项目 注意：vue项目的命名不能用大写字母，只能小写字母，创建的项目名会以文件夹的方式呈现 创建命令：
阅读全文
posted @
2023-06-30 11:45
wuzx-blog
阅读(269)
推荐(0) 编辑
