Vue 3 组件基础与模板语法详解


title: Vue 3 组件基础与模板语法详解
date: 2024/5/24 16:31:13
updated: 2024/5/24 16:31:13
categories:

  • 前端开发

tags:

  • Vue3特性
  • CompositionAPI
  • Teleport
  • Suspense
  • Vue3安装
  • 组件基础
  • 模板语法

在这里插入图片描述

Vue 3 简介

1. Vue 3 的新特性

Vue 3引入了许多新的特性,以提高框架的性能和可维护性。下面是一些主要的新特性:

  • Composition API:这是Vue 3中最大的变化之一,它提供了一种更灵活的方式来组织和重用组件的逻辑。
  • Teleport:这是一个新的API,允许我们在组件树中将元素“传送”到其他位置。
  • Suspense:这是一个新的API,允许我们在组件树中等待异步数据加载。
  • Fragment:这是一个新的内置组件,允许我们在组件中渲染多个根节点。
  • v-memo:这是一个新的指令,允许我们在渲染过程中缓存组件的输出。
  • 更快的渲染速度:Vue 3中的渲染器已经重写,提供了更快的渲染速度。

2. 安装与配置

要使用Vue 3,我们需要先安装它。可以使用npm或yarn来安装Vue 3:

npm install vue@next
# or
yarn add vue@next

安装完成后,我们可以在JavaScript中使用Vue 3:

import { createApp } from 'vue'const App = {
data() {
return {
message: 'Hello Vue 3!'
}
}
}const app = createApp(App)
app.mount('#app')

或者在HTML中使用Vue 3:


<script src="https://unpkg.com/vue@next"></script><div id="app">{{ message }}
</div><script>const {createApp} = Vueconst App = {data() {return {message: 'Hello Vue 3!'}}}const app = createApp(App)app.mount('#app')

Vue 3 组件基础

1. 组件的概念

在Vue中,组件是构成应用程序的基本单位。组件是独立的、可复用的Vue实例,具有自己的属性、事件、生命周期钩子等。组件可以看作是页面的最小单位,通过组合这些组件,我们可以构建出复杂的页面。

2. 组件的创建与注册

创建Vue组件的方式有多种,可以通过Vue的构造函数,也可以使用defineComponent函数。

// 使用Vue构造函数
const MyComponent = new Vue({
data() {
return {
message: 'Hello'
}
},
template: '
<div>{{ message }}</div>'
})// 使用defineComponent
const MyComponent = defineComponent({
data() {
return {
message: 'Hello'
}
},
template: '
<div>{{ message }}</div>'
})

注册组件可以通过app.component方法,也可以在组件内部使用components选项。

// 全局注册
const app = createApp({})
app.component('my-component', MyComponent)// 局部注册
const MyApp = createApp({})
MyApp.component('my-component', MyComponent)

3. 组件的数据传递

组件之间的数据传递主要通过propsemit实现。

Props:用于父组件向子组件传递数据。子组件可以通过defineComponentprops选项声明接收的数据。

const MyComponent = defineComponent({
props: {
message: {
type: String,
required: true
}
},
template: '
<div>{{ message }}</div>'
})

Emits:用于子组件向父组件传递数据。子组件可以通过emit方法触发事件,并传递数据。

const MyComponent = defineComponent({
methods: {
sendMessage() {
this.$emit('message', 'Hello from child')
}
},
template: `
<button @click="sendMessage">Send</button>`
})

4. Props和Emits

  • Props是父组件传递给子组件的数据。
  • Emits是子组件发送给父组件的事件。

5. Slots:插槽是Vue提供的一种机制,允许组件的内容被分发到组件的模板中。

// 父组件
<template><MyComponent><template v-slot:default>Default Slot Content</template><template v-slot:other>Other Slot Content</template></MyComponent>
</template>// 子组件
<template><div><slot name="default"></slot><slot name="other"></slot></div>
</template>

6. 组件的生命周期

Vue组件的生命周期包括创建、挂载、更新和销毁四个阶段。每个阶段都有对应的生命周期钩子,可以在这个阶段执行特定的操作。

defineComponent({
created() {
// 组件创建完成后调用
},
mounted() {
// 组件挂载到DOM后调用
},
updated() {
// 组件更新后调用
},
destroyed() {
// 组件销毁后调用
}
})

7. 组件的样式

