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

Vue的下载以及MVVM分析

news 2025/9/16 8:51:01

😀前言本片文章是vue系列第一篇整理了vue的基础和发展史

🏠个人主页：尘觉主页
🧑个人简介：大家好，我是尘觉，希望我的文章可以帮助到大家，您的满意是我的动力😉😉

在csdn获奖荣誉: 🏆csdn城市之星2名
⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　💓Java全栈群星计划top前5
⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　🤗 端午大礼包获得者

💕欢迎大家：这里是CSDN，我总结知识的地方，欢迎来到我的博客，感谢大家的观看🥰
如果文章有什么需要改进的地方还请大佬不吝赐教 先在次感谢啦😊

文章目录

  • 💫Vue
    • 💭基本介绍
      • 💭官网
      • 💭git 地址:
    • 🤔MVVM-示意图
      • 😮解读 MVVM 思想(上图)
      • 💗下载官网
      • 🤔简单的代码示例方便理解
    • 💖Vue 数据绑定机制分析!
      • 😉注意事项和使用细节
    • 😄总结

💫Vue

💭基本介绍

  1. Vue (读音 /vjuː/，类似于 view) 是一个前端框架, 易于构建用户界面

  2. Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或项目整合

  3. 支持和其它类库结合使用

  4. 开发复杂的单页应用非常方便

  5. Vue 是 Vue.js 的简称

💭官网

https://cn.vuejs.org/

💭git 地址:

https://github.com/vuejs

🤔MVVM-示意图

在这里插入图片描述

😮解读 MVVM 思想(上图)

  1. M∶即 Model，模型，包括数据和一些基本操作
  2. V∶即View，视图，页面渲染结果
  3. VM∶即 View-Model，模型与视图间的双向操作(无需开发人员干涉)
  4. 在 MVVM之前，开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model渲染到View 中。而后当用户操作视图，我们还需要通过 DOM获取 View 中的数据，然后同步到Model 中。
  5. 而 MVVM中的VM 要做的事情就是把DOM 操作完全封装起来，开发人员不用再关心
  6. Model 和View 之间是如何互相影响的
  7. 只要我们 Model 发生了改变，View上自然就会表现出来
  8. 当用户修改了View，Model 中的数据也会跟着改变。。
  9. 结果：把开发人员从繁琐的 DOM操作中解放出来，把关注点放在如何操作 Model上, 大大提高开发效率

💗下载官网

官网文档：https://cn.vuejs.org/v2/guide/index.html

下载: https://cn.vuejs.org/v2/guide/installation.html

小技巧：为了让 IDEA识别Vue 代码，需要安装插件 Vue.js

🤔简单的代码示例方便理解

  1. div元素不是必须的，也可以是其它元素，比如span,但是约定都是将vue实例挂载到div

  2. 因为div更加适合做布局这里就用div了

  3. id 不是必须为app , 是程序员指定,一般我们就使用app

  4. {{message}} : 插值表达式

  5. message 就是从model的data数据池来设置

  6. 当我们的代码执行时，会到data{} 数据池中去匹配数据, 如果匹配上, 就进行替换 , 如果没有匹配上, 就是输出空

el: “#app”, //创建的vue实例挂载到 id=app的div
data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>vue快速入门</title></head><body><!--解读1. div元素不是必须的，也可以是其它元素，比如span,但是约定都是将vue实例挂载到div2. 因为div更加适合做布局这里就用div了3. id 不是必须为app , 是程序员指定,一般我们就使用app--><div id="app"><!--解读1. {{message}} : 插值表达式2. message 就是从model的data数据池来设置3. 当我们的代码执行时，会到data{} 数据池中去匹配数据, 如果匹配上, 就进行替换, 如果没有匹配上, 就是输出空--><h1>欢迎你{{message}}-{{name}}</h1></div><!--引入vue.js--><script src="vue.js"></script><script>//创建Vue对象/*** 解读* 1. 创建Vue对象实例* 2. 我们在控制台输出vm对象，看看该对象的结构！(data/listeners)**/let vm = new Vue({el: "#app", //创建的vue实例挂载到 id=app的divdata: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)message: "Hello-Vue!",name: "大家好"}})console.log("vm=>", vm);console.log(vm._data.message);console.log(vm._data.name);console.log(vm.name);console.log(vm.message);</script></body></html>

💖Vue 数据绑定机制分析!

  1. 通过查看浏览器的控制台, 可以分析 Vue 数据绑定机制/MVVM
    在这里插入图片描述

  2. 上面这个 debug 方式, 必须掌握, 对应我们后面调试 Vue 项目很有帮助

😉注意事项和使用细节

  1. 注意代码顺序，要求 div 在前，script 在后，否则无法绑定数据

