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

第一个Vue程序

news 2026/4/2 6:29:17

第一个Vue程序

<body>
<!--view层 变成了一个模板-->
<div id="app">{{message}}
</div><!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>var vm = new Vue({el:"#app",//Model ：数据data:{message:"hello vue!"}})
</script>

1、什么是MVVM

​ MVVM (Model-View-ViewModel) 是一种软件架构设计模式，由微软WPF (用于替代WinForm，以前就是用这个技术开发桌面应用程序的)和Silverlight (类似于Java Applet,简单点说就是在浏览器上运行的WPF)的架构师Ken Cooper和Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由John Gossman (同样也是WPF和Silverlight的架构师)于2005年在他的博客上发表。MVVM 源自于经典的MVC (ModI-View-Controller) 模式。

​ MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用，其作用如下:

  • 该层向上与视图层进行双向数据绑定
  • 向下与Model层通过接口请求进行数据交互

在这里插入图片描述

2、为什么要使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型(Model),有几大好处：

  • 低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的
    View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

  • 可复用:你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。

  • **独立开发:**开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。

  • 可测试:界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

3、Vue是MVVM的实现者

在这里插入图片描述

  • Model : 模型层，在这里表示JavaScript对象

  • View : 视图层,在这里表示DOM (HTML操作的元素)

  • ViewModel : 连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者

  • ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新

  • ViewModel 能够监听到视图的变化，并能够通知数据发生改变

至此，我们就明白了，Vue.js 就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定

4、下载地址

  • 开发版本

    • 包括完整的警告和调试模式：https://vuejs.org/js/vue.js
    • 删除了警告。30.96KB min+gzip ：https://vuejs.org/js/vue.min.js

  • CDN

相关文章：

第一个Vue程序

第一个Vue程序 <body> <!--view层 变成了一个模板--> <div id"app">{{message}} </div><!--导入vue.js--> <script src"https://cdn.jsdelivr.net/npm/vue2.5.16/dist/vue.min.js"></script> <script>va…...

编程日记 2023/5/17 12:29:05

2023上学期学习计划

目前&#xff1a;根据答辩的情况来看&#xff0c;目前去项目组&#xff0c;着重写好算法是相对较优的打算&#xff0c;先将项目写好&#xff0c;之后着重提升算法水平&#xff0c;这学期主要啃《算法导论》与《大话数据结构》这俩本书&#xff0c;同时刷题量要达到160题 四月份…...

编程日记 2023/5/2 13:05:57

深入了解MySQL锁机制及应用场景

深入了解MySQL锁机制及应用场景锁的概述锁的分类锁的应用场景数据库事务管理多线程程序开发数据库的备份和恢复对于在线游戏等高并发应用场景锁的具体使用方法锁的应用实例总结锁的概述 MySQL锁是操作MySQL数据库时常用的一种机制。MySQL锁可以保证多个用户在同时执行读写操作…...

编程日记 2023/4/30 21:46:37

Java类和对象

目录 一、什么是面向对象&#xff1f; 二、类与对象的基本概念 1.类 2.对象 三、类的定义格式 四、类与对象的定义与使用 1.什么是实例化 2.实例化对象 3.类的使用 4.类与对象的说明 总结 一、什么是面向对象&#xff1f; 面向对象是一种现在最为流行的程序设计方法&a…...

编程日记 2023/5/17 12:30:40

aspnet053+sqlserver在线考试系统xns

目 录 基于.NET的考试系统 1 摘 要 3 前 言 4 第一章　 系统概述 5 1.1 本课题的研究意义 5 1.2 本论文的目的及内容 5 第二章 在线考试系统概述 7 2.1 现行在线考试系统现状 7 2.2 电子管理平台的开发方法介绍 8 2.2.1 B/S体系结构 8 2…...

编程日记 2023/5/1 2:05:41

新一代大学英语（提高篇）

词汇题&#xff08;55道&#xff09; 1. You should carefully think over_____ the manager said at the meeting. A. that B. which C. what D. whose 1.选C,考察宾语从句连接词&#xff0c;主句谓语动词think over后面缺宾语&#xff0c;后面的宾语从句谓语动…...

编程日记 2023/5/17 12:31:54

阿里云OSS 203 Non-Authoritative Information问题解决

问题描述&#xff1a; 203 Non-Authoritative Information 问题分析&#xff1a; 1、跨域问题&#xff0c;阿里云OSS没有配置跨域规则。 解决办法请参考以下博客。 阿里云OSS No ‘Access-Control-Allow-Origin‘ header is present on the requested resource问题解决_旭东…...

编程日记 2023/4/29 6:55:51

【数据结构】你真的认识“”吗？它真的就只是“取地址”吗？或许你一直都在误解它。

我们有时候在看数据结构相关书籍时&#xff0c;经常会看到这样的写法&#xff1a; void StackInit(ST& ps) {assert(ps);ps.a NULL;ps.top 0;ps.capacity 0; } 注意&#xff0c;这里的&可不是表示取地址。如果你把它理解为取地址&#xff0c;那就在错误的路上狂奔&…...

编程日记 2023/4/30 17:28:12

[深入理解SSD 21] 固态硬盘GC机制 | GC 分类 | GC 过程 | GC 和 Trim 的关系

Hello 大家好&#xff0c; 我是元存储~主页&#xff1a;元存储的博客_CSDN博客-深入理解SSD:固态存储特性与实践,深入浅出SSD:固态存储原理与特性,深入理解Flash:闪存特性与实践领域博主前言SSD上已经被写入过的Page页在重新被写入之前&#xff0c;必须要将page页所在的block块…...

编程日记 2023/5/1 11:43:26

大数据未来发展怎么样？

就目前情况来看&#xff0c;大数据行业前景不错薪资待遇好&#xff0c;也有越来越多的人选择大数据行业&#xff0c;各大名企对于大数据人才需求不断上涨。 大数据从业领域很宽广&#xff0c;不管是科技领域还是食品产业&#xff0c;零售业等都是需要大数据人才进行大数据的处…...

编程日记 2023/5/2 5:27:10

【Linux】进程和线程间的区别与联系

带你轻松理解进程与线程的区别与联系&#xff1a; 进程线程定义资源分配和拥有的基本单位CPU调度的基本单位切换情况对应进程的CPU环境的保存以及新进程环境的设置保存和设置程序计数器&#xff0c;少量的寄存器&#xff0c;以及对应的线程栈切换者操作系统操作系统切换过程用…...

编程日记 2023/5/2 20:48:47

【C语言】变量和常量

目录 1. 变量 1.1 变量的分类 1.1.1 局部变量 1.1.2 全局变量 1.2 变量的使用——声明、赋值、初始化 1.3 变量的作用域和生命周期 1.3.1 作用域 1.3.2 生命周期 2. 常量 2.1 字面常量 2.2 常变量&#xff08;const常量&#xff09; 2.3 简单的宏&#xff08;对象式…...

编程日记 2023/5/2 15:05:17

蓝桥杯-卡片换位(BFS)

蓝桥杯-卡片换位 1、题目描述2、解题思路3、完整代码(AC)1、题目描述 你玩过华容道的游戏吗？ 这是个类似的，但更简单的游戏。 看下面 3 x 2 的格子 +---+---+---+| A | * | * |+---+---+---+| B | | * |+---+---+---+在其中放 5 张牌，其中 A 代表关羽，B 代表张飞，* 代表士…...

编程日记 2023/5/2 3:36:09

霍夫曼编码 | 贪心算法 2

霍夫曼编码是一种无损数据压缩算法。其思想是为输入字符分配可变长度代码&#xff0c;分配代码的长度基于相应字符的频率。 分配给输入字符的可变长度代码是​​​​​​​前缀代码&#xff0c;意味着代码&#xff08;位序列&#xff09;的分配方式是分配给一个字符的代码不是…...

编程日记 2023/4/29 12:26:45

async 与 await

目录一、async函数二、await表达式三、async与await结合一、async函数 函数的返回值为promise对象promise对象的结果由async函数执行的返回值决定 async function main(){//1.如果返回的是一个非promise类型的数据&#xff0c;那么返回的就是成功的状态// return 521//2.如果…...

编程日记 2023/4/29 23:41:04

MYSQL语句

在 Navicat Premium 里面test_database数据库 &#xff0c;右击 “命令列界面..” 命令列界面 中 输入命令 查看所有的数据库 show databases; 选择数据库 -- use 数据库名; use test_database; 创建表 creat table 表名(字段名1 数据类型,字段名2 数据类型) -- 创建…...

编程日记 2023/5/18 11:01:09

C语言函数：内存函数memcpy()以及实现

C语言函数&#xff1a;内存函数memcpy() 引言&#xff1a; #define _CRT_SECURE_NO_WARNINGS#include <stdlib.h>int main() {int arr1[20] { 1,2,3,4,5,6,7,8,9 };int arr2[20] { 0 };strcpy(arr2, arr1);return 0; } strcpy函数&#xff1a;C语言函数&#xff1a;字…...

编程日记 2023/4/30 1:26:50

ArcGIS基础：栅格分区转矢量再裁剪面图层【重分类】【栅格转面】

如上所示&#xff0c;是一个原始的栅格数据&#xff08;DEM&#xff09;&#xff0c;本操作将其转为矢量要素并裁剪另外的面图层 右键属性查看数据类型&#xff0c;可以发现此栅格数据属于【浮点型】&#xff0c;这里需要注意的是&#xff1a;栅格转为矢量数据时&#xff0c;必…...

编程日记 2023/4/29 6:56:40

vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】

文章目录11.对axios二次封装11.1为什么需要进行二次封装axios&#xff1f;11.2在项目当中经常有API文件夹【axios】12.接口统一管理12.1跨域问题12.2接口统一管理12.3不同请求方式的src/api/index.js说明本人其他相关文章链接11.对axios二次封装 安装命令&#xff1a;cnpm inst…...

编程日记 2023/5/2 20:48:57

并发编程-2

1.锁的分类 1.1 可重入锁、不可重入锁 Java中提供的synchronized&#xff0c;ReentrantLock&#xff0c;ReentrantReadWriteLock都是可重入锁。 1.1.1重入&#xff1a; 当前线程获取到A锁&#xff0c;在获取之后尝试再次获取A锁是可以直接拿到的。 1.1.2不可重入&#xff…...

编程日记 2023/5/18 11:04:41

一、RuoYi-Vue3项目模块化架构与二次开发实战

1. RuoYi-Vue3模块化架构深度解析 第一次接触RuoYi-Vue3时&#xff0c;最让我惊艳的就是它清晰的模块化设计。这个基于Spring BootVue3的前后端分离框架&#xff0c;通过六大核心模块的巧妙组合&#xff0c;既保证了功能完整性&#xff0c;又为二次开发留足了空间。就像搭积木一…...

编程新知 2026/4/2 6:18:27

深度学习篇---全局平均池化（Global Average Pooling, GAP）

全局平均池化是深度学习中一个优雅而强大的操作&#xff0c;它通过极简的设计解决了全连接层参数量爆炸的问题&#xff0c;同时增强了模型的泛化能力。 一、什么是全局平均池化&#xff1f; 1. 基本定义 全局平均池化是对每个特征通道的所有空间位置取平均值&#xff0c;将三…...

编程新知 2026/4/2 5:58:02

结合鸿蒙系统特性：在HarmonyOS应用中嵌入Pixel Couplet Gen生成能力

结合鸿蒙系统特性&#xff1a;在HarmonyOS应用中嵌入Pixel Couplet Gen生成能力 1. 引言&#xff1a;当传统艺术遇见分布式技术 春节贴春联是中国人延续千年的文化传统&#xff0c;而如今&#xff0c;借助AI技术和鸿蒙系统的分布式能力&#xff0c;我们可以让这一传统焕发新的…...

编程新知 2026/4/2 5:41:50

AtCoder Beginner Contest 429

【赛时五题】AtCoder Beginner Contest 429 https://www.bilibili.com/video/BV1gXsZz8ELL/ 【赛时6题】AtCoder Beginner Contest 429 https://www.bilibili.com/video/BV1gXsZz8EZQ/ Atcoder Beginner Contest 429 https://www.bilibili.com/video/BV1SosZzdENX/ https://blo…...

编程新知 2026/4/2 4:17:15

2026年Java程序员冲大厂有何经验套路？

前几天&#xff0c;跟个老朋友吃饭&#xff0c;他最近想跳槽去大厂&#xff0c;觉得压力很大&#xff0c;问我能不能分享些所谓的经验套路。每次有这类请求&#xff0c;都觉得有些有趣&#xff0c;不知道你发现没有大家身边真的有很多人不知道怎么面试&#xff0c;也不知道怎么…...

编程新知 2026/4/2 3:59:07

就dddcddddd

dianjiaodud1u...

编程新知 2026/4/2 3:09:29

企业员工福利平台选型：技术架构与对接难点拆解

企业员工福利平台选型&#xff1a;技术架构与对接难点拆解“选对企业员工福利平台&#xff0c;技术架构与系统对接是决定落地成败的关键——忽略技术适配性的选型&#xff0c;往往会让福利项目陷入‘上线易、用着难’的困境。”随着企业数字化转型加速&#xff0c;员工福利从“…...

编程新知 2026/4/1 23:34:19

光流法在气象雷达中的应用：从原理到外推实践

光流法在气象雷达中的应用&#xff1a;从原理到外推实践 气象雷达作为现代气象监测的核心工具&#xff0c;其回波数据蕴含着丰富的天气系统动态信息。如何从这些看似静态的图像序列中提取运动规律&#xff0c;进而预测未来短时内的天气变化&#xff0c;一直是气象学界和工程界关…...

编程新知 2026/4/1 23:24:13

从模电理论到商用落地，应届生必做的无线充项目，H 桥 / LC 谐振 + QI 协议全栈详解

很多初学嵌入式的同学、正在准备秋招的电子信息类应届生&#xff0c;都会遇到两个核心困境&#xff1a;一是模电学了 H 桥、LC 谐振&#xff0c;只会背公式做题&#xff0c;根本不知道怎么在真实产品里落地&#xff1b;二是学完单片机只会点灯&#xff0c;写的都是流水账代码&a…...

编程新知 2026/4/1 22:53:39

避坑指南：Windows系统下WampServer2.2e与MySQL5.5.24的完美兼容配置

避坑指南&#xff1a;Windows系统下WampServer2.2e与MySQL5.5.24的完美兼容配置 在本地开发环境中&#xff0c;WampServer因其便捷的一键式部署深受开发者喜爱。但当系统已存在其他MySQL服务时&#xff0c;端口冲突问题往往让新手束手无策。本文将深入解决WampServer2.2e与既有…...

编程新知 2026/4/1 20:50:04