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实例包含了应用的所有数据、模板、逻辑等。

// 引入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属性）等。

插值表达式：使用双大括号{{ }}包裹的表达式会被替换为数据对象的属性值。
```
<div id="app">
  
  <p>{{ message }}</p>
</div>
```

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

<div id="app">
  <!-- 使用v-bind指令绑定属性 -->
  <a v-bind:href="url">链接</a>
  <!-- 简写形式 -->
  <a :href="url">链接</a>
  <!-- 使用v-model创建双向数据绑定（常用于表单元素） -->
  <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指令或@符号简写。

<div id="app">
  <!-- 使用v-on监听点击事件 -->
  <button v-on:click="greet">点击我</button>
  <!-- 简写形式 -->
  <button @click="greet">点击我</button>
</div>
<script>
new Vue({
  el: '#app',
  methods: {
    greet: function () {
      alert('Hello!');
    }
  }
});
</script>

在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应用，以加深对这些概念的理解。