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

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

### 5.1.1 基本用法：Vue.js的核心概念与实践

在《Vue.js从入门到精通(二)》的这本技术书籍中，我们深入探索Vue.js的进阶应用之前，首先需要巩固并深入理解其基础与核心——基本用法。这一章节将引领你掌握Vue.js的基本构建块，包括实例创建、模板语法、指令系统、数据绑定以及组件的基础使用，为后续的复杂应用开发打下坚实的基础。

#### 5.1.1.1 Vue.js简介与安装

**Vue.js概述**：Vue.js是一个用于构建用户界面的渐进式JavaScript框架。它以其轻量级、易上手、高性能的特点，迅速在前端开发领域占据了一席之地。Vue.js的设计初衷是让开发者能够以数据为中心，通过简洁的API实现响应式的数据绑定和组合的视图组件。

**安装Vue.js**：Vue.js的安装非常灵活，可以通过多种方式集成到你的项目中。对于小型项目或学习目的，你可以直接在HTML文件中通过`<script>`标签引入Vue.js的CDN链接。对于大型项目，推荐使用npm或yarn等包管理器进行安装，以便利用模块化和构建工具（如Webpack）来优化你的项目。

```html

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

#### 5.1.1.2 创建Vue实例

Vue.js的核心是通过Vue函数来创建一个新的Vue实例，这个实例将管理一个DOM元素及其子元素。Vue实例有一个选项对象，用于定义数据、模板、挂载元素、方法、计算属性等。

```javascript
var app = new Vue({
  el: '#app', // 挂载点
  data: {
    message: 'Hello Vue!' // 数据对象
  }
});
```

在上述代码中，`el`属性指定了Vue实例将要管理的DOM元素（通过CSS选择器），而`data`属性则定义了Vue实例将要响应式地管理的数据对象。

#### 5.1.1.3 模板语法

Vue.js使用基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。模板的核心是声明式的渲染数据到DOM的系统。

- **插值**：使用双大括号`{{ }}`进行文本插值，数据绑定会更新DOM以匹配Vue实例中的数据。
  
  ```html
  <span>{{ message }}</span>
  ```

- **指令**：Vue.js的特殊HTML属性，以`v-`前缀开头，用于在模板中提供响应式数据绑定、DOM操作等能力。
  
  ```html
  <p v-if="seen">现在你看到我了</p>
  ```

#### 5.1.1.4 常用指令

Vue.js提供了一系列内置指令，用于实现各种DOM操作和数据绑定。以下是一些常用的指令：

- **v-bind**：用于响应式地更新HTML属性。简写为`:`。
  
  ```html
  <a v-bind:href="url">{{ linkText }}</a>
  
  <a :href="url">{{ linkText }}</a>
  ```

- **v-model**：在表单输入和应用状态之间创建双向数据绑定。
  
  ```html
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
  ```

- **v-on**：用于监听DOM事件，并在触发时执行一些JavaScript代码。简写为`@`。
  
  ```html
  <button v-on:click="reverseMessage">Reverse Message</button>
  
  <button @click="reverseMessage">Reverse Message</button>
  ```

- **v-if**、**v-else-if**、**v-else**：条件渲染指令，根据表达式的真假值来渲染元素。
  
  ```html
  <p v-if="type === 'A'">A</p>
  <p v-else-if="type === 'B'">B</p>
  <p v-else>Not A/B</p>
  ```

- **v-for**：基于一个数组来渲染一个列表。
  
  ```html
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item.text }}</li>
  </ul>
  ```

#### 5.1.1.5 计算属性与侦听器

**计算属性**：当某些数据需要根据其他数据动态计算时，使用计算属性而非方法。计算属性是基于它们的响应式依赖进行缓存的。

```javascript
computed: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('');
  }
}
```

**侦听器**：当需要在数据变化时执行异步或开销较大的操作时，使用侦听器。

```javascript
watch: {
  message: function (newVal, oldVal) {
    this.updatedMessage = newVal;
    // 执行其他操作...
  }
}
```

#### 5.1.1.6 组件基础

Vue.js的组件系统是构建大型应用的基石。组件允许你将UI分割成独立、可复用的部分，并包含各自的逻辑。

- **注册组件**：全局注册或局部注册。
  
  ```javascript
  Vue.component('my-component', {
    // 选项...
  });

// 或在Vue实例中局部注册
  var app = new Vue({
    el: '#app',
    components: {
      'my-component': {
        // 选项...
      }
    }
  });
  ```

- **组件模板**：可以是单文件组件（`.vue`文件）、字符串模板或DOM元素。

- **父子组件通信**：通过`props`向子组件传递数据，通过事件（`$emit`）向父组件发送消息。

- **插槽（Slot）**：允许内容分发到组件模板中的指定位置。

#### 5.1.1.7 总结

通过本章的学习，你应该已经掌握了Vue.js的基本用法，包括如何创建Vue实例、使用模板语法进行数据绑定、利用指令实现DOM操作、通过计算属性和侦听器处理复杂逻辑、以及组件的基础使用。这些基础知识是进一步深入学习Vue.js不可或缺的基石。在接下来的章节中，我们将继续探讨Vue.js的高级特性，如路由管理、状态管理、组件化开发等，帮助你成为一名Vue.js的精通者。

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

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

Vue源码完全解析

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

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

VUE组件基础与实战

Vue3技术解密

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

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

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

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

Vue原理与源码解析

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