vue在线运行

作者：▄对对碰发布日期:2025-09-22 浏览:107

<!DOCTYPE html>
<html>
<head>
  <title>Vue 在线运行示例</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>

解释说明：

引入 Vue.js：通过 <script> 标签从 CDN 引入 Vue.js 库。
HTML 结构：定义了一个 div 元素，其 id 为 app，用于挂载 Vue 实例。
Vue 实例：使用 new Vue() 创建一个新的 Vue 实例，并将其挂载到 #app 元素上。data 中定义了一个 message 属性，其值为 'Hello Vue!'。
双大括号语法：在 HTML 中使用 {{ message }} 来显示 Vue 实例中的 message 数据。

这个示例展示了如何在一个简单的 HTML 页面中使用 Vue.js 来实现数据绑定。

上一篇：props vue

下一篇：vue video标签