前端开发学习(一)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、定…...
synchronized 学习
学习源: https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖,也要考虑性能问题(场景) 2.常见面试问题: sync出…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上,所以报错,到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本,cu、torch、cp 的版本一定要对…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试,通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小,增大可提高计算复杂度duration: 测试持续时间(秒&…...
CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机(Finite Automaton, FA)到正规文法(Regular Grammar)转换器,它配备了一个直观且完整的图形用户界面,使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件,用于在原生应用中加载 HTML 页面: 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
华硕a豆14 Air香氛版,美学与科技的馨香融合
在快节奏的现代生活中,我们渴望一个能激发创想、愉悦感官的工作与生活伙伴,它不仅是冰冷的科技工具,更能触动我们内心深处的细腻情感。正是在这样的期许下,华硕a豆14 Air香氛版翩然而至,它以一种前所未有的方式&#x…...
c++第七天 继承与派生2
这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分:派生类构造函数与析构函数 当创建一个派生类对象时,基类成员是如何初始化的? 1.当派生类对象创建的时候,基类成员的初始化顺序 …...
HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散
前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说,在叠衣服的过程中,我会带着团队对比各种模型、方法、策略,毕竟针对各个场景始终寻找更优的解决方案,是我个人和我司「七月在线」的职责之一 且个人认为,…...

