程序员scholar
  • Vue全家桶
  • Vue2
scholar
2024-07-29
目录

Vue 基础使用

# Vue 基础使用

# 1. 基本使用步骤

使用 Vue 的基本步骤如下：

  1. 导入 Vue.js 的 script 脚本文件：通过引入 Vue.js 库，使其在页面中可用。
  2. 声明一个将要被 Vue 所控制的 DOM 区域：在 HTML 页面中指定一个 DOM 元素，让 Vue 实例来控制这个元素及其子元素。
  3. 创建 Vue 实例对象（Vue 实例对象）：通过实例化 Vue，绑定数据模型和视图，使其具有响应式。

# 2. 基本代码与 MVVM 的对应关系

MVVM 是 Vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel，它把每个 HTML 页面都拆分成了这三个部分，如图所示：

MVVM 对应关系

  • Model：数据模型，表示数据层。
  • View：视图层，表示用户界面。
  • ViewModel：视图模型层，是 MVVM 的核心，负责连接 Model 和 View。

下面是一个基本的 Vue 示例代码及其在 MVVM 中的对应关系：

<!DOCTYPE html>
<html>
<head>
  <title>Vue 示例</title>
  <!-- 导入 Vue.js 的 script 脚本文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <!-- 声明一个将要被 Vue 所控制的 DOM 区域 -->
  <div id="app">
    {{ message }} <!-- 这里的 message 会被 Vue 实例中的 data.message 替换 -->
  </div>

  <!-- 创建 Vue 实例对象 -->
  <script>
    // 创建一个新的 Vue 实例
    new Vue({
      el: '#app', // 绑定的 HTML 元素的 id，这个 Vue 实例会控制 id 为 'app' 的 DOM 区域
      data: {
        message: 'Hello Vue!' // 绑定的数据，这里的 message 会自动替换页面中的 {{ message }}
      }
    });
  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 2-1. 导入 Vue.js 的 script 脚本文件

通过 CDN 引入 Vue.js：

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
1

# 2-2. 声明一个将要被 Vue 所控制的 DOM 区域

在 HTML 中创建一个带有 id="app" 的 <div> 元素，Vue 实例将控制该元素：

<div id="app">
  {{ message }} <!-- Vue 实例中的 message 数据将替换这里的内容 -->
</div>
1
2
3

# 2-3. 创建 Vue 实例对象

通过 new Vue 创建一个 Vue 实例，绑定数据和视图：

new Vue({
  el: '#app', // 绑定的 HTML 元素的 id
  data: {
    message: 'Hello Vue!' // Vue 实例中的数据，自动与视图绑定
  }
});
1
2
3
4
5
6

# 3. el 与 data 的两种写法

# 3-1. el 的两种写法

Vue 实例的 el 属性用于指定 Vue 实例控制的 DOM 元素，有两种方式可以定义 el 属性。

# 1.1 在创建 Vue 实例时配置 el 属性

这种方法在创建 Vue 实例时就指定了控制的 DOM 元素，需要在创建 Vue 实例时立即决定绑定的元素。

new Vue({
  el: '#app',  // 直接在创建 Vue 实例时配置 el 属性
  data: {
    message: 'Hello Vue!'
  }
});
1
2
3
4
5
6

在上面的代码中，el 属性直接在 Vue 实例创建时配置，指定了控制的 DOM 容器 #app。

# 1.2 先创建 Vue 实例，再通过 $mount 方法指定 el 的值

这种方法先创建 Vue 实例，再通过 vm.$mount('#root') 方法手动挂载实例，灵活性更高。

const vm = new Vue({
  data: {
    message: 'Hello Vue!'
  }
});

// 在稍后时间再手动挂载实例
vm.$mount('#app');
1
2
3
4
5
6
7
8

在上面的代码中，Vue 实例先创建，然后通过 vm.$mount('#app') 方法手动指定控制的 DOM 容器。

# 3-2. data 的两种写法

Vue 实例的 data 属性用于存储应用的数据，有两种写法：对象式和函数式。

# 2.1 对象式写法

对象式写法直接在 data 属性中定义数据对象，适用于简单的 Vue 实例。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
1
2
3
4
5
6

在上面的代码中，data 属性是一个对象，包含了数据 message。

# 2.2 函数式写法

函数式写法通过一个返回数据对象的函数定义 data，这种方法适用于组件，保证每个组件实例有独立的数据对象。

new Vue({
  el: '#app',
  data: function() {  // 使用函数返回数据对象
    return {
      message: 'Hello Vue!'
    };
  }
});
1
2
3
4
5
6
7
8

在上面的代码中，data 属性是一个函数，返回一个数据对象。函数内的 this 指向 Vue 实例。

# 2.3 如何选择

目前在创建简单的 Vue 实例时，两种写法都可以使用。但在组件中，data 必须使用函数式写法，因为每个组件实例需要独立的数据对象。如果组件使用对象式写法，所有组件实例会共享同一个数据对象，导致数据污染和状态混乱。

总结：

  • 对象式写法：适用于简单的 Vue 实例，数据共享。
  • 函数式写法：适用于组件，数据独立。

使用示例：

// 对象式写法（适用于简单 Vue 实例）
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

// 函数式写法（适用于组件）
new Vue({
  el: '#app',
  data: function() {
    return {
      message: 'Hello Vue!'
    };
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 4. Vue 的调试工具

# 4-1. 安装 vue-devtools 调试工具

Vue 官方提供的 vue-devtools 调试工具，可以方便开发者对 Vue 项目进行调试与开发。

# 4-2. 配置 Chrome 浏览器中的 vue-devtools

在 Chrome 浏览器中进行如下配置，以便更好地使用 vue-devtools：

  1. 点击 Chrome 浏览器右上角的按钮。
  2. 选择更多工具 -> 扩展程序。
  3. 找到 Vue.js devtools 的详细信息，并勾选如下的两个选项：

Chrome 浏览器配置

# 4-3. 使用 vue-devtools 调试 Vue 页面

在浏览器中访问一个使用了 Vue 的页面，打开浏览器的开发者工具，切换到 Vue 面板，即可使用 vue-devtools 调试当前的页面。

Vue 面板调试

编辑此页 (opens new window)
上次更新: 2025/01/30, 23:55:43
Vue简介
Vue的基础指令

← Vue的基础指令→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar