Vue.js 组件开发知识详解

news/2024/10/10 10:31:29/

在这里插入图片描述

✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页：Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
💞当前专栏：Java案例分享专栏
✨特色专栏：国学周更-心性养成之路
🥭本文内容：Vue.js 组件开发知识详解

文章目录

    • 1、组件的基本结构
    • 2、组件通信
    • 3、组件生命周期
    • 4、计算属性和监听器
    • 5、插槽
    • 6、动态组件
    • 7、过渡和动画
    • 8、组件库和UI框架

在这里插入图片描述

1、组件的基本结构

Vue 组件的基本结构通常包含三个部分：模板 (template)、脚本 (script) 和样式 (style)。

模板 (template)：模板部分定义了组件的结构和布局，通常使用 HTML 语法编写，可以包含 Vue 的模板语法，用来展示数据和交互。在单文件组件 (.vue 文件) 中，模板部分以 <template> 标签包裹。

脚本 (script)：脚本部分包含了组件的逻辑和行为，通常使用 JavaScript 编写，可以包含组件的数据、方法、生命周期钩子等。在单文件组件中，脚本部分以 <script> 标签包裹。

样式 (style)：样式部分定义了组件的外观样式，通常使用 CSS 编写，可以包含组件的样式规则和样式预处理器。在单文件组件中，样式部分以 <style> 标签包裹。

使用单文件组件 (.vue 文件) 可以更好地组织和管理 Vue 组件，提高代码的可维护性和可读性。通过 Vue.component() 方法也可以定义全局或局部的组件，但相比之下，单文件组件更为推荐。单文件组件的结构清晰，每个部分都有明确的作用，有利于团队协作和开发效率。

代码示例

<template><div class="example-component"><h2>{{ message }}</h2><button @click="changeMessage">Change Message</button></div>
</template><script>
export default {data() {return {message: 'Hello, Vue!'};},methods: {changeMessage() {this.message = 'Hello, World!';}}
};
</script><style scoped>
.example-component {background-color: #f0f0f0;padding: 20px;
}h2 {color: blue;
}
</style>

在上面的示例中：

  • <template> 标签定义了组件的模板结构，显示了一个包含标题和按钮的简单组件。
  • <script> 标签包含了组件的逻辑部分，包括数据 (data) 和方法 (methods) 的定义。
  • <style scoped> 标签定义了组件的样式，其中的样式规则只作用于当前组件，不会影响到其他组件。

2、组件通信

在 Vue 中，组件之间的通信可以分为父子组件通信和非父子组件通信两种情况。

父子组件通信：

  • 通过 props 向子组件传递数据：父组件可以通过 props 向子组件传递数据，子组件通过 props 接收数据进行渲染。
  • 通过事件向父组件传递数据：子组件可以通过 $emit 触发事件，并向父组件传递数据。

非父子组件通信：

  • 使用事件总线：可以创建一个空的 Vue 实例作为事件总线，通过 $emit 和 $on 来进行组件间通信。

  • 使用 Vuex 状态管理：Vuex 是 Vue 的状态管理模式，可以在多个组件之间共享状态。

下面是一个简单的示例，演示了父子组件通信和非父子组件通信的方式：

// 父组件 Parent.vue
<template><div><Child :message="parentMessage" @childEvent="handleChildEvent" /></div>
</template><script>
import Child from './Child.vue';export default {data() {return {parentMessage: 'Message from parent'};},components: {Child},methods: {handleChildEvent(data) {console.log('Received data from child:', data);}}
};
</script>// 子组件 Child.vue
<template><div><h2>{{ message }}</h2><button @click="sendDataToParent">Send Data to Parent</button></div>
</template><script>
export default {props: ['message'],methods: {sendDataToParent() {this.$emit('childEvent', 'Data from child');}}
};
</script>

在上面的示例中，父组件通过 props 将数据传递给子组件，子组件通过 $emit 触发事件向父组件传递数据。对于非父子组件通信，可以使用事件总线或 Vuex 状态管理来实现跨组件通信。

3、组件生命周期

