Vue3基础标签及使用实例

引言

Vue.js 是一个流行的前端 JavaScript 框架，用于构建用户界面和单页面应用程序。Vue3 是 Vue.js 的第三个主要版本，它带来了许多改进和新特性。本文将详细介绍 Vue3 的基础标签及其使用实例，帮助开发者快速上手。

这是 Vue3 中最核心的标签，它用于定义组件的结构和模板。

<template>
  <div id="app">
    <h1>Hello, Vue3!</h1>
  </div>
</template>

用于编写组件的逻辑代码，包括数据定义、方法声明、计算属性和侦听器。

<script>
  export default {
    data() {
      return {
        message: 'Hello, Vue3!'
      };
    }
  }
</script>

用于定义组件的样式，可以内联或通过外部文件引入。

<style>
  #app {
    text-align: center;
    font-size: 24px;
  }
</style>

用于在单页面应用程序中渲染路由匹配的组件。

<router-view></router-view>

用于创建路由导航链接，类似于 HTML 中的 `` 标签。

<router-link to="/about">About</router-link>

使用 Vue3 的 `v-bind` 指令可以绑定数据到 DOM 元素上。

<div v-bind:title="message">Hover over me</div>

使用 `v-if` 和 `v-else` 指令可以实现条件渲染。

<div v-if="seen">Now you see me</div>
    <div v-else>Now you don't</div>

使用 `v-for` 指令可以遍历数组或对象，渲染列表。

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

使用 `v-on` 或简写 `@` 指令可以绑定事件监听器。

<button v-on:click="reverseMessage">Reverse Message</button>

本文介绍了 Vue3 的基础标签及其使用实例，包括模板、脚本、样式、路由等。希望这些内容能够帮助开发者快速上手 Vue3，构建强大的前端应用程序。