wuzx-blog - 博客园

2023年7月11日

摘要： 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 阅读(100) 评论(0) 推荐(0)

15：vue3 组件生命周期函数应用

摘要： 1 <template> 2 <h3>组件生命周期函数应用</h3> 3  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 阅读(38) 评论(0) 推荐(0)

2023年7月7日

14：vue3 生命周期（生命周期钩子）

摘要：每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。生命周期函数创建期：beforeCreate created 挂载期阅读全文

posted @ 2023-07-07 14:52 wuzx-blog 阅读(99) 评论(0) 推荐(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 阅读(74) 评论(0) 推荐(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 阅读(230) 评论(0) 推荐(0)

2023年7月5日

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 阅读(1362) 评论(0) 推荐(0)

10：vue3 组件注册方式（全局注册和局部注册）

摘要：组件注册方式一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。全局注册将09节课程的Header组件进行全局注册演练在main.js中添加Header.vue组件的注册 1 import { createApp 阅读全文

posted @ 2023-07-05 15:39 wuzx-blog 阅读(1700) 评论(0) 推荐(0)

09： vue3 组件嵌套关系

摘要：组件嵌套关系组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构：这和我们嵌套 HTML 元素的方式类似，Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。创建组件及引用关系项目中新建pa 阅读全文

posted @ 2023-07-05 15:03 wuzx-blog 阅读(961) 评论(0) 推荐(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 阅读(30) 评论(0) 推荐(0)

2023年7月4日

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 阅读(30) 评论(0) 推荐(0)