Vue 组件的生命周期钩子函数包括 created、mounted、updated、destroyed 等，用于在组件不同阶段执行特定的逻辑。

  • created：在实例被创建之后执行，可以在这个阶段进行数据初始化等操作。
  • mounted：在实例被挂载到 DOM 后执行，可以在这个阶段进行 DOM 操作。
  • updated：在数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之后。
  • destroyed：在实例被销毁时执行，可以在这个阶段进行清理操作，如清除定时器等。

下面是一个简单的示例，演示了组件生命周期钩子函数的使用：

<template><div><h2>{{ message }}</h2></div>
</template><script>
export default {data() {return {message: 'Hello, Vue!'};},created() {console.log('Component created');},mounted() {console.log('Component mounted');},updated() {console.log('Component updated');},destroyed() {console.log('Component destroyed');},methods: {changeMessage() {this.message = 'Hello, World!';}}
};
</script>

在上面的示例中，当组件被创建、挂载、更新和销毁时，对应的生命周期钩子函数会被调用，并在控制台输出相应的信息。开发者可以根据需要在这些生命周期钩子函数中执行特定的逻辑操作，以实现更精细的控制和管理组件的行为。

4、计算属性和监听器

在 Vue 中，可以使用计算属性 (computed) 来根据响应式数据动态计算属性的值，同时也可以使用监听器 (watch) 来监听数据的变化并执行相应的操作。

  • 计算属性 (computed)：计算属性是基于它们的依赖进行缓存的。只有在依赖发生改变时它们才会重新求值。计算属性在模板中以同步属性的方式使用，便于数据的动态计算。

  • 监听器 (watch)：监听器是用来监听数据的变化并执行相应的操作。可以监听一个数据的变化，也可以监听多个数据的变化。当数据发生变化时，可以执行一些异步或复杂的操作。

下面是一个简单的示例，演示了计算属性和监听器的用法：

<template><div><p>Original message: {{ message }}</p><p>Reversed message: {{ reversedMessage }}</p><input v-model="message" placeholder="Enter a message"></div>
</template><script>
export default {data() {return {message: 'Hello, Vue!'};},computed: {reversedMessage() {return this.message.split('').reverse().join('');}},watch: {message(newValue, oldValue) {console.log('Message changed from', oldValue, 'to', newValue);}}
};
</script>

在上面的示例中，reversedMessage 是一个计算属性，根据 message 的值动态计算出反转后的消息。同时，通过 watch 监听了 message 的变化，当 message 发生变化时，会在控制台输出变化前后的值。这样可以方便地对数据的变化进行监控和处理。

5、插槽

在 Vue.js 中，插槽 (slot) 是一种机制，用于在父组件中将内容插入到子组件中指定的位置，从而实现灵活的组件复用和内容分发。

  • 具名插槽：允许父组件在子组件中指定具名插槽的位置，从而插入特定内容。
  • 作用域插槽：允许子组件向父组件传递数据，使得父组件可以在插槽内容中访问子组件的数据。

下面是一个简单的示例，演示了具名插槽和作用域插槽的用法：

// Parent.vue
<template><div><Child><template v-slot:header><h2>This is the header</h2></template><template v-slot:footer><p>This is the footer</p></template><template v-slot:default><p>This is the default content</p></template></Child></div>
</template><script>
import Child from './Child.vue';export default {components: {Child}
};
</script>// Child.vue
<template><div><slot name="header"></slot><slot></slot><slot name="footer"></slot></div>
</template>

在上面的示例中，父组件 Parent 中包含了一个子组件 Child，并在 Child 组件中定义了具名插槽 header、footer 和默认插槽。父组件通过具名插槽的方式向子组件传递内容，并在子组件中指定插槽的位置进行内容分发。这样可以实现灵活的组件复用和内容分发。

6、动态组件

在 Vue 中，动态组件允许在多个组件之间动态切换，从而实现根据条件加载不同的组件。通过使用 元素和动态绑定的方式，可以实现动态组件的切换。同时，可以使用 组件来缓存动态组件的状态，以提高性能。

下面是一个简单的示例，演示了动态组件的切换和使用 缓存组件状态：

