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

Vue的下载以及MVVM分析

news 文章来源：https://blog.csdn.net/apple_67445472/article/details/131954859 2025/5/18 18:15:04

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

TL-ER3220G设置vlan

TL-ER3220G是企业宽带路由器。 自带5个RJ45接口。 其中接口1到接口4都可以接入宽带线路。最多可以并接4路。 本例由接口1接入宽带&#xff0c;默认接口2到接口4组成1个vlan&#xff0c;名称vlan。其中接口5特殊&#xff0c;带宽最大100M。 计划将接口2和接口4组成第一个vlan&…...

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

PHPWord 实现合并多个word文件

PHPWord 本来想着当调包侠呢&#xff0c;结果翻了一遍文档&#xff0c;没有这种操作支持&#xff0c;阿这&#x1f602; GPT 不出意外的一顿胡扯&#xff0c;给&#x1f468;‍&#x1f9b3;气的要中风啦 思路 word 也就是docx结尾的文件本质上就是xml字符串&#xff0c; …...

编程日记 2023/7/28 5:43:21

rust持续学习Box::leak

Box就是unique_ptr 这个函数的功能是消费box返回一个全局变量&#xff01; 写一个函数&#xff0c;想要真的返回全局变量&#xff0c;感觉用这个是个好的做法 fn Foo()->Option<&static mut A> {let a Box::new(A());Some(Box::leak(a)) }这样就能当真拿到这个全…...

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

通过SSH实现将本地端口反向代理到公网服务器

使用场景 有一台公网服务器&#xff0c;能够对外开放服务进行访问&#xff0c;但是这个公网服务器资源较低&#xff0c;无法运行太多服务 有一台闲置电脑可以全天候开机使用&#xff0c;且配置较好&#xff0c;可以部署多个服务&#xff0c;但是没有公网IP 需求&#xff1a;将…...

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

Fragment的基本用法、Fragment和活动间的通信、Fragment的生命周期、动态加载布局的技巧

一、Fragment的简单用法 1、制作Fragment 1.1 新建一个布局文件left_fragment.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:orientation"ve…...

编程日记 2023/7/28 5:40:16

机器学习 day30（正则化参数λ对模型的影响）

λ对Jcv和Jtrain的影响 假设该模型为四阶多项式当λ很大时&#xff0c;在最小化J的过程中&#xff0c;w会很小且接近0&#xff0c;此时模型f(x)近似于一个常数&#xff0c;所以此时模型欠拟合&#xff0c;Jtrain和Jcv都很大当λ很小时&#xff0c;表示模型几乎没有正则化&…...

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

图文教程：如何在 3DS Max 中创建3D迷你卡通房屋

推荐&#xff1a; NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 在本教程中&#xff0c;我们将学习如何创建一个有趣的、低多边形的迷你动画房子&#xff0c;你可以在自己的插图或视频游戏项目中使用它。您将学习的一些技能将包括创建基本的3D形状和基本的建模技术。让我…...

编程日记 2023/7/28 5:38:13

根据UIL下载图片/视频、根据URL自动下载图片/视频、GUI自动下载想要的图片

目录 1&#xff0c;根据UIL下载图片/视频 2&#xff0c;根据URL自动下载图片/视频 3、GUI自动下载想要的图片 ①点击下载按钮&#xff0c;进行挨个下载 ②右击保存进行下载图片 4、图片或视频URL批量放入浏览器页面上 1&#xff0c;根据UIL下载图片/视频 def downForInter…...

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

HTML ＜picture＞ 标签

实例 如何使用 <picture> 标签： <picture><source media="(min-width:650px)" srcset="/i/photo/flower-4.jpg"><source media="(min-width:465px)" srcset="/i/photo/tulip.jpg"><img src="/i/ph…...

编程日记 2023/7/28 5:36:11

力扣天天练--week3-LeetCode75

topic75-9-t443:压缩字符串 题目描述&#xff1a; 给你一个字符数组 chars &#xff0c;请使用下述算法压缩&#xff1a; 从一个空字符串 s 开始。对于 chars 中的每组 连续重复字符 &#xff1a; 如果这一组长度为 1 &#xff0c;则将字符追加到 s 中。 否则&#xff0c;需…...

编程日记 2023/7/28 5:35:10