Vue组件的样式可以通过几种方式来定义:

  • 在组件的<style>标签中定义样式。
  • 使用scoped属性来限制样式的作用域,使其只应用于当前组件。
  • 通过外部CSS文件引入样式。

<style scoped>.my-class {color: red;}
</style>

Vue 3 模板语法

1. 插值表达式 (Interpolation)

在Vue 3中,使用{{ }}包围的表达式会进行数据绑定。例如:

<p>Message: {{ message }}</p>

message的值改变时,页面会自动更新显示。

2. 指令基础

Vue的指令是HTML元素上可以附加的行为。常见的指令有v-bind,v-model, 和v-on

  • v-bind:用于数据绑定,等同于v-bind:attr="expression",如v-bind:class="{ active: isActive }".
  • v-model:用于双向数据绑定,主要用于表单输入,如<input v-model="username">.
  • v-on:用于监听事件,如<button v-on:click="doSomething">Click me</button>.

3. v-bind, v-model, v-on

  • v-bindv-bind:key用于绑定列表元素的唯一标识,v-bind:class用于动态绑定CSS类。
  • v-model:用于数据双向绑定,v-model:value绑定数据,v-model:expression用于计算属性。
  • v-onv-on:click用于绑定点击事件,v-on:input用于监听输入事件。

4. v-for

v-for指令用于渲染数组或对象的每个元素,如:


<ul><li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

5. v-if 与 v-show

  • v-if:条件渲染,当表达式为真时元素会被渲染,为假时会被移除。
  • v-show:条件渲染,无论条件是否满足,元素都会被添加到DOM中,只是通过display属性的noneblock来切换可见性。

6. 计算属性与侦听器

  • 计算属性data对象中的函数,当依赖的propsdata属性改变时,计算属性会自动重新计算。
  • 侦听器watch对象,监听数据的变化,当数据变化时执行回调。
data() {
return {
count: 0
}
},
computed: {
formattedCount() {
return this.count.toLocaleString();
}
},
watch: {
count(newCount) {
console.log('Count has changed:', newCount);
}
}

7. 条件渲染与列表渲染

  • 条件渲染:v-ifv-show用于根据条件展示或隐藏元素。
  • 列表渲染:v-for遍历数组或对象,可以嵌套使用,方便生成动态列表。

8. 事件处理

  • 使用v-on绑定事件,如<button v-on:click="doSomething">Click</button>
  • 可以使用.sync修饰符同步原生事件,如<input v-model.sync="value">

9. 表单输入绑定

  • v-model用于表单输入的双向绑定,如<input type="text" v-model="username">
  • v-model.numberv-model.integer等修饰符用于类型验证。

高级组件开发

1. 动态组件

动态组件允许你在运行时切换组件。要使用动态组件,你可以使用const component = new VueComponent()
创建一个组件实例,然后使用this.$refs.someRef.component = component来替换它。

// 定义一个动态组件
const DynamicComponent = {
template: '
<div>Dynamic Component</div>'
}// 在组件中动态替换组件
new Vue({
el: '#app',
components: {
'dynamic-component': DynamicComponent
},
methods: {
changeComponent() {
this.$refs.dynamicComponent.component = DynamicComponent
}
}
})

2. 异步组件

异步组件是为了减少初始加载时间而设计的。你可以通过返回一个Promise来定义一个异步组件:

const AsyncComponent = () => ({
// 这里可以使用Promise
component: import('./MyComponent'),
loading: LoadingComponent, // 加载中的组件
error: ErrorComponent // 加载错误的组件
})

在组件中使用异步组件:

components: {
'async-component': AsyncComponent
}

3. 递归组件

递归组件是指那些可以调用自身的组件。为了防止无限递归,Vue提供了一个max属性来限制递归深度:

const RecursiveComponent = {
template: `
<div>{{ message }}<recursive-component :max="max - 1" :message="message"></recursive-component>
</div>
`,
props: {
max: {
type: Number,
default: 5
},
message: String
}
}

4. 函数式组件

函数式组件不接受props,也不维护任何实例状态。它们只是返回一个渲染函数:

const FunctionalComponent = () => {
// 函数式组件的逻辑
return
<div>Functional Component</div>
}

在组件中使用函数式组件:

components: {
'functional-component': FunctionalComponent
}

5. 自定义指令

自定义指令允许你定义自己的HTML attribute,这些指令可以应用于任何元素,并且可以绑定不同的行为。

