vue html

作者：寂寞味道发布日期:2026-05-29 浏览:11

<!DOCTYPE html>
<html>
<head>
  <title>Vue HTML Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    // 创建一个 Vue 实例
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    });
  </script>
</body>
</html>

解释说明：

HTML 部分:
- {{ message }} 是 Vue 的双大括号语法，用于将数据绑定到 HTML 中。这里会显示 data 对象中的 message 属性值。
引入 Vue.js:
- 通过 <script> 标签从 CDN 引入 Vue.js 库，确保在页面中可以使用 Vue。
创建 Vue 实例:
- 使用 new Vue() 创建一个新的 Vue 实例。
- el: '#app' 指定 Vue 实例管理的 DOM 元素是 ID 为 app 的元素。
- data 定义了 Vue 实例的数据对象，其中包含 message 属性，初始值为 'Hello Vue!'。

这样，当页面加载时，Vue 会将 message 的值渲染到页面中，显示为 "Hello Vue!"。

上一篇：vue element ui

下一篇：vue3 引入组件