Vue3从入门到精通(三)

vue3插槽Slots

在 Vue3 中,插槽(Slots)的使用方式与 Vue2 中基本相同,但有一些细微的差异。以下是在 Vue3 中使用插槽的示例:

// ChildComponent.vue
<template><div><h2>Child Component</h2><slot></slot></div>
</template>
​
// ParentComponent.vue
<template><div><h1>Parent Component</h1><ChildComponent><p>This is the content of the slot.</p></ChildComponent></div>
</template>
​
<script>import { defineComponent } from 'vue'import ChildComponent from './ChildComponent.vue'
​export default defineComponent({name: 'ParentComponent',components: {ChildComponent}})
</script>

在上面的示例中,ChildComponent 组件定义了一个默认插槽,使用 <slot></slot> 标签来表示插槽的位置。在 ParentComponent 组件中,使用 <ChildComponent> 标签包裹了一段内容 <p>This is the content of the slot.</p>,这段内容将被插入到 ChildComponent 组件的插槽位置。

需要注意的是,在 Vue3 中,默认插槽不再具有具名插槽的概念。如果需要使用具名插槽,可以使用 v-slot 指令。以下是一个示例:

// ChildComponent.vue
<template><div><h2>Child Component</h2><slot name="header"></slot><slot></slot><slot name="footer"></slot></div>
</template>
​
// ParentComponent.vue
<template><div><h1>Parent Component</h1><ChildComponent><template v-slot:header><h3>This is the header slot</h3></template><p>This is the content of the default slot.</p><template v-slot:footer><p>This is the footer slot</p></template></ChildComponent></div>
</template>
​
<script>import { defineComponent } from 'vue'import ChildComponent from './ChildComponent.vue'
​export default defineComponent({name: 'ParentComponent',components: {ChildComponent}})
</script>

在上面的示例中,ChildComponent 组件定义了三个插槽,分别是名为 header、默认插槽和名为 footer 的插槽。在 ParentComponent 组件中,使用 <template v-slot:header> 来定义 header 插槽的内容,使用 <template v-slot:footer> 来定义 footer 插槽的内容。默认插槽可以直接写在组件标签内部。

需要注意的是,在 Vue3 中,v-slot 只能用在 <template> 标签上,不能用在普通的 HTML 标签上。如果要在普通 HTML 标签上使用插槽,可以使用 v-slot 的缩写语法 #。例如,<template v-slot:header> 可以简写为 #header

vue3组件生命周期

在 Vue3 中,组件的生命周期钩子函数与 Vue2 中有一些变化。以下是 Vue3 中常用的组件生命周期钩子函数:

  1. beforeCreate: 在实例初始化之后、数据观测之前被调用。

  2. created: 在实例创建完成之后被调用。此时,实例已完成数据观测、属性和方法的运算,但尚未挂载到 DOM 中。

  3. beforeMount: 在挂载开始之前被调用。在此阶段,模板已经编译完成,但尚未将模板渲染到 DOM 中。

  4. mounted: 在挂载完成之后被调用。此时,组件已经被挂载到 DOM 中,可以访问到 DOM 元素。

  5. beforeUpdate: 在数据更新之前被调用。在此阶段,虚拟 DOM 已经重新渲染,并将计算得到的变化应用到真实 DOM 上,但尚未更新到视图中。

  6. updated: 在数据更新之后被调用。此时,组件已经更新到最新的状态,DOM 也已经更新完成。

  7. beforeUnmount: 在组件卸载之前被调用。在此阶段,组件实例仍然可用,可以访问到组件的数据和方法。

  8. unmounted: 在组件卸载之后被调用。此时,组件实例已经被销毁,无法再访问到组件的数据和方法。

需要注意的是,Vue3 中移除了一些生命周期钩子函数,如 beforeDestroydestroyed。取而代之的是 beforeUnmountunmounted

另外,Vue3 中还引入了新的生命周期钩子函数 onRenderTrackedonRenderTriggered,用于追踪组件的渲染过程和触发的依赖项。

需要注意的是,Vue3 推荐使用 Composition API 来编写组件逻辑,而不是依赖于生命周期钩子函数。Composition API 提供了 setup 函数,用于组件的初始化和逻辑组织。在 setup 函数中,可以使用 onBeforeMountonMountedonBeforeUpdateonUpdatedonBeforeUnmount 等函数来替代相应的生命周期钩子函数。

