### Vue.js 基础详解
#### 一、Vue的核心概念
##### 1. 数据驱动 (MVVM 模型)
Vue.js 的核心理念之一是数据驱动。它采用 MVVM（Model-View-ViewModel）架构模式，其中 ViewModel 作为桥梁连接 Model 和 View。这意味着开发者只需关注数据（Model）的变化，而无需直接操作 DOM。当 Model 数据发生变化时，ViewModel 会自动更新 View（即用户界面），确保界面与数据的一致性。
**优点**：
- **减少 DOM 操作**：直接修改数据即可更新视图，避免频繁手动操作 DOM。
- **易于维护**：数据和视图之间的逻辑解耦，使得代码更加清晰和易于维护。
##### 2. 视图组件
Vue.js 支持将整个页面划分为一系列可复用的组件。这些组件可以被看作是一个个独立的、自包含的模块，拥有自己的模板、数据和行为。组件化的设计有助于提高代码的复用性和可维护性。
**组件特点**：
- **封装性**：组件可以封装其内部实现细节，提供简单的外部接口。
- **复用性**：相同的组件可以在不同的场景下重复使用。
- **嵌套性**：组件可以嵌套其他组件，形成复杂的页面结构。
#### 二、使用 Vue.js 的基本步骤
1. **引入 Vue.js 库**：首先需要在 HTML 文件中通过 `<script>` 标签引入 Vue.js 库。
2. **创建 Vue 实例**：通过 `new Vue({})` 创建一个新的 Vue 实例，并配置选项。
3. **设置数据**：在 Vue 实例的 `data` 属性中定义初始状态。
4. **挂载元素**：使用 `el` 属性指定 Vue 实例将要挂载的 DOM 元素。
5. **渲染视图**：Vue 实例会根据数据自动渲染视图。
#### 三、Vue 实例的常用选项
##### 1. 过滤器 (Filter)
过滤器用于对数据进行转换，并且只能在两个地方使用：双花括号插值和 `v-bind` 表达式中。它们可以用于格式化文本显示、数值处理等场景。
**示例**：
```javascript
let app6 = new Vue({
el: '#app6',
data: {
num1: 123.4,
num2: 520.1314,
num3: 1314.520
},
filters: {
toInt(value) {
return parseInt(value);
}
}
});
// 使用过滤器
<div id="app6">
数字1：{{ num1 | toInt }}<br>
数字2：{{ num2 | toInt }}<br>
数字3：{{ num3 | toInt }}
</div>
```
##### 2. 计算属性 (Computed)
计算属性是 Vue 提供的一种更高效、更易于理解和维护的方式，用于计算出依赖于其他数据的衍生数据。当依赖的数据发生变化时，计算属性会自动更新，而无需手动触发。
**示例**：
```javascript
let app6 = new Vue({
el: '#app6',
data: {
num1: 123.4,
num2: 520.1314,
num3: 1314.520
},
computed: {
sum() {
return parseInt(this.num1 + this.num2 + this.num3);
}
}
});
// 使用计算属性
<div id="app6">
总和是 {{ sum }}
</div>
```
**计算属性 vs 方法**：
- **缓存机制**：计算属性基于其依赖的数据进行缓存，只有当依赖的数据发生变化时才会重新计算。而方法每次调用都会执行一遍。
- **可读性**：计算属性更加简洁明了，易于理解。
**示例**：
```javascript
// 计算属性
computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName;
},
set(newValue) {
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
// 方法
methods: {
getFullName() {
return this.firstName + ' ' + this.lastName;
}
}
```
##### 3. Methods 方法
Methods 是 Vue 中用来定义业务逻辑的地方，通常用来响应用户的交互行为。与计算属性不同，Methods 不具备缓存特性，每次调用都会执行相应的函数。
**示例**：
```javascript
let vm = new Vue({
el: '#app',
data: {
a: 0
},
methods: {
plus() {
this.a++;
}
}
});
// 使用方法
<div id="app">
{{ a }}
<button v-on:click="plus">加1</button>
</div>
```
#### 四、总结
通过上述介绍，我们了解了 Vue.js 的核心概念以及如何使用 Vue.js 构建基本的应用程序。数据驱动的思想使得开发变得简单高效；视图组件化的设计提高了代码的可复用性和可维护性；而计算属性和方法则帮助我们更好地管理和组织数据和业务逻辑。掌握了这些基础知识，你就能够开始构建复杂的前端应用了。
