Vue的下载以及MVVM分析
😀前言本片文章是vue系列第一篇整理了vue的基础和发展史
🏠个人主页:尘觉主页
🧑个人简介:大家好,我是尘觉,希望我的文章可以帮助到大家,您的满意是我的动力😉😉
在csdn获奖荣誉: 🏆csdn城市之星2名
💓Java全栈群星计划top前5
🤗 端午大礼包获得者
💕欢迎大家:这里是CSDN,我总结知识的地方,欢迎来到我的博客,感谢大家的观看🥰
如果文章有什么需要改进的地方还请大佬不吝赐教 先在次感谢啦😊
文章目录
- 💫Vue
- 💭基本介绍
- 💭官网
- 💭git 地址:
- 🤔MVVM-示意图
- 😮解读 MVVM 思想(上图)
- 💗下载官网
- 🤔简单的代码示例方便理解
- 💖Vue 数据绑定机制分析!
- 😉注意事项和使用细节
- 😄总结
💫Vue
💭基本介绍
-
Vue (读音 /vjuː/,类似于 view) 是一个前端框架, 易于构建用户界面
-
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或项目整合
-
支持和其它类库结合使用
-
开发复杂的单页应用非常方便
-
Vue 是 Vue.js 的简称
💭官网
https://cn.vuejs.org/
💭git 地址:
https://github.com/vuejs
🤔MVVM-示意图

😮解读 MVVM 思想(上图)
- M∶即 Model,模型,包括数据和一些基本操作
- V∶即View,视图,页面渲染结果
- VM∶即 View-Model,模型与视图间的双向操作(无需开发人员干涉)
- 在 MVVM之前,开发人员从后端获取需要的数据模型,然后要通过 DOM 操作 Model渲染到View 中。而后当用户操作视图,我们还需要通过 DOM获取 View 中的数据,然后同步到Model 中。
- 而 MVVM中的VM 要做的事情就是把DOM 操作完全封装起来,开发人员不用再关心
- Model 和View 之间是如何互相影响的
- 只要我们 Model 发生了改变,View上自然就会表现出来
- 当用户修改了View,Model 中的数据也会跟着改变。。
- 结果:把开发人员从繁琐的 DOM操作中解放出来,把关注点放在如何操作 Model上, 大大提高开发效率
💗下载官网
官网文档:https://cn.vuejs.org/v2/guide/index.html
下载: https://cn.vuejs.org/v2/guide/installation.html
小技巧:为了让 IDEA识别Vue 代码,需要安装插件 Vue.js
🤔简单的代码示例方便理解
-
div元素不是必须的,也可以是其它元素,比如span,但是约定都是将vue实例挂载到div
-
因为div更加适合做布局这里就用div了
-
id 不是必须为app , 是程序员指定,一般我们就使用app
-
{{message}} : 插值表达式
-
message 就是从model的data数据池来设置
-
当我们的代码执行时,会到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 数据绑定机制分析!
-
通过查看浏览器的控制台, 可以分析 Vue 数据绑定机制/MVVM

-
上面这个 debug 方式, 必须掌握, 对应我们后面调试 Vue 项目很有帮助
😉注意事项和使用细节
- 注意代码顺序,要求 div 在前,script 在后,否则无法绑定数据

