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

前端开发学习（一）VUE框架概述

news 文章来源：https://blog.csdn.net/Kxiansheng111/article/details/143022455 2025/5/6 13:41:15

一、MVC模式与MVVM模式

1.1mvc模式

MVC模式是移动端应用广泛的软件架构之一，MVC模式将应用程序划分为3部分:Model(数据模型)、View(用户界面视图)和Controller(控制器)。MVC模式的执行过程是将View层展示给用户，也就是通过 HTML页面接受用户动作，将指令传递给Controler，如单击一个按钮，就会将按钮触发的业务传递给 Controller:Controller完成业务逻辑，要求Model改变状态。

                           

                                                        图1：mvc执行过程图

1.2MVVM格式

MVVM 模式是将MVC模式的Controller改成 ViewModel。View的变化自动更新 ViewModel,ViewModel的变化也会自动同步到 View层显示。View层用来接受用户请求，如 DOM 事件、AJAX等:Model层处理数据，不再与 View层交互数据;ViewModel 监听 View 层请求状态的变化，同时刷新 View层显示，ViewModel和 Model层之间进行数据双向绑定，Model层监听ViewModel的变化。MVVM 模式的执行过程是 View层接受到请求告诉 VewModel，用户需要执行一些处理动作，当 ViewModel 发生变化，告诉 View层需要更新页面。所谓的数据双向绑定是 ViewModel 需要更新 Model 层的数据;反之,Model层的数据改变，在ViewModel中的数据状态也要进行相应的改变。

                                图2：mvvm执行过程图

1.3mvc模式和mvv模式的区别

在 MVC 模式中，数据是单向通信的，按照 View→Controller→Model-View方向循环。在MVVC模式中，数据可以双向通信，核心是ViewModel对象。

二、Vue框架的特性

Vue 是一套构建用户界面的渐进式框架，Vue只关注视图层，采用自底而上增量开发的设计，Vue的目标是通过 API实现数据绑定和组合视图组件。Vue是主流的MVVM 框架之一。

三、vue框架的安装与使用

3.1方法一

1.复制vue.js的全部内容

 进入这个网址，CTRL+A全选并复制所有内容

2.新建一个名称为vue2.js文件,将复制内容粘贴进去

3.测试+正确结果

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>vue的安装、创建vue.js</title><script src="./vue2.js"></script></head><body><div id="app">name={{name}}</div><script>var vm=new Vue({el:"#app",data:{name:"郑州"}})</script></body>
</html>

 

 3.2方法二：利用CDN方式引入vue.js文件

直接使用网址，不用下载

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CDN方式引用</title><script src="https://cdn.jsdelivr.net/npm/vue@2"></script></head><body><div id="app">name={{name}}</div><script>var vm=new Vue({el:"#app",data:{name:"河南"}})</script></body>
</html>

运行结果

3.3方法三：采用npm和webpack模块形式引入vue.js文件（暂时先不讲）

相关文章：

前端开发学习（一）VUE框架概述

一、MVC模式与MVVM模式 1.1mvc模式 MVC模式是移动端应用广泛的软件架构之一&#xff0c;MVC模式将应用程序划分为3部分:Model(数据模型)、View(用户界面视图)和Controller(控制器)。MVC模式的执行过程是将View层展示给用户&#xff0c;也就是通过 HTML页面接受用户动作&#…...

编程日记 2024/10/21 5:39:07

Linux操作系统的背景、发展历程及对比分析

1. UNIX发展历史 unix_百度百科 UNIX操作系统作为现代操作系统的奠基石&#xff0c;其发展历史可以追溯到20世纪60年代末。1969年&#xff0c;贝尔实验室的Ken Thompson、Dennis Ritchie以及他们的同事们为了实现一种多任务的、可移植的、简洁而高效的操作系统&#xff0c;开发…...

编程日记 2024/10/21 5:37:05

gaussdb 基础管理 数据库 表 用户 模式 权限 存储过程