Vue.directive('my-directive', (el, binding, vnode) => {
// 指令的逻辑
})

在组件中使用自定义指令:


<div v-my-directive="someValue"></div>

构建一个简单的博客应用

1. 环境准备

  • 使用 Vue CLI 创建一个新的 Vue.js 项目。
  • 安装所需的依赖,如vue-router用于页面路由,vuex用于状态管理,axios用于 HTTP 请求等。

2. 项目结构

simple-blog/
|-- public/
|-- src/
|   |-- assets/
|   |-- components/
|   |   |-- BlogPost.vue
|   |   |-- Navigation.vue
|   |-- views/
|   |   |-- Home.vue
|   |   |-- PostList.vue
|   |-- App.vue
|   |-- main.js
|-- package.json

3. 实现逻辑

  • Navigation.vue:实现顶部导航栏。
  • Home.vue:实现首页布局。
  • PostList.vue:实现博客文章列表。
  • BlogPost.vue:实现单篇博客文章的展示。
  • main.js:入口文件,创建 Vue 实例,配置路由等。

4. 示例代码

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'new Vue({
router,
render: h => h(App),
}).$mount('#app')
<!-- App.vue -->
<template><div id="app"><Navigation/><router-view/></div>
</template><script>import Navigation from './components/Navigation.vue'export default {components: {Navigation}}
</script>
<!-- Navigation.vue -->
<template><nav><!-- 导航链接 --></nav>
</template>
<!-- PostList.vue -->
<template><div><h1>博客文章列表</h1><ul><li v-for="post in posts" :key="post.id">{{ post.title }}</li></ul></div>
</template><script>export default {data() {return {posts: [] // 从后端 API 获取数据}},created() {// 调用 API 获取文章列表}}
</script>
<!-- BlogPost.vue -->
<template><div><h1>{{ post.title }}</h1><p>{{ post.content }}</p></div>
</template><script>export default {props: {post: Object}}
</script>

5. 运行项目

使用npm run serve命令启动项目,然后访问http://localhost:8080查看效果。

这是一个基本的博客应用,可以根据实际需求继续扩展和优化。

附录

Vue 3 资源推荐

  1. 官方文档:Vue 3 官方文档提供了详尽的指南和 API 参考,是学习 Vue 3 的最佳起点。
  2. Vue Mastery:Vue Mastery提供了许多免费的 Vue 3 教程视频,适合初学者和进阶开发者。
  3. Vue School:Vue School提供了付费的 Vue 3 课程,涵盖从基础到高级的所有内容。
  4. GitHub 仓库:Vue 3 的 GitHub 仓库是查看源代码和贡献代码的好地方。
  5. 社区论坛:Vue.js 论坛是提问和分享经验的好地方。

常见问题解答

  1. 如何升级到 Vue 3?

    • 首先,确保你的项目依赖支持 Vue 3。然后,更新package.json中的 Vue 依赖版本到 3.x。最后,检查并更新你的代码以适应 Vue 3
      的新特性和变化。
  2. Vue 3 和 Vue 2 有什么主要区别?

    • Vue 3 引入了 Composition API,提供了更好的逻辑复用和代码组织方式。此外,Vue 3 在性能上有所提升,包括更快的虚拟 DOM
      和更小的包体积。
  3. 如何在 Vue 3 中使用 Vuex?

    • Vuex 4 是专为 Vue 3 设计的版本。你可以通过安装vuex@next来使用 Vuex 4,并在你的 Vue 3 项目中配置和使用它。
  4. Vue 3 支持 TypeScript 吗?

    • 是的,Vue 3 对 TypeScript 提供了更好的支持。你可以使用 TypeScript 来编写 Vue 3 组件,并利用 Vue 3 的类型声明来提高开发效率。
  5. 如何处理 Vue 3 中的响应式数据?

    • Vue 3 使用refreactive函数来创建响应式数据。ref用于创建单个响应式数据,而reactive用于创建响应式对象。
  6. Vue 3 中的 Teleport 是什么?

    • Teleport 是 Vue 3 中的一个新特性,允许你将组件的内容渲染到 DOM 树的另一个位置,这在创建模态框或弹出菜单时非常有用。
  7. Vue 3 中的 Fragment 是什么?

    • 在 Vue 3 中,组件可以返回多个根节点,这被称为 Fragments。这允许你编写更简洁的模板,而不需要额外的包装元素。
  8. 如何调试 Vue 3 应用程序?

    • 你可以使用浏览器的开发者工具来调试 Vue 3 应用程序。Vue 3 支持 Vue 2 的开发者工具扩展,你可以通过它来检查组件状态和追踪事件。

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

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

相关文章

netmask一键修改子网掩码(KALI工具系列八)

目录 1、KALI LINUX简介 2、netmask工具简介 3、在KALI中使用netmask 3.1 目标主机IP&#xff08;win&#xff09; 3.2 KALI的IP 4、命令示例 4.1 查看版本 4.2 修改etho的子网掩码 4.3 查看状态信息 4.4 查看子网掩码 4.5 查看范围 4.6 DNS查看 5.、总结 1、KAL…

【JavaEE进阶】——一万字带你深刻理解Spring IoCDI

目录 &#x1f6a9;Spring是什么 &#x1f388;什么是容器&#xff1f; &#x1f388;什么是 IoC&#xff1f; &#x1f4dd;传统开发思路 &#x1f4dd;IOC思想 &#x1f4dd;IoC 优势 &#x1f388;DI 介绍 &#x1f6a9;IoC 详解 &#x1f388;Bean的存储 &#x…

Vue2全局封装modal弹框

Vue2全局封装modal弹框使用&#xff1a; 一.components下封装 1.index.js import ModalCheck from ./modal-check.vue export default ModalCheck2.modal-check.vue <template><div><Modalv-model"selSingleShow":title"editTitle(convertCa…

四信云-设备维保管理系统上线,实现设备全生命周期管理

在当今的制造业中&#xff0c;设备是企业生产的核心要素&#xff0c;是企业竞争力的基石。 随着企业发展规模不断扩大&#xff0c;设备数量急速增长&#xff0c;传统的手工管理方式已经无法满足企业需求&#xff0c;设备管理系统的出现则填补了市场需求空白&#xff0c;其目标…

优先级队列(堆)的实现

1.什么是优先级队列 队列是一种先进先出(FIFO)的数据结构&#xff0c;但有些情况下&#xff0c;操作的数据可能带有优先级&#xff0c;一般出队 列时&#xff0c;可能需要优先级高的元素先出队列&#xff0c;该中场景下&#xff0c;使用队列显然不合适&#xff0c;比如&#x…

堆的实现

前言&#xff1a;本文讲述堆实现的几个难点&#xff0c;注意本文主要是以实现为主&#xff0c;建议有些基本概念认识的人阅读。 目录 1.堆 2.堆的实现 堆结构的定义&#xff1a; 要实现的接口&#xff1a; 接口的实现&#xff1a; 堆的初始化和销毁&#xff1a; 向堆中插…

人工智能-YOLOv10-行人和车辆检测-yolo改进测距测速代码和原理

YOLOv10: 实时端到端目标检测技术的全新突破 YOLOv10代表了实时目标检测领域的重大进展&#xff0c;是YOLO系列模型的最新迭代&#xff0c;专为追求极致效率与精度平衡的应用场景设计。此项目由北京大学机器智能研究组&#xff08;THU-MIG&#xff09;的Ao Wang、Hui Chen、Li…

02_前端三大件HTML

文章目录 HTML用于网页结构搭建1. 标签2. 客户端服务器交互流程3. 专业词汇4. html语法细节5. 安装VSCODE安装插件6. Live Server插件使用7. 标题&段落&换行&列表8. 超链接标签使用9. 图片10. 表格的写法11. 表单标签*(重点)12. 下拉框13. 页面布局标签14. 块元素和…

RT-Thread Env开发探索——以HC-SR04超声波传感器为例

RT-Thread Env开发探索——以HC-SR04超声波传感器为例 0.前言一、BSP优化1.修改芯片功能配置2.修改RTT配置菜单 二、软件包加载1.外设配置2.驱动框架配置3.软件包配置 三、编译及运行四、源码分析五、总结 参考文章&#xff1a;RT Thread Env CLion环境搭建 0.前言 对比使用R…

mac下安装airflow

背景&#xff1a;因为用的是Mac的M芯片的电脑&#xff0c;安装很多东西都经常报错&#xff0c;最近在研究怎么把大数据集群上的crontab下的任务都配置到一个可视化工具中&#xff0c;发现airflow好像是个不错的选择&#xff0c;然后就研究怎么先安装使用起来&#xff0c;后面再…

部署LAMP平台

目录 一、LAMP简介与概述 1.1 各组件作用 1.2 LAMP平台搭建时各组件安装顺序 1.3 httpd服务的目录结构 1.4 httpd.conf配置文件 二、编译安装Apache httpd服务 2.1 关闭防火墙&#xff0c;将安装Apache所需软件包传到/opt目录下 2.2 安装环境依赖包 ​2.3 配置软件模块…

基于RK3588的AI边缘计算网关设计

随着物联网和人工智能技术的飞速发展&#xff0c;边缘计算逐渐成为数据处理和分析的重要趋势。RK3588作为一款高性能的处理器&#xff0c;具备强大的计算能力和丰富的接口&#xff0c;为构建AI边缘计算网关提供了有力的支持。本文将介绍基于RK3588的AI边缘计算网关设计&#xf…

【Redis】 关于 Redis 哈希类型

文章目录 &#x1f343;前言&#x1f38b;命令介绍&#x1f6a9;hset&#x1f6a9;hget&#x1f6a9;hexists&#x1f6a9;hdel&#x1f6a9;hkeys&#x1f6a9;hvals&#x1f6a9;hgetall&#x1f6a9;hmget&#x1f6a9;hlen&#x1f6a9;hsetnx&#x1f6a9;hincrby&#x1…

弹性盒子布局,flex布局

弹性盒子布局&#xff08;Flexbox&#xff09;是CSS3引入的一种新的布局模式&#xff0c;它提供了一种更加有效的方式来设计、布局和对齐容器中的项目&#xff0c;即使容器的大小动态改变或者项目的数量未知。 弹性盒子布局的主要特点是能够轻松地在不同的屏幕大小和设备上实现…

使用VCPKG编译并使用Qt5

一、背景 Qt就不介绍了。VCPKG可以看这里VCPKG资料记录_vcpkg boost 多久-CSDN博客 为什么搞Qt5而不是Qt6&#xff1f;因为Qt5比较稳定吧。而且我公司也是用的Qt5。 为什么要自己编译而不是去下载Qt5&#xff1f; 第一&#xff0c;因为Qt5在Qt在线安装版本只提供到Qt5.15.2&…

【CTF Web】CTFShow web3 Writeup(SQL注入+PHP+UNION注入)

web3 1 管理员被狠狠的教育了&#xff0c;所以决定好好修复一番。这次没问题了。 解法 注意到&#xff1a; <!-- flag in id 1000 -->但是拦截很多种字符。 if(preg_match("/or|\-|\\|\*|\<|\>|\!|x|hex|\/i",$id)){die("id error"); }使用…

Linux驱动设备导论(1)

最近本人在学习Linux驱动&#xff0c;本系列教程是本人在一边学习&#xff0c;一边总结的系列教程&#xff0c;希望能够给很多刚学驱动小伙伴一些总结。 1.Linux设备分类 驱动针对的对象是存储器和外设&#xff0c;不是针对CPU&#xff0c;可以分为以下三大类&#xff1a; 1.…

『Stable Diffusion 』AI绘画,不会写提示词怎么办?

提示词 有没有想过&#xff0c;为什么你用 SD 生成的猫是长这样的。 而其他人可以生成这样的猫。 虽然生成的都是猫&#xff0c;但猫与猫之间还是有差距的。 如果你的提示词只是“cat”&#xff0c;那大概率就会出现本文第一张图的那个效果。而如果你加上一些形容词&#xff…

C#应用的用户配置窗体方案 - 开源研究系列文章

这次继续整理以前的代码。本着软件模块化的原理&#xff0c;这次笔者对软件中的用户配置窗体进行剥离出来&#xff0c;单独的放在一个Dll类库里进行操作&#xff0c;这样在其它应用程序里也能够快速的复用该类库&#xff0c;达到了快速开发软件的效果。 笔者其它模块化应用的例…

SQL面试题练习 —— 波峰波谷

来源&#xff1a;字节今日头条 目录 1 题目2 建表语句3 题解 1 题目 有如下数据&#xff0c;记录每天每只股票的收盘价格&#xff0c;请查出每只股票的波峰和波谷的日期和价格&#xff1b; 波峰定义&#xff1a;股票价格高于前一天和后一天价格时为波峰 波谷定义&#xff1a;股…