Vue 基础 - MVVM 架构、el 与 data 的妙用

概览

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它采用 MVVM（模型-视图-视图模型）架构，提供了数据绑定和组件化开发等特性，使开发者能够轻松地创建和维护复杂的应用程序。

MVVM 架构

MVVM 架构是一种将应用程序的逻辑分为三个部分的体系结构模式：模型、视图和视图模型。

• 模型 ：模型层包含应用程序的数据和业务逻辑。
• 视图 ：视图层负责显示数据和用户交互。
• 视图模型 ：视图模型层是模型和视图之间的桥梁，负责数据的转换和处理。

在 Vue.js 中，数据绑定系统将视图和视图模型连接起来，允许开发者在视图中使用视图模型中的数据。当视图模型中的数据发生变化时，视图会自动更新，从而实现数据驱动的开发。

el 与 data

在 Vue.js 中，el 和 data 是两个非常重要的概念。

• el ：el 是 Vue.js 实例的根元素，它指定了 Vue.js 实例所控制的 DOM 元素。
• data ：data 是 Vue.js 实例的数据对象，它包含了应用程序的数据。

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, world!'
  }
});

在这个例子中，#app 是 Vue.js 实例的根元素，message 是 Vue.js 实例的数据对象中的一个属性。

el 与 data 的两种写法

el 的两种写法

1. new.Vue 时配置 el 属性

const app = new Vue({
  el: '#app'
});

2. 先创建 Vue 实例，随后再通过 vm.$mount('#root') 指定 el 的值

const app = new Vue();
app.$mount('#app');

data 的两种写法

1. 对象式

const app = new Vue({
  data: {
    message: 'Hello, world!'
  }
});

2. 函数式

const app = new Vue({
  data() {
    return {
      message: 'Hello, world!'
    };
  }
});

如何选择

对于 el，推荐使用第一种写法，因为这样可以使代码更加简洁。

对于 data，推荐使用函数式写法，因为这样可以使代码更加灵活。

结语

本文对 Vue.js 的基本概念进行了详细的介绍，包括 MVVM 架构、el 和 data 的用法。通过对 Vue.js 基础的全面剖析，开发者可以更好地理解和使用 Vue.js 构建应用程序，提高开发效率和应用程序性能。