vue3.0快速入门教程

  1. 安装Vue.js

首先，您需要在项目中添加Vue.js。您可以使用以下命令安装：

npm install vue@next
  1. 创建Vue实例

接下来，您需要创建一个Vue实例。这是通过调用Vue构造函数并将一个选项对象传递给它来完成的。选项对象包含组件的数据、模板和方法。

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('')
    }
  },
  template: `
    <div>
      <p>{{ message }}</p>
      <button @click="reverseMessage">Reverse Message</button>
    </div>
  `
})

app.mount('#app')

在这个例子中，我们创建了一个Vue应用程序，其中包含一个数据属性“message”，一个方法“reverseMessage”和一个模板。

  1. 渲染Vue实例

最后，您需要将Vue实例渲染到DOM中。可以使用mount()方法完成：

app.mount('#app')

这将把Vue应用程序挂载到DOM中的一个元素（通常是<div id="app"></div>）中。

现在，当您点击“Reverse Message”按钮时，您应该会看到消息的内容反转。这是一个简单的Vue 3.0示例，用于了解如何创建和渲染Vue实例。
吴秀峰

评论 0