在这里插入图片描述

  1. 从案例可以体会声明式渲染：Vue.js 采用简洁的模板语法来声明式地将数据渲染进DOM 的系统， 做到数据和显示分离

  2. Vue 没有繁琐的 DOM 操作，如果使用 jQuery，我们需要先找到 div 节点，获取到 DOM
    对象，然后进行节点操作, 显然 Vue 更加简洁

😄总结

本片讲解了Vue的基本介绍和怎么下载以及解读MVVM机制和数据绑定的分析

😁vue系列
Vue2 脚手架下载及配置淘宝镜像–和ieda的配置和打开
Vue 项目结构和文件分析
🤔欢迎大家加入我的社区 尘觉社区

文章到这里就结束了，如果有什么疑问的地方请指出，诸佬们一起来评论区一起讨论😁
希望能和诸佬们一起努力，今后我们一起观看感谢您的阅读🍻
如果帮助到您不妨3连支持一下，创造不易您们的支持是我的动力🤞

相关文章：

Vue的下载以及MVVM分析

&#x1f600;前言本片文章是vue系列第一篇整理了vue的基础和发展史 &#x1f3e0;个人主页&#xff1a;尘觉主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是尘觉&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的满意是我的动力&#x1f609;&#x1f6…...

编程日记 2023/7/28 6:04:51

ElasticSearch学习--自动补全

目录 自定义分词器 介绍 配置自定义分词器 拼音分词器的问题​编辑 总结 DSL自动补全查询 RestAPI实现自动补全 自定义分词器 介绍 自定义分词器只在当前库中有效 配置自定义分词器 拼音分词器的问题 总结 DSL自动补全查询 RestAPI实现自动补全...

编程日记 2023/7/28 6:03:50

【C++】多态，虚函数表相关问题解决

文章目录 多态概念及其触发条件重写和协变&#xff08;考点1&#xff09;&#xff08;考点2&#xff09; 虚函数表及其位置&#xff08;考点3&#xff09; 多继承中的虚函数表 多态概念及其触发条件 多态的概念&#xff1a;通俗来说&#xff0c;就是多种形态。具体点就是去完成…...

编程日记 2023/7/28 6:02:49

探索大型语言模型的开源人工智能基础设施：北京开源AI Meetup回顾

原文参见Explore open source AI Infra for Large Language Models: Highlights from the Open Source AI Meetup Beijing | Cloud Native Computing Foundation 背景介绍&#xff1a; 最近&#xff0c;在 ChatGPT 的成功推动下&#xff0c;大型语言模型及其应用程序的流行度激…...

编程日记 2023/7/28 6:01:47

Langchain 的 Conversation buffer window memory

Langchain 的 Conversation buffer window memory ConversationBufferWindowMemory 保存一段时间内对话交互的列表。它仅使用最后 K 个交互。这对于保持最近交互的滑动窗口非常有用&#xff0c;因此缓冲区不会变得太大。 我们首先来探讨一下这种存储器的基本功能。 示例代码&…...

编程日记 2023/7/28 6:00:46

电流源电路

3.3.3电流源电路 镜像电流源 电路 分析 仿真 比例电流源 电路 分析 仿真 加射极输出器的电流源1 电路 分析 仿真 加射极输出器的电流源2 电路 分析 仿真 威尔逊电流源 电路 分析 仿真...

编程日记 2023/7/28 5:59:45

iOS开发-CMMotionManager传感器陀螺仪

iOS开发-CMMotionManager传感器陀螺仪 之前开发中遇到需要使用陀螺仪判断是否拍照时候水平判断&#xff0c;如果没有水平拍照&#xff0c;则给出提示。方便用户拍照合适的题目图片。 一、CMMotionManager CMMotionManager是什么 CMMotionManager 是 Core Motion 库的核心类&…...

编程日记 2023/7/28 5:58:44

影刀下载，插件安装

1、下载 在影刀官网下载&#xff1a;www.yingdao.com 2、谷歌插件安装 参考&#xff1a; 影刀插件安装各种方式 浏览器安装插件说明 - 影刀帮助中心 安装说明&#xff1a;驱动外置 Chrome 需要安装插件&#xff0c;并且保证此插件处于开启状态 方式一&#xff1a;用户头…...

编程日记 2023/7/28 5:57:42

Linux的tcpdump命令详解

tcpdump 一款sniffer工具&#xff0c;是Linux上的抓包工具&#xff0c;嗅探器 补充说明 tcpdump命令 是一款抓包&#xff0c;嗅探器工具&#xff0c;它可以打印所有经过网络接口的数据包的头信息&#xff0c;也可以使用-w选项将数据包保存到文件中&#xff0c;方便以后分析。…...

编程日记 2023/7/28 5:56:41

springboot运行报错Failed to load ApplicationContext for xxx

Failed to load ApplicationContext for报错解决方法 报错Failed to load ApplicationContext for 报错Failed to load ApplicationContext for 网上找了一堆方法都尝试了还是没用 包括添加mapperScan&#xff0c;添加配置类 配置pom文件 [外链图片转存失败,源站可能有防盗链机…...

