vue3 html

作者：开阔蓝天uだ发布日期:2026-01-14 浏览:38

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3 HTML Example</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          message: 'Hello Vue 3!'
        };
      }
    }).mount('#app');
  </script>
</body>
</html>

解释说明：

HTML结构:
- 使用标准的HTML5文档结构。
- 在<body>中创建一个<div>元素，其id为app，用于挂载Vue应用。
引入Vue3:
- 通过<script>标签从CDN引入Vue 3库。
Vue应用:
- 使用createApp函数创建一个新的Vue应用实例。
- data函数返回一个对象，包含一个名为message的属性，其值为'Hello Vue 3!'。
- 最后使用mount方法将Vue应用挂载到具有id="app"的DOM元素上。
双大括号语法:
- {{ message }}用于在模板中显示data中的message属性的值。

上一篇：vue3 ref调用子组件方法

下一篇：vue样式