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

于 2024-05-24 16:49:34 发布
阅读量420 收藏 9
点赞数 4
分类专栏： 好用的工具集合 文章标签： 模板语法 组件基础 Vue3安装 Suspense Teleport CompositionAPI Vue3特性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42210428/article/details/139178882
版权

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} = Vue

  const 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. 组件的数据传递

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

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

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-bind：v-bind:key用于绑定列表元素的唯一标识，v-bind:class用于动态绑定CSS类。
  • v-model：用于数据双向绑定，v-model:value绑定数据，v-model:expression用于计算属性。
  • v-on：v-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属性的none或block来切换可见性。

6. 计算属性与侦听器

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

7. 条件渲染与列表渲染

  • 条件渲染：v-if和v-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.number或v-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 使用ref和reactive函数来创建响应式数据。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 的开发者工具扩展，你可以通过它来检查组件状态和追踪事件。
qcidyu
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 模版介绍
qq_43806604的博客
01-08 3012
Vue3 - Vite - TypeScript Vite ：下一代前端开发与构建工具 基于原生 ES-Module 的前端构建工具 ES-Module 代码模块化的语言规范 快速冷启动 即使的模块热更新 按需编译 TypeScript：JavaScript的一个超集 TS入门教程 面向对象设计和编程遵循的几个原则： SOLID原则： SRP(Single Responsibility Principle) 单一职责原则； OCP(Open Closed Principle) 开/闭原则； LSP
vue3---组件基础(上)保姆级篇
qq_61950936的博客
08-15 9235
关于 vue3 基础学习，前面两篇博客讲了单页面应用程序、vite 的基本使用。这期就来一篇多一点的吧！这期主要内容有：组件化开发思想、vue 组件的构成、组件的基本使用、封装组件的案例。看完这些，砸门也就详细了解什么是组件了。废话不多说，直接上刺刀！！组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。ibootstrap - Bootstrap可视化布局系统所展示的效果，就契合了组件化开发的思想。.........
vue3——(模板应用，组件)
最新发布
gu644335363的博客
04-28 678
在 Setup 函数中，可以访问 props、context、attrs 等属性，并且直接返回需要的数据和方法，这样可以使得组件的结构更加清晰和简洁。Vue3 引入了 Teleport 功能，可以让组件在 DOM 上的任何位置渲染，这样可以避免一些布局上的问题，比如弹窗组件在父组件中嵌套太多层导致样式混乱等。详细分析：Vue3支持使用 Fragments，允许模板中直接使用多个根元素，而无需包裹在父元素中，使得模板组织更加灵活，代码更加简洁。当数据属性的值发生变化时，Vue会自动加载对应的组件。
Vscode快速生成Vue3组件模板
LuLuke_lucky的博客
03-12 2384
1：首先在vscode编辑器中打开，【文件】–>【首选项】–>【用户片段】–>【新代码片段】–> 取名vue.json 确定 2：复制下列代码，只要在.vue文件下输入vue3回车即可生成模板 { "Print to console": { "prefix": "vue3", "body": [ "<template>", " <div></div>", "</template>", "", "
【Vue3】Vue的组件
早睡早起长头发的博客
08-16 454
一、组件的创建 1.创建组件的模板 2.注册组件 二、组件中数据和事件的传递 1.给组件添加外部属性 2.处理组件事件
Vue组件模板
Sky的博客
03-23 661
<template> <div> </div> </template> <script> // 这里导入其它文件 组件，工具，json文件，js插件， //import 组件名称 from ' 组件路径' // import { defineComponent } from '@vue/composition-api' export default { //import 引入的组件需要注入到对象中才能使用 c
VUE 自定义组件模板的方法详解
10-16
主要介绍了VUE 自定义组件模板的方法,结合实例形式详细分析了vue.js自定义组件模板的相关步骤与操作技巧,需要的朋友可以参考下
Vue.js的模板语法详解
10-15
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。这篇文章重点给大家介绍Vue.js的模板语法，感兴趣的朋友跟随小编一起看看吧
Vue动态组件与异步组件实例详解
10-17
主要介绍了Vue动态组件与异步组件,结合实例形式分析了动态组件与异步组件相关概念、功能及使用技巧,需要的朋友可以参考下
Vue多组件仓库开发与发布详解
10-17
${componentName}
vue3.0 搭建项目模板
mdd996735325的博客
10-12 1005
vue3.0 入门搭建项目
vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件
weixin_33736832的博客
04-28 109
vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件 一、定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3>我是标题3</h3>' }); Vue.component('aaa',Aaa); *组件里面放数据: data必须是函数...
vue系列（三）——手把手教你搭建一个vue3管理后台基础模板
xxfen_的博客
07-02 1万+
手把手教你搭建一个vue3管理后台基础模，附带源代码
vitejs vue3全局模板组件注册
u010994219的专栏
06-20 727
全局组件注册
开箱即用，这些 Vue3 后台管理系统模板绝对让你爽歪歪！
热门推荐
唐先森的博客
09-02 5万+
之前写了一篇关于 Vue2 的后台管理系统模板的推荐，详情请见。Vue3 在今年2月份已成为新的默认版本，本文收集了一些 Vue3 的后台管理系统模板，分享给在座的仌 👣。还是老规矩，按照星标数量来依次介绍。
极简但是很全的vue3+vite+pinia项目模板，开箱即用
qq_37167086的博客
05-27 4131
极简vue3+vite+pinia项目模板
Vue3组件
weixin_44211097的博客
10-27 2924
一、通过 Prop 向子组件传递数据 我们使用组件时，如果模板中的内容都固定不变，那么每个模块引入该组件的内容都将一致；其实我们也可以不这样，比如我们可以将组件的某些内容变为动态的，内容由父元素的传值决定，vue给我们提供了props属性，让我们的组件可以对子组件传值。 单向数据流 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。 ..
vue3组件模板
05-26
Vue 3的组件模板与Vue 2的有些许不同，以下是一个简单的Vue 3组件模板： ```html <template> <div> <!-- 组件内容 --> </div> </template> <script> import { defineComponent } from 'vue'; export default defineComponent({ name: 'MyComponent', props: { // 组件属性 }, setup(props) { // 组件逻辑 } }); </script> <style scoped> /* 组件样式 */ </style> ``` 在Vue 3中，我们使用`defineComponent`来定义组件，通过`props`来接收外部传入的属性，通过`setup`函数来编写组件逻辑。同时，Vue 3也支持使用`<script setup>`标签来编写组件逻辑，使得组件模板更加简洁。 另外，`<style scoped>`表示该组件样式只在当前组件中生效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值