• 第二节——Vue 基本介绍


    一、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
    1. <!doctype html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8" />
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6. <title>Document</title>
    7. </head>
    8. <body>
    9. <div id="app"></div>
    10. <script>
    11. document.getElementById('app').innerHTML = '你好vue'
    12. </script>
    13. </body>
    14. </html>
    编写第一个vue代码并实现hello word
    1. <template>
    2. <div>
    3. {{ message }}
    4. </div>
    5. </template>
    6. <script>
    7. export default {
    8. data () {
    9. return {
    10. message: "你好 vue"
    11. }
    12. }
    13. }
    14. </script>
  • 相关阅读:
    ​ 数据库约束
    全球建筑物提取数据集(免费下载):微软/GlobalMLBuildingFootprints
    GCC版本升级到指定版本
    MySQL数据库的性能分析 ---图书《软件性能测试分析与调优实践之路》-手稿节选
    【直播笔记0819】 面试必问之微服务架构
    VS Code常用快捷键最后一篇,记得来看哦!非常实用的Visual Studio Code快捷键(3)
    免费SSL证书的作用及其优势
    IEEE 802.11专栏文章概览
    【Proteus仿真】【51单片机】智能语音家居陪护机器人
    GBase 8c V3.0.0数据类型——聚集函数
  • 原文地址:https://blog.csdn.net/weixin_57017198/article/details/133874189