-
从案例可以体会声明式渲染:Vue.js 采用简洁的模板语法来声明式地将数据渲染进DOM 的系统, 做到数据和显示分离
-
Vue 没有繁琐的 DOM 操作,如果使用 jQuery,我们需要先找到 div 节点,获取到 DOM
对象,然后进行节点操作, 显然 Vue 更加简洁
😄总结
本片讲解了Vue的基本介绍和怎么下载以及解读MVVM机制和数据绑定的分析
😁vue系列
Vue2 脚手架下载及配置淘宝镜像–和ieda的配置和打开
Vue 项目结构和文件分析
🤔欢迎大家加入我的社区 尘觉社区
文章到这里就结束了,如果有什么疑问的地方请指出,诸佬们一起来评论区一起讨论😁
希望能和诸佬们一起努力,今后我们一起观看感谢您的阅读🍻
如果帮助到您不妨3连支持一下,创造不易您们的支持是我的动力🤞
相关文章:
Vue的下载以及MVVM分析
😀前言本片文章是vue系列第一篇整理了vue的基础和发展史 🏠个人主页:尘觉主页 🧑个人简介:大家好,我是尘觉,希望我的文章可以帮助到大家,您的满意是我的动力😉Ƕ…...
ElasticSearch学习--自动补全
目录 自定义分词器 介绍 配置自定义分词器 拼音分词器的问题编辑 总结 DSL自动补全查询 RestAPI实现自动补全 自定义分词器 介绍 自定义分词器只在当前库中有效 配置自定义分词器 拼音分词器的问题 总结 DSL自动补全查询 RestAPI实现自动补全...
【C++】多态,虚函数表相关问题解决
文章目录 多态概念及其触发条件重写和协变(考点1)(考点2) 虚函数表及其位置(考点3) 多继承中的虚函数表 多态概念及其触发条件 多态的概念:通俗来说,就是多种形态。具体点就是去完成…...
探索大型语言模型的开源人工智能基础设施:北京开源AI Meetup回顾
原文参见Explore open source AI Infra for Large Language Models: Highlights from the Open Source AI Meetup Beijing | Cloud Native Computing Foundation 背景介绍: 最近,在 ChatGPT 的成功推动下,大型语言模型及其应用程序的流行度激…...
Langchain 的 Conversation buffer window memory
Langchain 的 Conversation buffer window memory ConversationBufferWindowMemory 保存一段时间内对话交互的列表。它仅使用最后 K 个交互。这对于保持最近交互的滑动窗口非常有用,因此缓冲区不会变得太大。 我们首先来探讨一下这种存储器的基本功能。 示例代码&…...
电流源电路
3.3.3电流源电路 镜像电流源 电路 分析 仿真 比例电流源 电路 分析 仿真 加射极输出器的电流源1 电路 分析 仿真 加射极输出器的电流源2 电路 分析 仿真 威尔逊电流源 电路 分析 仿真...
iOS开发-CMMotionManager传感器陀螺仪
iOS开发-CMMotionManager传感器陀螺仪 之前开发中遇到需要使用陀螺仪判断是否拍照时候水平判断,如果没有水平拍照,则给出提示。方便用户拍照合适的题目图片。 一、CMMotionManager CMMotionManager是什么 CMMotionManager 是 Core Motion 库的核心类&…...
影刀下载,插件安装
1、下载 在影刀官网下载:www.yingdao.com 2、谷歌插件安装 参考: 影刀插件安装各种方式 浏览器安装插件说明 - 影刀帮助中心 安装说明:驱动外置 Chrome 需要安装插件,并且保证此插件处于开启状态 方式一:用户头…...
Linux的tcpdump命令详解
tcpdump 一款sniffer工具,是Linux上的抓包工具,嗅探器 补充说明 tcpdump命令 是一款抓包,嗅探器工具,它可以打印所有经过网络接口的数据包的头信息,也可以使用-w选项将数据包保存到文件中,方便以后分析。…...
springboot运行报错Failed to load ApplicationContext for xxx
Failed to load ApplicationContext for报错解决方法 报错Failed to load ApplicationContext for 报错Failed to load ApplicationContext for 网上找了一堆方法都尝试了还是没用 包括添加mapperScan,添加配置类 配置pom文件 [外链图片转存失败,源站可能有防盗链机…...
[SQL挖掘机] - 内连接: inner join
介绍: 内连接是一种多表连接方式,用于将两个或多个表中的数据通过共同的列值进行匹配,并返回满足连接条件的匹配行。简单来说,内连接能够将相关联的数据组合在一起,以便进行更复杂和全面的数据分析。 内连接的工作原理如下&…...
mysql(四)数据备份
目录 前言 一、概述 二、备份的类型 (一)物理与逻辑角度 (二)数据库备份策略角度 三、常见的备份方法 四、完整备份 (一)打包数据库文件备份 (二)备份工具备份 五、增量备份 六、操…...
Spring 拦截器
上篇博客链接:SpringAOP详解 上篇博客我们提到使用AOP的环绕通知来完成统一的用户登陆验证虽然方便了许多,但随之而来也带来了新的问题: HttpSession不知道如何去获取,获取困难登录和注册的方法并不需要拦截,使用切点没办法定义哪…...
【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.*///--------…...
JavaScript的函数中this的指向
JavaScript的函数中this的指向 JavaScript 语言之所以有 this 的设计,跟内存里面的数据结构有关系。 以下例子来简单描述this在不同情况下所指向的对象。 var obj {aa: function(){console.log(this.num)},num: 5 };var aa obj.aa; var num 10;obj.aa(); // …...
Caddy 中实现自动 HTTPS
要在 Caddy 中实现自动 HTTPS,您可以按照以下步骤进行操作: 步骤 1:安装 Caddy 首先,您需要安装 Caddy 服务器。您可以从 Caddy 的官方网站(https://caddyserver.com/)下载适用于您的操作系统的最新版本。…...
SK5代理(socks5代理)在网络安全与爬虫应用中的优势与编写指南
一、SK5代理(socks5代理)的基本概念 SK5代理是一种网络代理协议,它允许客户端通过代理服务器与目标服务器进行通信。相较于HTTP代理,SK5代理在传输数据时更加高效且安全,它支持TCP和UDP协议,并且能够实现数…...
【LeetCode-简单】剑指 Offer 06. 从尾到头打印链表(详解)
题目 输入一个链表的头节点,从尾到头反过来返回每个节点的值(用数组返回)。 题目地址:剑指 Offer 06. 从尾到头打印链表 - 力扣(LeetCode) 方法1:栈 思路 题目要求我们将链表的从尾到投打印一…...
【LeetCode】114.二叉树展开为链表
题目 给你二叉树的根结点 root ,请你将它展开为一个单链表: 展开后的单链表应该同样使用 TreeNode ,其中 right 子指针指向链表中下一个结点,而左子指针始终为 null 。展开后的单链表应该与二叉树 先序遍历 顺序相同。 示例 1&…...
DAY3,Qt(完成闹钟的实现,定时器事件处理函数的使用)
1.完成闹钟的实现,到点播报文本框的内容; ---alarm.h---头文件 #ifndef ALARM_H #define ALARM_H#include <QWidget> #include <QTimerEvent> //定时器处理函数类 #include <QTime> //时间类 #include <QPushButton> //按钮…...
stm32G473的flash模式是单bank还是双bank?
今天突然有人stm32G473的flash模式是单bank还是双bank?由于时间太久,我真忘记了。搜搜发现,还真有人和我一样。见下面的链接:https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...
利用ngx_stream_return_module构建简易 TCP/UDP 响应网关
一、模块概述 ngx_stream_return_module 提供了一个极简的指令: return <value>;在收到客户端连接后,立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量(如 $time_iso8601、$remote_addr 等)&a…...
golang循环变量捕获问题
在 Go 语言中,当在循环中启动协程(goroutine)时,如果在协程闭包中直接引用循环变量,可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下: 问题背景 看这个代码片段: fo…...
在rocky linux 9.5上在线安装 docker
前面是指南,后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
智能仓储的未来:自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”,物流的终极形态正在诞生 想象这样的场景: 凌晨3点,某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径;AI视觉系统在0.1秒内扫描包裹信息;数字孪生平台正模拟次日峰值流量压力…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包: for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中,提示一个依赖外部头文件的cpp源文件需要同步,点…...
GruntJS-前端自动化任务运行器从入门到实战
Grunt 完全指南:从入门到实战 一、Grunt 是什么? Grunt是一个基于 Node.js 的前端自动化任务运行器,主要用于自动化执行项目开发中重复性高的任务,例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...
探索Selenium:自动化测试的神奇钥匙
目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...
