创建vue2实例

陵小宇

在 Vue.js 中创建一个基本的实例涉及几个步骤。这里，我将使用 Vue 2 的语法为你展示如何创建一个简单的 Vue 实例。如果你使用 Vue 3，步骤会稍有不同，但整体概念相似。

下面是创建一个基础 Vue 实例的完整 HTML 文件示例：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Simple Vue Instance</title>
    <!-- 引入 Vue.js 通过 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    </head>
    <body>
    
    <div id="app">
      <h1>{{ message }}</h1>
    </div>
    
    <script>
      // 创建一个新的 Vue 实例
      new Vue({
        el: '#app', // 指定挂载点为 id 为 app 的元素
        data: {
          message: 'Hello Vue!' // 定义数据对象，并初始化一个 message 属性
        }
      });
    </script>
    
    </body>
    </html>

步骤解释：

引入 Vue.js：

我们通过 CDN 引入 Vue.js。这是最快捷的方式来开始使用 Vue，无需设置复杂的开发环境。

HTML 结构：

我们定义一个有 id="app"的 div 元素作为 Vue 实例的挂载点。

创建 Vue 实例：

使用 new Vue()创建一个 Vue 实例。

el属性用于指定这个 Vue 实例将要控制的 DOM 元素。在这里，它将控制 id为 app的元素。

data对象包含了实例的数据。在这个例子中，我们定义了一个 message属性，并初始化为字符串 "Hello Vue!"。

当页面加载时，Vue 实例会自动将 {{ message }}替换为 data对象中 message的值，显示为 "Hello Vue!"。

这个例子展示了 Vue 的一些基础功能，如响应式数据绑定。当你更新 data中的 message值时，DOM 会自动更新以反映新的值。这使得开发动态网页应用变得简单高效。

下一篇: vue2插值表达式