数据库database #创建数据库&#xff0c;指定字符集UTF8&#xff0c;缺省情况下新数据库将通过复制标准系统数据库template0来创建&#xff0c;且仅支持使用template0来创建。 CREATE DATABASE devdb ENCODING UTF8 template template0; CREATE DATABASE testdb; 标识符的命名…...

编程日记 2024/10/21 5:36:03

i9-11900H+3070laptop+win10下的yolov5配置

参考博客&#xff1a;https://blog.csdn.net/qq_67105081/article/details/138232424 关键问题&#xff1a; 1、由之前装的CUDA11.6&#xff08;有篇博客上可以换版本&#xff09;CUDNN8.4.0Python3.9.13推后在指定的虚拟环境中装了Pytorch1.12.1(在AnnacondaPrompt下用pip命令…...

编程日记 2024/10/21 5:35:02

SpringBoot日常：封装redission starter组件

文章目录 逻辑实现POM.xmlRedissionConfigRedissionPropertiesRedissionUtilsspring.factories 功能测试application.yml配置POM.xmlTestController运行测试 本章内容主要介绍如何通过封装相关的redission连接配置和工具类&#xff0c;最终完成一个通用的redission starter。并…...

编程日记 2024/10/21 5:34:00

腾讯云技术深度解析：构建高效云原生应用与数据安全管理

腾讯云技术深度解析&#xff1a;构建高效云原生应用与数据安全管理 在当今快速发展的技术环境中&#xff0c;云计算已经成为企业数字化转型的关键驱动力。腾讯云作为中国领先的云服务提供商&#xff0c;凭借其卓越的技术和创新能力&#xff0c;为企业提供了高效、可扩展的云原…...

编程日记 2024/10/21 5:33:00

ACM与蓝桥杯竞赛指南 基本输入输出格式二

A B || 继续看第二个AB问题&#xff0c;A B || &#xff0c;大家可以先自行读题&#xff0c;或者有经验直接看输入输出格式&#xff0c;发现依然是求AB&#xff0c;但它的输入数据为&#xff1a; 2 1 5 10 20 输出&#xff1a; 6 20 此题相比第一道而言&#xff0c;本…...

编程日记 2024/10/21 5:29:55

解决SolidWorks装配体无法更改透明度问题

这个问题是在零件上各个部件显示正常&#xff0c;且透明度可以更改&#xff0c;但是一到装配体上就出现问题都变成了灰色。更改透明度也不行。 解决方法&#xff1a; 1、因为该装配体里面存在过多的零部件层级的自定义外观&#xff08;这些外观可能互相之前有了干扰&#xff0…...

编程日记 2024/10/21 5:27:53

2024_newstar_week1_crypto

