96 lines
2.4 KiB
Markdown
96 lines
2.4 KiB
Markdown
# Vue2 数据绑定
|
||
|
||
本示例展示了 Vue2 中的两种数据绑定方式：
|
||
- 单向数据绑定 (`v-bind`)
|
||
- 双向数据绑定 (`v-model`)
|
||
|
||
## 核心概念详解
|
||
|
||
### 1. 数据绑定类型
|
||
|
||
| 类型 | 指令 | 特点 | 示例 |
|
||
| -------- | --------- | ----------------- | ----------------------------- |
|
||
| 单向绑定 | `v-bind` | 数据→视图单向流动 | `<input v-bind:value="name">` |
|
||
| 双向绑定 | `v-model` | 数据⇄视图双向同步 | `<input v-model="name">` |
|
||
|
||
### 2. Vue 实例创建方式
|
||
|
||
```javascript
|
||
// 推荐写法 (ES6简写)
|
||
data() {
|
||
return {
|
||
name: "数据绑定"
|
||
}
|
||
}
|
||
|
||
// 等价于
|
||
data: function() {
|
||
return {
|
||
name: "数据绑定"
|
||
}
|
||
}
|
||
|
||
// 不推荐在组件中使用
|
||
data: {
|
||
name: "数据绑定"
|
||
}
|
||
```
|
||
|
||
### 3. 动态挂载机制
|
||
|
||
```javascript
|
||
// 延迟挂载示例
|
||
setTimeout(() => {
|
||
v.$mount("#app"); // 手动挂载到#app
|
||
}, 1000);
|
||
|
||
// 实例销毁与重建
|
||
setTimeout(() => {
|
||
v.$destroy(); // 销毁旧实例
|
||
|
||
const v2 = new Vue({ // 创建新实例
|
||
data: { name: "新数据绑定" }
|
||
});
|
||
v2.$mount("#root"); // 挂载到新位置
|
||
}, 2000);
|
||
```
|
||
|
||
1. **数据绑定选择**：
|
||
- 表单元素使用 `v-model` 实现双向绑定
|
||
- 普通属性使用 `v-bind` 实现单向绑定
|
||
|
||
2. **实例管理**：
|
||
- 避免在同一个元素上重复挂载不同实例
|
||
- 切换挂载目标时务必先销毁旧实例
|
||
|
||
3. **数据定义**：
|
||
- 组件中必须使用函数形式返回data对象
|
||
- 根实例可以使用对象形式
|
||
|
||
4. **性能优化**：
|
||
- 大量数据绑定时考虑使用计算属性
|
||
- 复杂场景可使用自定义指令优化
|
||
|
||
## 扩展说明
|
||
|
||
### 1. `v-model` 原理
|
||
`v-model` 本质上是语法糖，等价于：
|
||
```html
|
||
<input
|
||
:value="name"
|
||
@input="name = $event.target.value">
|
||
```
|
||
|
||
### 2. 挂载方式对比
|
||
| 方式 | 示例 | 适用场景 |
|
||
| ---------- | ------------------- | -------------------- |
|
||
| el选项 | `el: "#app"` | 初始化时确定挂载点 |
|
||
| $mount方法 | `vm.$mount("#app")` | 需要延迟或条件挂载时 |
|
||
|
||
### 3. 实例生命周期
|
||
- `new Vue()` 创建实例
|
||
- `$mount()` 触发挂载流程
|
||
- `$destroy()` 触发销毁流程
|
||
|
||
通过本文档，您可以全面了解 Vue2 的数据绑定机制和实例管理方法，为实际开发提供参考。
|