当前位置：首页 > news >正文

第二节——Vue 基本介绍

news 2026/4/14 10:17:14

一、MV*的理解

1、概念

在计算机编程领域，MV*（也称为MVC、MVP、MVVM等）是一种用于组织和设计应用程序结构的模式。这些模式旨在实现应用程序的解耦、可维护性和可扩展性。MV代表着Model-View-（表示控制器或视图模型等其他组件）的缩写，其中可以根据具体的模式而变化

2、MVC（Model-View-Controller）：

模型（Model）：负责处理应用程序的数据逻辑，通常包含数据的获取、处理和存储。

视图（View）：负责展示数据给用户，通常是用户界面的组件。

控制器（Controller）：负责处理用户输入，并根据输入更新模型和视图。它充当了模型和视图之间的中介者。

3、MVP（Model-View-Presenter）：

模型（Model）：同样负责处理应用程序的数据逻辑，与MVC中的模型类似。

视图（View）：负责展示数据给用户，但通常比MVC中的视图更为被动，不直接处理用户输入。

主持人（Presenter）：充当了控制器的角色，处理用户输入并根据输入更新模型和视图。与控制器不同的是，它更紧密地与视图交互，可以通过接口直接与视图进行交互。

4、MVVM（Model-View-ViewModel）：

模型（Model）：同样负责处理应用程序的数据逻辑，与MVC和MVP中的模型类似。

视图（View）：负责展示数据给用户，通常是用户界面的组件。

视图模型（ViewModel）：是连接视图和模型的中介者。它从模型中获取数据，并将数据转换成视图所需的格式，同时处理用户输入，并将用户操作传递给模型。视图模型使得视图与模型的交互解耦，让视图能够更专注于展示数据

二、声明式及与传统DOM开发对比

1、什么叫声明式开发

声明式编程是一种编程范型，与命令式编程相对立。它描述目标性质，让计算机明白目标，而非流程。声明式编程不用告诉电脑问题领域，从而避免随之而来的副作用。而指令式编程专则需要用算法来明确的指出每一步该怎么做。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

2、与传统DOM开发对比

在div中写入你好vue

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"></div><script>document.getElementById('app').innerHTML = '你好vue'</script></body>
</html>

编写第一个vue代码并实现hello word

<template><div>{{  message }}</div>
</template>
<script>
export default {data () {return {message: "你好 vue"}}
}</script>