<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',components: {ComponentA,ComponentB}};},methods: {toggleComponent() {this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';}}
};
</script>

在上面的示例中，通过点击按钮来切换当前显示的组件，实现了动态组件的切换。使用 元素并动态绑定 :is 属性来实现根据 currentComponent 的值加载不同的组件。同时，使用 组件包裹 ，可以缓存动态组件的状态，避免每次切换组件时重新渲染，提高性能。

7、过渡和动画

在 Vue 中，可以通过过渡系统为组件的进入、离开和列表操作添加过渡效果，从而实现动画效果。Vue 提供了多种方式来实现过渡和动画，包括使用 CSS 过渡、CSS 动画或 JavaScript 钩子函数。

  • CSS 过渡：通过在组件的 CSS 样式中定义过渡效果，实现组件的平滑过渡。
  • CSS 动画：通过在组件的 CSS 样式中定义动画效果，实现更复杂的动画效果。
  • JavaScript 钩子函数：Vue 提供了一些 JavaScript 钩子函数，如 beforeEnter、enter、leave 等，可以在过渡的不同阶段执行自定义的动画逻辑。

下面是一个简单的示例，演示了如何使用 CSS 过渡和 JavaScript 钩子函数来实现动画效果：

<template><div><button @click="toggle">Toggle</button><transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave"><p v-if="show">This is a transition example</p></transition></div>
</template><script>
export default {data() {return {show: false};},methods: {toggle() {this.show = !this.show;},beforeEnter(el) {el.style.opacity = 0;},enter(el, done) {let opacity = 0;const interval = setInterval(() => {opacity += 0.1;el.style.opacity = opacity;if (opacity >= 1) {clearInterval(interval);done();}}, 50);},leave(el, done) {let opacity = 1;const interval = setInterval(() => {opacity -= 0.1;el.style.opacity = opacity;if (opacity <= 0) {clearInterval(interval);done();}}, 50);}}
};
</script><style>
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
</style>

在上面的示例中，通过 组件包裹需要过渡的元素，并定义了过渡的名称为 fade。在 CSS 中定义了过渡效果，同时在 JavaScript 中使用钩子函数 beforeEnter、enter 和 leave 来实现自定义的动画逻辑。点击按钮时，可以看到元素的出现和消失都有渐变的动画效果。

8、组件库和UI框架

使用第三方组件库和 UI 框架可以加速开发过程，同时提供了丰富的组件和样式，帮助开发者快速构建美观的界面。常见的 Vue 第三方组件库和 UI 框架包括 Element UI、Vuetify、Ant Design Vue 等。

下面以 Element UI 为例，演示如何使用第三方组件库来构建界面：

  • 安装 Element UI：首先需要安装 Element UI，可以通过 npm 或 yarn 进行安装。
npm install element-ui
  • 引入 Element UI：在项目中引入 Element UI 的 CSS 和 JS 文件。
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);
  • 使用 Element UI 组件：在 Vue 组件中使用 Element UI 提供的组件。
<template><div><el-button type="primary" @click="handleClick">Click me</el-button><el-dialog :visible.sync="dialogVisible" title="Dialog Title"><p>This is a dialog content</p></el-dialog></div>
</template><script>
export default {data() {return {dialogVisible: false};},methods: {handleClick() {this.dialogVisible = true;}}
};
</script>

在上面的示例中，我们使用了 Element UI 的 el-button 和 el-dialog 组件，实现了一个点击按钮弹出对话框的功能。通过引入 Element UI，我们可以快速使用现成的组件来构建界面，提高开发效率。其他第三方组件库和 UI 框架的使用方式也类似，开发者可以根据项目需求选择合适的组件库来加速开发过程。

  码文不易，本篇文章就介绍到这里，如果想要学习更多Java系列知识，点击关注博主，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的第四栏目：《国学周更—心性养成之路》，学习技术的同时，我们也注重了心性的养成。

在这里插入图片描述


http://www.ppmy.cn/news/1536964.html

相关文章

RCE（remote command/code execute）远程命令注入

RCE（remote command/code execute）远程命令注入

