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

Vue的下载以及MVVM分析

news 2026/4/1 6:33:23

😀前言本片文章是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

SiameseUIE中文-base效果对比：在CLUE-NER和COTE-ABSA双基准测试

SiameseUIE中文-base效果对比&#xff1a;在CLUE-NER和COTE-ABSA双基准测试 想找一个开箱即用、效果又好的中文信息抽取工具&#xff1f;今天我们来聊聊阿里巴巴达摩院出品的SiameseUIE中文-base模型。这可不是一个普通的模型&#xff0c;它是一个“通用信息抽取”模型&#x…...

编程新知 2026/4/1 6:27:38

Wan2.2-I2V-A14B企业应用：法律文书解读AI动画视频生成系统

Wan2.2-I2V-A14B企业应用&#xff1a;法律文书解读AI动画视频生成系统 1. 系统概述与核心价值 法律行业每天需要处理大量文书材料&#xff0c;传统的人工解读和可视化呈现方式效率低下且成本高昂。Wan2.2-I2V-A14B法律文书解读AI动画视频生成系统正是为解决这一痛点而生。 这…...

编程新知 2026/4/1 6:19:32

忍者像素绘卷：天界画坊Python入门实战，3步搭建AI绘画环境

忍者像素绘卷&#xff1a;天界画坊Python入门实战&#xff0c;3步搭建AI绘画环境 1. 前言&#xff1a;当Python遇见像素艺术 还记得小时候玩过的8-bit游戏吗&#xff1f;那些由一个个小方块组成的像素世界&#xff0c;如今正以全新的方式回归。天界画坊是一个开源的AI绘画工具…...

编程新知 2026/4/1 6:01:20

5分钟零代码部署：Live2D AI虚拟助手让你的网站活起来

5分钟零代码部署&#xff1a;Live2D AI虚拟助手让你的网站活起来 【免费下载链接】live2d_ai 基于live2d.js实现的动画小人ai&#xff0c;拥有聊天功能&#xff0c;还有图片识别功能&#xff0c;可以嵌入到网页里 项目地址: https://gitcode.com/gh_mirrors/li/live2d_ai …...

编程新知 2026/4/1 3:37:13

RTX3070 + CUDA 11.0 实战：手把手教你从零搭建 PointNet.pytorch 环境（附常见报错解决）

RTX3070 CUDA 11.0 实战&#xff1a;手把手教你从零搭建 PointNet.pytorch 环境&#xff08;附常见报错解决&#xff09; 当你手握一块RTX3070显卡&#xff0c;想要复现PointNet这一经典点云处理网络时&#xff0c;是否曾被环境配置的各种坑绊住脚步&#xff1f;本文将带你避开…...

编程新知 2026/4/1 3:00:44

从零到一：AI工程开源资源全栈指南与实战应用

从零到一&#xff1a;AI工程开源资源全栈指南与实战应用 【免费下载链接】aie-book [WIP] Resources for AI engineers. Also contains supporting materials for the book AI Engineering (Chip Huyen, 2025) 项目地址: https://gitcode.com/GitHub_Trending/ai/aie-book …...

编程新知 2026/4/1 2:56:40

SQL Server服务启动失败？手把手教你用Local System账户解决SQLEXPRESS报错126

SQL Server服务启动失败&#xff1f;手把手教你用Local System账户解决SQLEXPRESS报错126 当你正准备开始一天的工作&#xff0c;突然发现SQL Server服务无法启动&#xff0c;屏幕上赫然显示着错误代码126&#xff0c;这种突如其来的技术故障往往让人措手不及。作为数据库管理员…...

编程新知 2026/4/1 2:05:58

终极指南：如何彻底解决Colab运行text-generation-webui的Matplotlib后端错误

终极指南&#xff1a;如何彻底解决Colab运行text-generation-webui的Matplotlib后端错误 【免费下载链接】text-generation-webui The original local LLM interface. Text, vision, tool-calling, training, and more. 100% offline. 项目地址: https://gitcode.com/GitHub_…...

编程新知 2026/4/1 1:04:31

快速验证openclaw：用快马AI一键生成安装脚本与抓取原型

最近在做一个机器人抓取相关的项目&#xff0c;偶然发现了openclaw这个开源工具。作为一个Python实现的轻量级抓取框架&#xff0c;它很适合快速搭建原型。不过在实际使用过程中&#xff0c;我发现它的安装和配置过程有点繁琐&#xff0c;特别是对新手不太友好。于是尝试用InsC…...

编程新知 2026/4/1 0:34:05

VHD/VHDX 数据守护：BAT位图校验与修复

VHD/VHDX 数据守护&#xff1a;BAT位图校验与修复VHD&#xff08;Virtual Hard Disk&#xff09;和 VHDX&#xff08;Virtual Hard Disk v2&#xff09;是微软 Hyper-V 等虚拟化平台常用的虚拟磁盘格式。在这些虚拟磁盘文件中&#xff0c;区块分配表&#xff08;Block Allocati…...

编程新知 2026/3/31 23:53:26