前端开发学习(一)VUE框架概述
一、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模式是移动端应用广泛的软件架构之一,MVC模式将应用程序划分为3部分:Model(数据模型)、View(用户界面视图)和Controller(控制器)。MVC模式的执行过程是将View层展示给用户,也就是通过 HTML页面接受用户动作&#…...
Linux操作系统的背景、发展历程及对比分析
1. UNIX发展历史 unix_百度百科 UNIX操作系统作为现代操作系统的奠基石,其发展历史可以追溯到20世纪60年代末。1969年,贝尔实验室的Ken Thompson、Dennis Ritchie以及他们的同事们为了实现一种多任务的、可移植的、简洁而高效的操作系统,开发…...
gaussdb 基础管理 数据库 表 用户 模式 权限 存储过程
数据库database #创建数据库,指定字符集UTF8,缺省情况下新数据库将通过复制标准系统数据库template0来创建,且仅支持使用template0来创建。 CREATE DATABASE devdb ENCODING UTF8 template template0; CREATE DATABASE testdb; 标识符的命名…...
i9-11900H+3070laptop+win10下的yolov5配置
参考博客:https://blog.csdn.net/qq_67105081/article/details/138232424 关键问题: 1、由之前装的CUDA11.6(有篇博客上可以换版本)CUDNN8.4.0Python3.9.13推后在指定的虚拟环境中装了Pytorch1.12.1(在AnnacondaPrompt下用pip命令…...
SpringBoot日常:封装redission starter组件
文章目录 逻辑实现POM.xmlRedissionConfigRedissionPropertiesRedissionUtilsspring.factories 功能测试application.yml配置POM.xmlTestController运行测试 本章内容主要介绍如何通过封装相关的redission连接配置和工具类,最终完成一个通用的redission starter。并…...
腾讯云技术深度解析:构建高效云原生应用与数据安全管理
腾讯云技术深度解析:构建高效云原生应用与数据安全管理 在当今快速发展的技术环境中,云计算已经成为企业数字化转型的关键驱动力。腾讯云作为中国领先的云服务提供商,凭借其卓越的技术和创新能力,为企业提供了高效、可扩展的云原…...
ACM与蓝桥杯竞赛指南 基本输入输出格式二
A B || 继续看第二个AB问题,A B || ,大家可以先自行读题,或者有经验直接看输入输出格式,发现依然是求AB,但它的输入数据为: 2 1 5 10 20 输出: 6 20 此题相比第一道而言,本…...
解决SolidWorks装配体无法更改透明度问题
这个问题是在零件上各个部件显示正常,且透明度可以更改,但是一到装配体上就出现问题都变成了灰色。更改透明度也不行。 解决方法: 1、因为该装配体里面存在过多的零部件层级的自定义外观(这些外观可能互相之前有了干扰࿰…...
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*…...
6.2 URDF集成Rviz基本流程
前面介绍过,URDF 不能单独使用,需要结合 Rviz 或 Gazebo,URDF 只是一个文件,需要在 Rviz 或 Gazebo 中渲染成图形化的机器人模型,当前,首先演示URDF与Rviz的集成使用,因为URDF与Rviz的集成较之于…...
双系统一体机电脑无法启动报错“Something has gone serously wrong: SBAT self-check failed: Security Policy Violation”
双系统一体机电脑无法启动 问题搜索解决办法解决开启时 F2 进入系统设置界面选择“疑难解答”选择“高级选项”选择“UEFI固件设置”进入“Start Menu”界面选择“Security”关闭相关选项 问题 在2024/8/14日Windows环境,系统更新了两个Windows更新项后,…...
八股面试2(自用)
mysql存储引擎 存储引擎:定义数据的存储方式,以及数据读取的实现逻辑 在以前数据库5.5默认MyISAM引擎,之后默认InnoDB引擎 MyISAM引擎的数据和索引是分开存储的,InnoDb将索引和文件存储在同一个文件。 MyISAM不支持事务&#…...
Leetcode 347 Top K Frequent Elements
题意: 求前k个出现频率最高的元素 首先得到一个频率图这是肯定的,下一步要考虑建立一个堆,堆中保存着前k个频率最大的数字,这个怎么做,可以用customized cmp来做,把数字存进去完事儿。注意这里不用 保存所有…...
[Linux网络编程]03-TCP协议
一.TCP协议数据通信的过程 TCP数据报如下,数据报中的标志位双端通信的关键。 三次握手: 1.客户端向服务端发送SYN标志位,请求建立连接,同时发送空包 2.服务端向客户端回发ACK标志位(即确认标志位,任何一端发送数据后都需要另一端…...
Windows和Linux在客户端/服务端在安全攻防方面的区别
Windows和Linux在客户端/服务端的安全攻防上存在一些显著区别,主要体现在系统架构、权限管理、安全工具、更新机制以及社区支持等方面。 一、系统架构与设计差异 1. 内核架构 Windows:Windows是一个闭源的操作系统,由微软开发和维护&#…...
VUE 仿神州租车-开放平台
项目背景: 神州租车是一家提供汽车租赁服务的公司,其API开放平台为开发者提供了访问神州租车相关服务和数据的接口。用VUE技术来仿照其开发平台。 成果展示: 首页: API文档: 关于我们:...
计算机的错误计算(一百二十九)
摘要 用错数解释计算机的错误计算(一百二十七)中的计算错误的原因。 从(一百二十七)知, 有四种形式: 四个 分别有1位、8位、8位、0位错误数字。 下面用错数解释前面3个错误计算的由来。 (1&a…...
process.platform 作用
process.platform 可以获取当前运行 Node.js 进程的操作系统平台的信息。 一、平台特定的代码执行 1. 适应不同操作系统 不同的操作系统可能有不同的行为、文件路径格式、命令行参数等。通过检查process.platform的值,可以根据当前运行的平台执行特定的代码逻辑。…...
Java项目-基于springboot框架的企业客户信息反馈系统项目实战(附源码+文档)
作者:计算机学长阿伟 开发技术:SpringBoot、SSM、Vue、MySQL、ElementUI等,“文末源码”。 开发运行环境 开发语言:Java数据库:MySQL技术:SpringBoot、Vue、Mybaits Plus、ELementUI工具:IDEA/…...
《深度学习》dlib 人脸应用实例 仿射变换 换脸术
目录 一、仿射变换 1、什么是仿射变换 2、原理 3、图像的仿射变换 1)图像的几何变换主要包括 2)图像的几何变换主要分为 1、刚性变换: 2、仿射变换 3、透视变换 3)常见仿射变换 二、案例实现 1、定义关键点索引 2、定…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...
7.4.分块查找
一.分块查找的算法思想: 1.实例: 以上述图片的顺序表为例, 该顺序表的数据元素从整体来看是乱序的,但如果把这些数据元素分成一块一块的小区间, 第一个区间[0,1]索引上的数据元素都是小于等于10的, 第二…...
深入剖析AI大模型:大模型时代的 Prompt 工程全解析
今天聊的内容,我认为是AI开发里面非常重要的内容。它在AI开发里无处不在,当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗",或者让翻译模型 "将这段合同翻译成商务日语" 时,输入的这句话就是 Prompt。…...
PHP和Node.js哪个更爽?
先说结论,rust完胜。 php:laravel,swoole,webman,最开始在苏宁的时候写了几年php,当时觉得php真的是世界上最好的语言,因为当初活在舒适圈里,不愿意跳出来,就好比当初活在…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名(Class Name)2.协议名(Protocol Name)3.方法名(Method Name)4.属性名(Property Name)5.局部变量/实例变量(Local / Instance Variables&…...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中,从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备(如专用硬件设备),从而消除了直接物理连接的需要。USB over IP的…...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下,限制某个 IP 的访问频率是非常重要的,可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案,使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
第7篇:中间件全链路监控与 SQL 性能分析实践
7.1 章节导读 在构建数据库中间件的过程中,可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中,必须做到: 🔍 追踪每一条 SQL 的生命周期(从入口到数据库执行)&#…...
日常一水C
多态 言简意赅:就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过,当子类和父类的函数名相同时,会隐藏父类的同名函数转而调用子类的同名函数,如果要调用父类的同名函数,那么就需要对父类进行引用&#…...

