Vue.js 基础知识

Vue.js 是一个流行的 JavaScript 框架，用于构建交互式的 web 应用程序。它采用了 MVVM（Model-View-ViewModel）架构模式，使开发者能够更轻松地管理和维护代码。

安装 Vue.js

要开始使用 Vue.js，首先需要在项目中安装 Vue.js。可以通过 CDN 或 npm 来安装 Vue.js。

通过 CDN 安装 Vue.js

在 HTML 文件中引入 Vue.js 的 CDN 链接：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

通过 npm 安装 Vue.js

在命令行中运行以下命令来通过 npm 安装 Vue.js：

npm install vue

创建 Vue 实例

在使用 Vue.js 之前，需要先创建一个 Vue 实例。通过以下代码可以创建一个简单的 Vue 实例：

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js!'
  }
});

在上面的代码中，el 属性指定了 Vue 实例挂载的元素，data 属性用来定义数据。

数据绑定

Vue.js 提供了双向数据绑定的功能，可以将数据动态地绑定到 HTML 元素上。例如，可以通过以下方式将 message 数据绑定到一个 <p> 元素上：

<div id="app">
  <p>{{ message }}</p>
</div>

事件处理

Vue.js 也支持事件处理。可以通过 v-on 指令来监听 DOM 事件，并在事件发生时执行相应的方法。例如，可以通过以下代码在点击按钮时改变 message 数据：

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

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

以上就是 Vue.js 的基础知识，接下来我们将深入学习 Vue.js 的更多功能和特性。