远程命令注入RCE RCE(remote command/code execute&#xff0c;远程命令执行)漏洞&#xff0c;一般出现这种漏洞&#xff0c;是因为应用系统从设计上需要给用户提供指定的远程命令操作的接口&#xff0c;比如我们常见的路由器、防火墙、入侵检测等设备的web管理界面上。一般会给…
阅读更多...
【python机器学习】线性回归 拟合 欠拟合与过拟合 以及波士顿房价预估案例

【python机器学习】线性回归 拟合 欠拟合与过拟合 以及波士顿房价预估案例

文章目录 线性回归之波士顿房价预测案例 欠拟合与过拟合线性回归API 介绍:波士顿房价预测数据属性:机器学习代码实现 拟合 过拟合 欠拟合 模拟 及处理方法(正则化处理)导包定义函数表示欠拟合定义函数表示拟合定义函数表示过拟合 正则化处理过拟合L1正则化L2正则化 线性回归之波…
阅读更多...
数据交换的金钟罩：合理利用安全数据交换系统，确保信息安全

数据交换的金钟罩：合理利用安全数据交换系统，确保信息安全

政府单位为了保护网络不受外部威胁和内部误操作的影响&#xff0c;通常会进行网络隔离&#xff0c;隔离成内网和外网。安全数据交换系统是专门设计用于在不同的网络环境&#xff08;如内部不同网络&#xff0c;内部网络和外部网络&#xff09;之间安全传输数据的解决方案。 使用…
阅读更多...
mysql事务使用和事务隔离级别与sqlserver的比较

mysql事务使用和事务隔离级别与sqlserver的比较

在 MySQL 中&#xff0c;事务 (Transaction) 是一个将一组 SQL 语句作为一个整体执行的机制。事务确保要么所有操作都执行成功&#xff0c;要么在遇到错误时回滚到之前的状态&#xff0c;从而保证数据库数据的一致性和完整性。 事务的四大特性&#xff08;ACID&#xff09; 事…
阅读更多...
【Flutter 面试题】解析 Flutter 与 Native 开发优缺点：跨平台、性能比较、生态成熟度、开发效率、原生功能支持

【Flutter 面试题】解析 Flutter 与 Native 开发优缺点：跨平台、性能比较、生态成熟度、开发效率、原生功能支持

【Flutter 面试题】解析 Flutter 与 Native 开发优缺点：跨平台、性能比较、生态成熟度、开发效率、原生功能支持 文章目录 写在前面口述回答补充说明写在前面 🙋 关于我 ，小雨青年 👉 CSDN博客专家，GitChat专栏作者，阿里云社区专家博主，51CTO专家博主。2023博客之星T…
阅读更多...
系统架构设计师教程 第12章 12.4 信息系统架构案例分析 笔记

系统架构设计师教程 第12章 12.4 信息系统架构案例分析 笔记

12.4 信息系统架构案例分析 ★★★★☆ 12.4.1 价值驱动的体系结构——连接产品策略与体系结构 1.价值模型概述 价值模型核心的特征可以简化为三种基本形式。 (1)价值期望值&#xff1a;表示对某一特定功能的需求&#xff0c;包括功能、质量和不同 级别质量的实用性。 (2)…
阅读更多...
Docker镜像命令汇总笔记

Docker镜像命令汇总笔记

1.Docker镜像 Docker 镜像是用于部署容器化应用的轻量级、可执行的软件包。它们包含了运行特定应用所需的所有内容&#xff0c;包括代码、运行时环境、系统工具、系统库和设置。Docker 镜像通过文件来实现不同层的分发&#xff0c;每一层对应Dockerfile中的一个指令&#xff0…
阅读更多...
YOLO11 实例分割模型做行人分割

YOLO11 实例分割模型做行人分割

实例分割是检测和隔离图像中单个对象的关键技术，YOLO11 是执行这项任务的最佳模型之一。在本文中，你将学习如何使用 YOLO11 分割模型有效地在图像中分割人物。我们将涵盖从设置 Python 环境和安装必要的库，到下载测试图像和可视化分割结果的所有内容。通过本教程的学习，你将…
阅读更多...
最新文章

Copyright @ 2022~2023