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

Vue的下载以及MVVM分析

news 2025/11/4 10:42:24

😀前言本片文章是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的基础和发展史 🏠个人主页：尘觉主页 🧑个人简介：大家好，我是尘觉，希望我的文章可以帮助到大家，您的满意是我的动力😉&#x1f6…...

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

ElasticSearch学习--自动补全

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

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

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

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

编程日记 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 背景介绍： 最近，在 ChatGPT 的成功推动下，大型语言模型及其应用程序的流行度激…...

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

Langchain 的 Conversation buffer window memory

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

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

电流源电路

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

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

iOS开发-CMMotionManager传感器陀螺仪

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

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

影刀下载，插件安装

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

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

Linux的tcpdump命令详解

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

编程日记 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，添加配置类配置pom文件 [外链图片转存失败,源站可能有防盗链机…...

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

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

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

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

mysql（四）数据备份

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

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

Spring 拦截器

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

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

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 的设计，跟内存里面的数据结构有关系。以下例子来简单描述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，您可以按照以下步骤进行操作： 步骤 1：安装 Caddy 首先，您需要安装 Caddy 服务器。您可以从 Caddy 的官方网站（https://caddyserver.com/）下载适用于您的操作系统的最新版本。…...

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

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

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

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

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

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

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

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

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

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

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

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

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

华为云AI开发平台ModelArts

华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/11/3 19:41:52

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务三、…...

编程新知 2025/10/16 1:31:30

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录一、SQL注入二、insert注入三、报错型注入四、updatexml函数五、源码审计六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/11/1 2:18:30