Vue.js 实例

在本章中,我们将介绍如何创建一个简单的 Vue.js 实例,并且展示如何在页面中渲染数据和响应用户的操作。

创建 Vue 实例

要创建一个 Vue 实例,首先需要引入 Vue.js 库文件,并在页面中添加一个容器元素,用来挂载 Vue 实例。

--------- -----
----- ----------
------
  ----- ----------------
  ----- --------------- ---------------------------- -------------------
  ------------- ----------
-------
------
  ---- ---------
    -- ------- --
  ------

  ------- ------------------------------------------------------------
  --------
    --- --- - --- -----
      --- -------
      ----- -
        -------- ------- --------
      -
    ---
  ---------
-------
-------

在上面的示例中,我们创建了一个 Vue 实例,并将其挂载到 id 为 app 的元素上。在 data 选项中定义了一个名为 message 的属性,并在页面中使用双花括号语法 {{ }} 来显示该属性的值。

数据绑定

Vue.js 提供了双向数据绑定的功能,可以轻松地将数据与页面元素进行关联。下面是一个简单的示例,演示了如何通过输入框来改变 message 的值。

---- ---------
  ------ ----------- ------------------
  ----- ------- ------
------

--------
  --- --- - --- -----
    --- -------
    ----- -
      -------- ------- --------
    -
  ---
---------

在上面的示例中,我们使用了 v-model 指令将输入框和 message 属性进行了绑定,当输入框的值发生改变时,message 的值也会相应地更新。

通过以上示例,你已经了解了如何创建一个简单的 Vue.js 实例,并且学会了如何在页面中渲染数据和响应用户的操作。在接下来的章节中,我们将深入探讨 Vue.js 的更多功能和用法。


上一篇:Vue.js 响应接口