baby_mod 题目 from Crypto.Util.number import * from enc import flagm bytes_to_long(flag) p getPrime(512) q getPrime(512) r getPrime(777) t getPrime(777) tmp getPrime(15) e 65537 n p*q print(f"c {pow(m,e,n)}") print(f"leak {p*r-q*…...

编程日记 2024/10/21 5:26:52

6.2 URDF集成Rviz基本流程

前面介绍过&#xff0c;URDF 不能单独使用&#xff0c;需要结合 Rviz 或 Gazebo&#xff0c;URDF 只是一个文件&#xff0c;需要在 Rviz 或 Gazebo 中渲染成图形化的机器人模型&#xff0c;当前&#xff0c;首先演示URDF与Rviz的集成使用&#xff0c;因为URDF与Rviz的集成较之于…...

编程日记 2024/10/21 5:25:50

双系统一体机电脑无法启动报错“Something has gone serously wrong: SBAT self-check failed: Security Policy Violation”

双系统一体机电脑无法启动 问题搜索解决办法解决开启时 F2 进入系统设置界面选择“疑难解答”选择“高级选项”选择“UEFI固件设置”进入“Start Menu”界面选择“Security”关闭相关选项 问题 在2024/8/14日Windows环境&#xff0c;系统更新了两个Windows更新项后&#xff0c…...

编程日记 2024/10/21 5:23:48

八股面试2（自用）

mysql存储引擎 存储引擎&#xff1a;定义数据的存储方式&#xff0c;以及数据读取的实现逻辑 在以前数据库5.5默认MyISAM引擎&#xff0c;之后默认InnoDB引擎 MyISAM引擎的数据和索引是分开存储的&#xff0c;InnoDb将索引和文件存储在同一个文件。 MyISAM不支持事务&#…...

编程日记 2024/10/21 5:22:46

Leetcode 347 Top K Frequent Elements

题意&#xff1a; 求前k个出现频率最高的元素 首先得到一个频率图这是肯定的&#xff0c;下一步要考虑建立一个堆&#xff0c;堆中保存着前k个频率最大的数字&#xff0c;这个怎么做&#xff0c;可以用customized cmp来做&#xff0c;把数字存进去完事儿。注意这里不用 保存所有…...

编程日记 2024/10/21 5:21:42

[Linux网络编程]03-TCP协议

一.TCP协议数据通信的过程 TCP数据报如下&#xff0c;数据报中的标志位双端通信的关键。 三次握手: 1.客户端向服务端发送SYN标志位&#xff0c;请求建立连接&#xff0c;同时发送空包 2.服务端向客户端回发ACK标志位(即确认标志位&#xff0c;任何一端发送数据后都需要另一端…...

编程日记 2024/10/21 5:20:40

Windows和Linux在客户端/服务端在安全攻防方面的区别

Windows和Linux在客户端/服务端的安全攻防上存在一些显著区别&#xff0c;主要体现在系统架构、权限管理、安全工具、更新机制以及社区支持等方面。 一、系统架构与设计差异 1. 内核架构 Windows&#xff1a;Windows是一个闭源的操作系统&#xff0c;由微软开发和维护&#…...

编程日记 2024/10/21 5:19:39

VUE 仿神州租车-开放平台

项目背景&#xff1a; 神州租车是一家提供汽车租赁服务的公司&#xff0c;其API开放平台为开发者提供了访问神州租车相关服务和数据的接口。用VUE技术来仿照其开发平台。 成果展示&#xff1a; 首页&#xff1a; API文档&#xff1a; 关于我们&#xff1a;...

编程日记 2024/10/21 5:17:37

计算机的错误计算（一百二十九）

摘要 用错数解释计算机的错误计算&#xff08;一百二十七&#xff09;中的计算错误的原因。 从&#xff08;一百二十七&#xff09;知&#xff0c; 有四种形式&#xff1a; 四个 分别有1位、8位、8位、0位错误数字。 下面用错数解释前面3个错误计算的由来。 &#xff08;1&a…...

编程日记 2024/10/21 5:16:36

process.platform 作用

process.platform 可以获取当前运行 Node.js 进程的操作系统平台的信息。 一、平台特定的代码执行 1. 适应不同操作系统 不同的操作系统可能有不同的行为、文件路径格式、命令行参数等。通过检查process.platform的值&#xff0c;可以根据当前运行的平台执行特定的代码逻辑。…...

编程日记 2024/10/21 5:15:35

Java项目-基于springboot框架的企业客户信息反馈系统项目实战(附源码+文档)

作者&#xff1a;计算机学长阿伟 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、ElementUI等&#xff0c;“文末源码”。 开发运行环境 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/…...

编程日记 2024/10/21 5:13:34

《深度学习》dlib 人脸应用实例 仿射变换 换脸术

目录 一、仿射变换 1、什么是仿射变换 2、原理 3、图像的仿射变换 1&#xff09;图像的几何变换主要包括 2&#xff09;图像的几何变换主要分为 1、刚性变换&#xff1a; 2、仿射变换 3、透视变换 3&#xff09;常见仿射变换 二、案例实现 1、定义关键点索引 2、定…...

编程日记 2024/10/21 5:12:33

springboot044美容院管理系统(论文+源码)_kaic

本科毕业设计论文 题目&#xff1a;美容院管理系统设计与实现 系 别&#xff1a; XX系&#xff08;全称&#xff09; 专 业&#xff1a; 软件工程 班 级&#xff1a; 软件工程15201 学生姓名&#xff1a; 学生学号&#xff1a; 指导教师&#xff1a; 导师…...

编程日记 2024/10/21 5:10:31

大数据新视界 --大数据大厂之数据脱敏技术在大数据中的应用与挑战

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...

编程日记 2024/10/21 5:09:30

Erric Gamma 关于resuable code的采访

采访地址 The risk of speculating Bill Venners: The GoF book says, “The key to maximizing reuse lies in anticipating new requirements and changes to existing requirements, and in designing your systems so they can evolve accordingly. To design a system s…...

编程日记 2024/10/21 5:08:28

【Ubuntu18.04命令行code打不开】可能的解决方法

目录 问题&#xff1a;命令行code打不开文件尝试① kimi是这么说的② sudo apt-get install apparmor apparmor_utils③ 在混沌的操作完以上一通后&#xff0c;sudo apt-get install snapd 我试了将近一个小时 : ( so depressed 我只是想用vscode打开个文件夹&#xff0c;我甚至…...

编程日记 2024/10/21 5:07:28

大数据毕业设计基于springboot+Hadoop实现的豆瓣电子图书推荐系统

文章目录 前言项目介绍技术介绍功能介绍核心代码数据库参考 系统效果图 前言 文章底部名片&#xff0c;获取项目的完整演示视频&#xff0c;免费解答技术疑问 项目介绍 随着开数字化阅读的普及&#xff0c;豆瓣电子图书推荐系统应运而生&#xff0c;旨在为用户提供个性化的阅…...

编程日记 2024/10/21 5:05:26

【进阶OpenCV】 （15）-- 人脸识别 -- EigenFaces算法

文章目录 EigenFaces算法一、算法原理二、算法流程三、算法特点四、代码步骤1. 图像预处理2. 创建Eigenfaces人脸识别器3. 训练模型4. 预测图像 总结 EigenFaces算法 EigenFaces算法是一种基于主成分分析&#xff08;PCA&#xff09;的人脸识别方法&#xff0c;其核心思想是通…...

编程日记 2024/10/21 5:01:21

无人机封闭空间建图检测系统技术详解

无人机封闭空间建图检测系统技术是一种集成了多种传感器、智能算法与控制系统的高级技术&#xff0c;旨在实现无人机在复杂封闭环境下的自主导航、精确建图与高效检测。以下是对该技术的详细解析&#xff1a; 一、技术概述 无人机封闭空间建图检测系统通过集成激光雷达(LiDAR…...

编程日记 2024/10/21 5:00:20

webpack自定义插件 ChangeScriptSrcPlugin

插件文件 class ChangeScriptSrcPlugin {apply(compiler) {const pluginName "ChangeScriptSrcPlugin";compiler.hooks.compilation.tap(pluginName, (compilation, callback) > {compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(pluginName,(html…...

编程日记 2024/10/21 4:59:19

win11 笔记本指纹驱动正常就是使用不了

去微信官网下载最新的win11重装系统后&#xff0c;发现笔记本上的指纹登录失效了&#xff0c;网上搜索各种试过不行&#xff0c;新版本与旧的win11有微出入&#xff0c;那些方法都不行。系统版本如下&#xff1a; 操作前确保&#xff1a; 1. win11能升级&#xff0c;默认有试用…...

编程日记 2024/10/21 4:58:16

表的约束

约束就是设定条条框框&#xff0c;保证被约束目标符合约束条件。表的约束就是对表内列数据的约束&#xff0c;保证列数据的正确性。 default 设置列数据的默认值。当用户添加记录的时候没有初始化该列的数据&#xff0c;就是使用默认值初始化。 如果创建表的时候没有设置默认…...

编程日记 2024/10/21 4:57:15