编程日记 2023/7/28 5:55:39

[SQL挖掘机] - 内连接: inner join

介绍: 内连接是一种多表连接方式&#xff0c;用于将两个或多个表中的数据通过共同的列值进行匹配&#xff0c;并返回满足连接条件的匹配行。简单来说&#xff0c;内连接能够将相关联的数据组合在一起&#xff0c;以便进行更复杂和全面的数据分析。 内连接的工作原理如下&…...

编程日记 2023/7/28 5:54:37

mysql（四）数据备份

目录 前言 一、概述 二、备份的类型 &#xff08;一&#xff09;物理与逻辑角度 &#xff08;二&#xff09;数据库备份策略角度 三、常见的备份方法 四、完整备份 &#xff08;一&#xff09;打包数据库文件备份 &#xff08;二&#xff09;备份工具备份 五、增量备份 六、操…...

编程日记 2023/7/28 5:53:34

Spring 拦截器

上篇博客链接&#xff1a;SpringAOP详解 上篇博客我们提到使用AOP的环绕通知来完成统一的用户登陆验证虽然方便了许多&#xff0c;但随之而来也带来了新的问题: HttpSession不知道如何去获取&#xff0c;获取困难登录和注册的方法并不需要拦截&#xff0c;使用切点没办法定义哪…...

编程日记 2023/7/28 5:52:32

【libevent】http客户端3：简单封装

LibEventHttp: 适用于简单的http请求 LibEventHttp/* Copyright (c) MediaArea.net SARL. All Rights Reserved.** Use of this source code is governed by a BSD-style license that can* be found in the License.html file in the root of the source tree.*///--------…...

编程日记 2023/7/28 5:51:31

JavaScript的函数中this的指向

JavaScript的函数中this的指向 JavaScript 语言之所以有 this 的设计&#xff0c;跟内存里面的数据结构有关系。 以下例子来简单描述this在不同情况下所指向的对象。 var obj {aa: function(){console.log(this.num)},num: 5 };var aa obj.aa; var num 10;obj.aa(); // …...

编程日记 2023/7/28 5:50:30

Caddy 中实现自动 HTTPS

要在 Caddy 中实现自动 HTTPS&#xff0c;您可以按照以下步骤进行操作&#xff1a; 步骤 1&#xff1a;安装 Caddy 首先&#xff0c;您需要安装 Caddy 服务器。您可以从 Caddy 的官方网站&#xff08;https://caddyserver.com/&#xff09;下载适用于您的操作系统的最新版本。…...

编程日记 2023/7/28 5:49:28

SK5代理（socks5代理）在网络安全与爬虫应用中的优势与编写指南

一、SK5代理&#xff08;socks5代理&#xff09;的基本概念 SK5代理是一种网络代理协议&#xff0c;它允许客户端通过代理服务器与目标服务器进行通信。相较于HTTP代理&#xff0c;SK5代理在传输数据时更加高效且安全&#xff0c;它支持TCP和UDP协议&#xff0c;并且能够实现数…...

编程日记 2023/7/28 5:48:27

【LeetCode-简单】剑指 Offer 06. 从尾到头打印链表（详解）

题目 输入一个链表的头节点&#xff0c;从尾到头反过来返回每个节点的值&#xff08;用数组返回&#xff09;。 题目地址&#xff1a;剑指 Offer 06. 从尾到头打印链表 - 力扣&#xff08;LeetCode&#xff09; 方法1&#xff1a;栈 思路 题目要求我们将链表的从尾到投打印一…...

编程日记 2023/7/28 5:47:25

【LeetCode】114.二叉树展开为链表

题目 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链表应该同样使用 TreeNode &#xff0c;其中 right 子指针指向链表中下一个结点&#xff0c;而左子指针始终为 null 。展开后的单链表应该与二叉树 先序遍历 顺序相同。 示例 1&…...

编程日记 2023/7/28 5:46:24

DAY3,Qt（完成闹钟的实现，定时器事件处理函数的使用）

1.完成闹钟的实现&#xff0c;到点播报文本框的内容&#xff1b; ---alarm.h---头文件 #ifndef ALARM_H #define ALARM_H#include <QWidget> #include <QTimerEvent> //定时器处理函数类 #include <QTime> //时间类 #include <QPushButton> //按钮…...

编程日记 2023/7/28 5:45:23

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/9/14 19:44:52

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2025/9/15 9:16:04

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2025/9/10 23:16:27

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2025/8/24 22:20:35

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/7/6 11:42:31

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/9/7 8:51:45

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2025/9/10 18:41:52

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

编程新知 2025/7/6 1:12:52

tauri项目，如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值&#xff0c;可以通过标准的依赖&#xff1a; std::env::var(name).ok() 想在前端通过调用来获取&#xff0c;可以写一个command函数&#xff1a; #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...

编程新知 2025/9/9 10:08:28