vue3生命周期应用

Vue3 的生命周期钩子函数可以用于在组件的不同生命周期阶段执行相应的操作。以下是一些 Vue3 生命周期的应用场景示例:

  1. beforeCreatecreated:在组件实例创建之前和创建之后执行一些初始化操作,如设置初始数据、进行异步请求等。

export default {beforeCreate() {console.log('beforeCreate hook');// 执行一些初始化操作},created() {console.log('created hook');// 执行一些初始化操作},
};
  1. beforeMountmounted:在组件挂载之前和挂载之后执行一些 DOM 操作,如获取 DOM 元素、绑定事件等。

export default {beforeMount() {console.log('beforeMount hook');// 执行一些 DOM 操作},mounted() {console.log('mounted hook');// 执行一些 DOM 操作},
};
  1. beforeUpdateupdated:在组件数据更新之前和更新之后执行一些操作,如更新 DOM、发送请求等。

export default {beforeUpdate() {console.log('beforeUpdate hook');// 执行一些操作},updated() {console.log('updated hook');// 执行一些操作},
};
  1. beforeUnmountunmounted:在组件卸载之前和卸载之后执行一些清理操作,如取消订阅、清除定时器等。

export default {beforeUnmount() {console.log('beforeUnmount hook');// 执行一些清理操作},unmounted() {console.log('unmounted hook');// 执行一些清理操作},
};

这些示例展示了 Vue3 生命周期钩子函数的一些常见应用场景。根据具体需求,你可以在相应的生命周期钩子函数中执行适当的操作。

vue3动态组件

在 Vue3 中,可以使用动态组件来根据不同的条件或状态动态地渲染不同的组件。使用动态组件可以使应用更加灵活和可扩展。以下是使用动态组件的示例:

  1. 使用 component 元素和 :is 属性来实现动态组件的渲染:

<template><div><component :is="currentComponent"></component><button @click="toggleComponent">Toggle Component</button></div>
</template>
​
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
​
export default {data() {return {currentComponent: 'ComponentA',};},methods: {toggleComponent() {this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';},},components: {ComponentA,ComponentB,},
};
</script>

在上面的示例中,根据 currentComponent 的值动态地渲染 ComponentAComponentB 组件。点击按钮时,切换 currentComponent 的值,从而实现动态组件的切换。

  1. 使用 v-ifv-else 来根据条件渲染不同的组件:

<template><div><component-a v-if="showComponentA"></component-a><component-b v-else></component-b><button @click="toggleComponent">Toggle Component</button></div>
</template>
​
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
​
export default {data() {return {showComponentA: true,};},methods: {toggleComponent() {this.showComponentA = !this.showComponentA;},},components: {ComponentA,ComponentB,},
};
</script>

在上面的示例中,根据 showComponentA 的值使用 v-ifv-else 来渲染 ComponentAComponentB 组件。点击按钮时,切换 showComponentA 的值,从而实现动态组件的切换。

这些示例演示了在 Vue3 中如何使用动态组件来根据条件或状态动态地渲染不同的组件。你可以根据具体需求选择适合的方式来使用动态组件。

vue3组件保持存活

在 Vue3 中,可以使用 <keep-alive> 组件来保持组件的存活状态,即使组件在组件树中被切换或销毁,它的状态仍然会被保留。这对于需要在组件之间共享状态或缓存数据的场景非常有用。以下是使用 <keep-alive> 组件来保持组件存活的示例:

<template><div><button @click="toggleComponent">Toggle Component</button><keep-alive><component :is="currentComponent"></component></keep-alive></div>
</template>
​
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
​
export default {data() {return {currentComponent: 'ComponentA',};},methods: {toggleComponent() {this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';},},components: {ComponentA,ComponentB,},
};
</script>

在上面的示例中,使用 <keep-alive> 组件将 <component> 包裹起来,这样在切换组件时,被包裹的组件的状态将会被保留。点击按钮时,切换 currentComponent 的值,从而切换要渲染的组件。

需要注意的是,被 <keep-alive> 包裹的组件在切换时会触发一些特定的生命周期钩子函数,如 activateddeactivated。你可以在这些钩子函数中执行一些特定的操作,如获取焦点、发送请求等。

<template><div><h2>Component A</h2></div>
</template>
​
<script>
export default {activated() {console.log('Component A activated');// 执行一些操作},deactivated() {console.log('Component A deactivated');// 执行一些操作},
};
</script>

在上面的示例中,当组件 A 被激活或停用时,分别在 activateddeactivated 钩子函数中输出相应的信息。

使用 <keep-alive> 组件可以方便地保持组件的存活状态,并在组件之间共享状态或缓存数据。

vue3异步组件

在 Vue3 中,可以使用异步组件来延迟加载组件的代码,从而提高应用的性能和加载速度。异步组件在需要时才会被加载,而不是在应用初始化时就加载所有组件的代码。以下是使用异步组件的示例:

  1. 使用 defineAsyncComponent 函数来定义异步组件:

<template><div><button @click="loadComponent">Load Component</button><component v-if="isComponentLoaded" :is="component"></component></div>
</template>
​
<script>
import { defineAsyncComponent } from 'vue';
​
const AsyncComponent = defineAsyncComponent(() =>import('./Component.vue')
);
​
export default {data() {return {isComponentLoaded: false,component: null,};},methods: {loadComponent() {this.isComponentLoaded = true;this.component = AsyncComponent;},},
};
</script>

在上面的示例中,使用 defineAsyncComponent 函数来定义异步组件 AsyncComponent。当点击按钮时,设置 isComponentLoadedtrue,并将 component 设置为 AsyncComponent,从而加载异步组件。

  1. 使用 Suspense 组件来处理异步组件的加载状态:

<template><div><Suspense><template #default><component :is="component"></component></template><template #fallback><div>Loading...</div></template></Suspense><button @click="loadComponent">Load Component</button></div>
</template>
​
<script>
import { defineAsyncComponent, Suspense } from 'vue';
​
const AsyncComponent = defineAsyncComponent(() =>import('./Component.vue')
);
​
export default {data() {return {component: null,};},methods: {loadComponent() {this.component = AsyncComponent;},},
};
</script>

在上面的示例中,使用 Suspense 组件来处理异步组件的加载状态。在 default 插槽中,渲染异步组件,而在 fallback 插槽中,渲染加载状态的提示信息。当点击按钮时,加载异步组件。

这些示例演示了在 Vue3 中如何使用异步组件来延迟加载组件的代码。使用异步组件可以提高应用的性能和加载速度,特别是在应用中有大量组件时。

vue3依赖注入

在 Vue3 中,可以使用依赖注入来在组件之间共享数据或功能。Vue3 提供了 provideinject 两个函数来实现依赖注入。

  1. 使用 provide 函数在父组件中提供数据或功能:

<template><div><ChildComponent></ChildComponent></div>
</template>
​
<script>
import { provide } from 'vue';
import MyService from './MyService';
​
export default {setup() {provide('myService', new MyService());},
};
</script>

在上面的示例中,使用 provide 函数在父组件中提供了一个名为 myService 的数据或功能,它的值是一个 MyService 的实例。

  1. 使用 inject 函数在子组件中注入提供的数据或功能:

<template><div><p>{{ message }}</p></div>
</template>
​
<script>
import { inject } from 'vue';
​
export default {setup() {const myService = inject('myService');const message = myService.getMessage();
​return {message,};},
};
</script>

在上面的示例中,使用 inject 函数在子组件中注入了父组件提供的名为 myService 的数据或功能。通过注入的 myService 实例,可以调用其中的方法或访问其中的属性。

通过使用 provideinject 函数,可以在组件之间实现依赖注入,从而实现数据或功能的共享。这在多个组件需要访问相同的数据或功能时非常有用。

vue3应用

Vue3 是一个用于构建用户界面的现代化 JavaScript 框架。它具有响应式数据绑定、组件化、虚拟 DOM 等特性,使得开发者可以更高效地构建交互式的 Web 应用。

下面是一些使用 Vue3 开发应用的步骤:

  1. 安装 Vue3:使用 npm 或 yarn 安装 Vue3 的最新版本。

npm install vue@next
  1. 创建 Vue3 应用:创建一个新的 Vue3 项目。

vue create my-app
  1. 编写组件:在 src 目录下创建组件文件,例如 HelloWorld.vue

<template><div><h1>{{ message }}</h1><button @click="changeMessage">Change Message</button></div>
</template>
​
<script>
import { ref } from 'vue';
​
export default {setup() {const message = ref('Hello, Vue3!');
​const changeMessage = () => {message.value = 'Hello, World!';};
​return {message,changeMessage,};},
};
</script>

在上面的示例中,使用 ref 函数创建了一个响应式的数据 message,并在模板中使用它。通过点击按钮,可以改变 message 的值。

  1. 使用组件:在 App.vue 中使用自定义的组件。

<template><div><HelloWorld></HelloWorld></div>
</template>
​
<script>
import HelloWorld from './components/HelloWorld.vue';
​
export default {components: {HelloWorld,},
};
</script>

在上面的示例中,导入并注册了自定义的 HelloWorld 组件,并在模板中使用它。

  1. 运行应用:在命令行中运行以下命令启动应用。

npm run serve

这将启动开发服务器,并在浏览器中打开应用。

这只是一个简单的示例,你可以根据实际需求编写更复杂的组件和应用逻辑。Vue3 还提供了许多其他功能和工具,如路由、状态管理、单文件组件等,以帮助你构建更强大的应用。

希望这个简单的示例能帮助你入门 Vue3 应用的开发!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/41587.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

借助ollama在linux离线环境上部署大模型

在mac上使用ollama下载并部署想要的模型。在linux上离线安装ollama&#xff1a;ollama离线安装。将mac的ollama的.ollama目录&#xff08;~/.ollama/&#xff09;完整拷贝到linux上&#xff08;/usr/share/ollama/.ollama/&#xff09;&#xff1a;拷贝ollama模型&#xff0c;从…

昇思25天学习打卡营第08天|模型训练

模型训练 模型训练一般分为四个步骤&#xff1a; 构建数据集。定义神经网络模型。定义超参、损失函数及优化器。输入数据集进行训练与评估。 现在我们有了数据集和模型后&#xff0c;可以进行模型的训练与评估。 ps&#xff1a;这里的训练和Stable Diffusion中的训练是一样…

深入理解C#中的文件系统I/O操作

文件系统I/O操作是任何编程语言中的重要组成部分&#xff0c;C#也不例外。无论是读写文件、操作目录&#xff0c;还是处理文件流&#xff0c;C#都提供了丰富且强大的类库来实现这些功能。本文将详细介绍C#中的文件系统I/O操作&#xff0c;并通过代码示例展示如何高效地处理文件…

进程的概念

一.进程和程序的理解 首先抛出结论&#xff1a;进程是动态的&#xff0c;暂时存在于内存中&#xff0c;进程是程序的一次执行&#xff0c;而进程总是对应至少一个特定的程序。 程序是静态的&#xff0c;永久的存在于磁盘中。 程序是什么呢&#xff1f;程序其实就是存放在我们…

图像分类-数据驱动方法

K近邻算法&#xff08;K-Nearest Neighbors&#xff0c;简称KNN&#xff09; KNN算法通过比较新样本与训练集中的样本的距离&#xff0c;然后根据最近的K个邻居的投票结果来决定新样本的分类。 如图所示&#xff0c;K越大的边界会更加平滑&#xff0c;本质上是根据某一样本最近…

红薯小眼睛接口分析与Python脚本实现

文章目录 1. 写在前面2. 接口分析3. 算法脚本实现 【&#x1f3e0;作者主页】&#xff1a;吴秋霖 【&#x1f4bc;作者介绍】&#xff1a;擅长爬虫与JS加密逆向分析&#xff01;Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守并致力于Py…

04.27 - 05.18_111期_Linux_进程间通信

命名管道通信 特点&#xff0c;写端在没有往管道里面写内容时&#xff0c;读端会处于阻塞状态 共享内存 特点&#xff0c;读端在什么时候都可以进行读操作 &#xff0c;拷贝次数少&#xff0c;通信次数快 makefile 中使用g进行编译 要实现将上述两个特点进行融合&#xff…

Microsoft Copilot Studio:定制 AI 解决方案的未来

微软最近为其生成式 AI 和大型语言模型工具套件添加了一项创新功能&#xff0c;即 Copilot Studio。这款新产品在 Microsoft Ignite 2023 大会上亮相&#xff0c;将彻底改变组织与 AI 助手的互动方式。 为每个用户提供定制能力 Copilot Studio 是一款出色的用户友好型平台&am…

【面试题】Reactor模型

Reactor模型 定义 Reactor模型是一种事件驱动的设计模式&#xff0c;用于处理服务请求。它通过将事件处理逻辑与事件分发机制解耦&#xff0c;实现高性能、可扩展的并发处理。Reactor模型适用于高并发、事件驱动的程序设计&#xff0c;如网络服务器等。 特点 事件驱动&#…

递归(三)—— 初识暴力递归之“字符串的全部子序列”

题目1 &#xff1a; 打印一个字符串的全部子序列 题目分析&#xff1a; 解法1&#xff1a;非递归方法 我们通过一个实例来理解题意&#xff0c;假设字符串str “abc”&#xff0c;那么它的子序列都有那些呢&#xff1f;" ", “a”&#xff0c; “b”&#xff0c;…

Vue的民族民俗文化分享平台-计算机毕业设计源码22552

基于Vue的民族民俗文化分享平台设计与实现 摘 要 本文介绍了一种基于Vue.js前端框架和Express后端框架的民族民俗文化分享平台的设计和实现。该平台旨在通过线上方式&#xff0c;促进民族民俗文化的传播与分享&#xff0c;增强公众对多元文化的了解和认同。 平台为普通用户提供…

图论·题解1

原题地址 P3371 【模板】单源最短路径&#xff08;标准版&#xff09; 注意的点&#xff1a; 边有重复&#xff0c;选择最小边&#xff01;对于SPFA算法容易出现重大BUG&#xff0c;没有负权值的边时不要使用&#xff01;&#xff01;&#xff01; 70分代码 朴素板dijsktra…

前后端的导入、导出、模板下载等写法

导入&#xff0c;导出、模板下载等的前后端写法 文章目录 导入&#xff0c;导出、模板下载等的前后端写法一、导入实现1.1 后端的导入1.2 前端的导入 二、基础的模板下载2.1 后端的模板下载-若依基础版本2.2 前端的模板下载2.3 后端的模板下载 - 基于资源文件读取2.4 excel制作…

JVM8为什么要增加元空间 ?

持久代 持久代的大小 为什么移除持久代 &#xff1f; 元空间 元空间的特点&#xff1a; 持久代 持久代中包含了虚拟机中所有可通过反射获取到的数据&#xff0c;比如Class和Method对象。不同的Java虚拟机之间可能会进行类共享&#xff0c;因此持久代又分为只读区和读写区。…

24西安电子科技大学马克思主义学院—考研录取情况

01、马克思主义学院各个方向 02、24马克思主义学院近三年复试分数线对比 PS&#xff1a;马院24年院线相对于23年院线增加15分&#xff0c;反映了大家对于马克思主义理论学习与研究的热情高涨&#xff0c;也彰显了学院在人才培养、学科建设及学术研究等方面的不断进步与成就。 6…

直接更新flowable数据库的流程定义信息的一种方法

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; h…

文章解读与仿真程序复现思路——太阳能学报EI\CSCD\北大核心《绿电交易场景下计及温控负荷的高铁站两阶段调度策略》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

【第21章】MyBatis-Plus多数据源支持

文章目录 前言一、dynamic-datasource1. 特性2. 约定3. 使用方法3.1 引入依赖3.2 配置数据源3.3 使用 DS 切换数据源 二、mybatis-mate1.特性2.使用方法2.1 配置数据源2.2 使用 Sharding 切换数据源2.3 切换指定数据库节点 三、实战1. 引入库2. 配置3. 使用 DS 切换数据源4. 测…

开关电源详解

一、开关电源的概述 1. 定义与简介 开关电源&#xff08;Switched-Mode Power Supply&#xff0c;SMPS&#xff09;是一种通过高频开关器件&#xff08;如晶体管、MOSFET&#xff09;进行电能转换的电源装置。与传统的线性电源相比&#xff0c;开关电源具有转换效率高、体积小…

vue项目打包部署后 浏览器自动清除缓存问题(解决方法)

vue打包部署后 浏览器缓存问题&#xff0c;导致控制台报错ChunkLoadError: Loading chunk failed的解决方案 一、报错如下&#xff1a; 每次build打包部署到服务器上时&#xff0c;偶尔会出现前端资源文件不能及时更新到最新&#xff0c;浏览器存在缓存问题&#xff0c;这时在…