5.2.1 基本用法-Vue.js从入门到精通(二)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(二)

### 5.2.1 基本用法

在Vue.js的广阔世界里，掌握其基础用法是通往精通之路的第一步。本章“5.2.1 基本用法”将带你深入了解Vue.js的核心概念与基本构建块，包括Vue实例的创建、模板语法、数据绑定、指令、事件处理以及生命周期钩子等。通过这一章的学习，你将能够构建简单的Vue应用，并理解Vue.js是如何工作的。

#### 5.2.1.1 Vue实例的创建

Vue.js应用是通过创建Vue实例来启动的。每个Vue实例都会管理一个DOM区域，我们称之为“挂载点”。Vue实例包含了应用的所有数据、模板、逻辑等。

```javascript
// 引入Vue库
import Vue from 'vue';

// 创建一个Vue实例
new Vue({
  el: '#app', // 指定挂载点，这里是id为app的DOM元素
  data: {
    message: 'Hello Vue!' // 定义数据
  }
});
```

在上述代码中，`el`属性指定了Vue实例将要管理的DOM元素的ID，而`data`属性则包含了Vue实例的响应式数据。Vue.js的响应式系统能够自动追踪数据的变化，并在数据改变时更新DOM。

#### 5.2.1.2 模板语法

Vue.js使用基于HTML的模板语法，允许你声明式地将DOM绑定到底层Vue实例的数据上。模板语法包括插值表达式（用于文本内容）、指令（用于添加特殊的HTML属性）等。

- **插值表达式**：使用双大括号`{{ }}`包裹的表达式会被替换为数据对象的属性值。

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

- **指令**：Vue.js提供了一系列内置指令，用于在模板中声明式地绑定和监听DOM。最常用的是`v-bind`和`v-model`，分别用于响应式地更新HTML属性以及创建双向数据绑定。

```html
  <div id="app">
    
    <a v-bind:href="url">链接</a>
    
    <a :href="url">链接</a>

<input v-model="inputValue" placeholder="输入内容">
  </div>
  ```

#### 5.2.1.3 数据绑定

Vue.js的核心特性之一是数据绑定，它允许我们声明式地将数据渲染进DOM的模板中。Vue.js通过其响应式系统实现数据的双向绑定，这意味着当数据变化时，视图会自动更新；同时，视图的变化也可以反映回数据。

除了上述的插值表达式和`v-model`指令外，Vue还提供了`v-bind`用于单向数据绑定（从数据到DOM），以及通过`.sync`修饰符（在某些组件属性上）实现伪双向绑定。

#### 5.2.1.4 指令

Vue.js的指令（Directives）是带有`v-`前缀的特殊属性。指令属性的值预期是单个JavaScript表达式（`v-for`是例外情况）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM上。

- **v-if**、**v-else-if**、**v-else**：用于条件性地渲染元素。
- **v-for**：基于一个数组来渲染一个列表。
- **v-show**：根据表达式之真假值，切换元素的`display` CSS属性。
- **v-on**：监听DOM事件，并在触发时执行一些JavaScript代码。简写为`@`。
- **v-pre**：跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。
- **v-cloak**：这个指令保持在元素上直到关联实例结束编译。和CSS规则如`[v-cloak] { display: none }`一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。

#### 5.2.1.5 事件处理

Vue.js允许你监听DOM事件，并在触发时执行JavaScript代码。监听事件可以使用`v-on`指令或`@`符号简写。

```html
<div id="app">
  
  <button v-on:click="greet">点击我</button>
  
  <button @click="greet">点击我</button>
</div>

在Vue实例的`methods`选项中定义了`greet`方法，当按钮被点击时，该方法会被调用。

#### 5.2.1.6 生命周期钩子

Vue实例从创建到销毁的过程中，会触发一系列的生命周期钩子（也称为生命周期事件或生命周期回调）。这些钩子提供了在不同阶段执行代码的机会。

- **beforeCreate**：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
- **created**：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
- **beforeMount**：在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
- **mounted**：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果根实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
- **...**（省略了其他生命周期钩子，如`beforeUpdate`、`updated`、`beforeDestroy`、`destroyed`等）

这些钩子允许我们在Vue实例的不同阶段执行自定义逻辑，比如数据加载、DOM操作等。

### 结语

通过本章“5.2.1 基本用法”的学习，你应该已经对Vue.js的核心概念和基本用法有了深入的理解。从Vue实例的创建到模板语法的使用，再到数据绑定、指令、事件处理以及生命周期钩子的掌握，这些基础知识将为你后续学习更高级的Vue.js特性打下坚实的基础。记住，实践是检验真理的唯一标准，不妨动手尝试编写一些简单的Vue.js应用，以加深对这些概念的理解。

该分类下的相关小册推荐：

VUE组件基础与实战

TypeScript和Vue从入门到精通(三)

Vue3技术解密

TypeScript和Vue从入门到精通(一)

TypeScript和Vue从入门到精通(五)

TypeScript和Vue从入门到精通(四)

Vue.js从入门到精通(三)

移动端开发指南

TypeScript和Vue从入门到精通(二)

vue项目构建基础入门与实战

vuejs组件实例与底层原理精讲

Vue.js从入门到精通(四)