Vue02-第一个Vue程序

第一个Vue程序

1、什么是MVVM

MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的博客上发表。

MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下：

  • 该层向上与视图层进行双向数据绑定

  • 向下与Model层通过接口请求进行数据交互

    在这里插入图片描述

MVVM已经相当成熟了，主要运用但不仅仅在网络应用程序开发中。当下流行的MVVM框架有Vue.js，Anfular JS

2、为什么要使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处

  • 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
  • 可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
  • 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。
  • 可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。

在这里插入图片描述

（1）View

View是视图层， 也就是用户界面。前端主要由HTH L和csS来构建， 为了更方便地展现vi eu to del或者Hodel层的数据， 已经产生了各种各样的前后端模板语言， 比如FreeMarker，Thyme leaf等等， 各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用来构建用户界面的内置模板语言。

（2）Model

Model是指数据模型， 泛指后端进行的各种业务逻辑处理和数据操控， 主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则

（3）ViewModel

ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层， 前端开发者对从后端获取的Model数据进行转换处理， 做二次封装， 以生成符合View层使用预期的视图数据模型。
  需要注意的是View Model所封装出来的数据模型包括视图的状态和行为两部分， 而Model层的数据模型是只包含状态的

  • 比如页面的这一块展示什么，那一块展示什么这些都属于视图状态(展示)
  • 页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为(交互)

视图状态和行为都封装在了View Model里。这样的封装使得View Model可以完整地去描述View层。由于实现了双向绑定， View Model的内容会实时展现在View层， 这是激动人心的， 因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。
  MVVM框架已经把最脏最累的一块做好了， 我们开发者只需要处理和维护View Model， 更新数据视图就会自动得到相应更新，真正实现事件驱动编程。
  View层展现的不是Model层的数据， 而是ViewModel的数据， 由ViewModel负责与Model层交互， 这就完全解耦了View层和Model层， 这个解耦是至关重要的， 它是前后端分离方案实施的重要一环。

3、Vue

Vue(读音/vju/， 类似于view) 是一套用于构建用户界面的渐进式框架， 发布于2014年2月。与其它大型框架不同的是， Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层， 不仅易于上手， 还便于与第三方库(如：vue-router，vue-resource，vue x) 或既有项目整合。
（1）MVVM模式的实现者

  • Model：模型层， 在这里表示JavaScript对象
  • View：视图层， 在这里表示DOM(HTML操作的元素)
  • ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者

在MVVM架构中， 是不允许数据和视图直接通信的， 只能通过ViewModel来通信， 而View Model就是定义了一个Observer观察者

  • ViewModel能够观察到数据的变化， 并对视图对应的内容进行更新
  • ViewModel能够监听到视图的变化， 并能够通知数据发生改变

至此， 我们就明白了， Vue.js就是一个MV VM的实现者， 他的核心就是实现了DOM监听与数据绑定

（2）为什么要使用Vue.js

  • 轻量级， 体积小是一个重要指标。Vue.js压缩后有只有20多kb(Angular压缩后56kb+，React压缩后44kb+)
  • 移动优先。更适合移动端， 比如移动端的Touch事件
  • 易上手，学习曲线平稳，文档齐全
  • 吸取了Angular(模块化) 和React(虚拟DOＭ) 的长处， 并拥有自己独特的功能，如：计算属性
  • 开源，社区活跃度高
4、第一个Vue程序

【说明】IDEA可以安装Vue的插件!
  注意：Vue不支持IE 8及以下版本， 因为Vue使用了IE 8无法模拟的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的浏览器。

（1）下载地址

  • 开发版本
    • 包含完整的警告和调试模式：https：//yuejs.org/js/vue.js
    • 删除了警告， 30.96KB min+gzip：https：//vuejs.org/js/vue.min.js
  • CDN
    • <script src=“https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js”></script>
    • <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

（2）代码编写

Vue.js的核心是实现了MVVM模式， 她扮演的角色就是View Model层， 那么所谓的第一个应用程序就是展示她的数据绑定功能，操作流程如下：

1、创建一个HTML文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>

2、引入Vue.js

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

3、创建一个Vue实例

<script type="text/javascript">var vm = new Vue({el:"#app",/*Model：数据*/data:{message:"hello,vue!"}});
</script>

说明：

  • el: '#vue'：绑定元素的ID
  • data:{message:'Hello Vue!'}：数据对象中有一个名为message的属性，并设置了初始值 Hello Vue！

4、将数据绑定到页面元素

<!--view层，模板-->
<div id="app">{{message}}
</div>

说明：只需要在绑定的元素中使用双花括号将Vue创建的名为message属性包裹起来， 即可实现数据绑定功能， 也就实现了View Model层所需的效果， 是不是和EL表达式非常像?

（3）完整的HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body><!--view层，模板-->
<div id="app">{{message}}
</div><!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">var vm = new Vue({el:"#app",/*Model：数据*/data:{message:"hello,vue!"}});
</script>
</body>
</html>

（4）测试

为了能够更直观的体验Vue带来的数据绑定功能， 我们需要在浏览器测试一番， 操作流程如下：
  1、在浏览器上运行第一个Vue应用程序， 进入开发者工具
  2、在控制台输入vm.message=‘HelloWorld’， 然后回车， 你会发现浏览器中显示的内容会直接变成HelloWorld
t>

```

（4）测试

为了能够更直观的体验Vue带来的数据绑定功能， 我们需要在浏览器测试一番， 操作流程如下：
  1、在浏览器上运行第一个Vue应用程序， 进入开发者工具
  2、在控制台输入vm.message=‘HelloWorld’， 然后回车， 你会发现浏览器中显示的内容会直接变成HelloWorld
  此时就可以在控制台直接输入vm.message来修改值， 中间是可以省略data的， 在这个操作中， 我并没有主动操作DOM， 就让页面的内容发生了变化， 这就是借助了Vue的数据绑定功能实现的； MV VM模式中要求View Model层就是使用观察者模式来实现数据的监听与绑定， 以做到数据与视图的快速响应。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/32257.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

安卓安装linux + .net环境

安卓安装linux + .net环境

安装Termux 到下面地址获取apk安装包 https://github.com/termux/termux-app 安装ssh ~ $ pkg install openssl ~ $ pkg install openssh查看用户名 ~ $ whoami ssh u0_a390修改当前用户密码 passwd 启动ssh sshd 安装 proot-distro pkg install proot-distro 列出能装的lin…
阅读更多...
新手（初学者）学R语言第一课，从学正确导入数据开始

新手（初学者）学R语言第一课，从学正确导入数据开始

初看题目好像我在教你怎么导入数据&#xff0c;不不不&#xff0c;我是在教你正确的导入数据&#xff0c;不是说数据导入R就叫正确导入数据了。本章为新手教程&#xff0c;老手可以跳过。 这个内容早就想写了&#xff0c;今天有点空和大家聊一下。为什么R语言对于新手而言不太友…
阅读更多...
nginx启动之后任务管理器里面没有nginx进程

nginx启动之后任务管理器里面没有nginx进程

原因1&#xff1a;确保你的nginx文件夹里面只包含英文路径&#xff01;绝对不能有中文&#xff01; 原因2&#xff1a; 到conf\nginx.conf里面查看端口和IP地址是否正确设置&#xff0c;ip地址有无正确输入
阅读更多...
SpringCloud-nacos基础

SpringCloud-nacos基础

SpringCloud-nacos nacos在微服务种有两大作用&#xff1a; 配置中心服务注册中心 配置中心 维度管理 nacos配置中心可以在三个维度进行管理&#xff1a; spring.profiles.active dev/prod/test,通过这个属性可以配置不同环境下的配置文件。 配置的文件名应该为${spring…
阅读更多...
【MATLAB】（高数）

【MATLAB】（高数）

参考文章 函数极限 导数与偏导 极值和最值 局部范围的最值 局部范围内的最值&#xff0c;相当于函数的极值 离散数据的最值 多元函数的极值 fminunc [x, fval] fminunc(fun, x0)fun为代求极值的函数&#xff1b;x0为起始点&#xff0c;即从这个点开始寻找极值&#xff0c;…
阅读更多...
SpringCloud-OpenFeign基础

SpringCloud-OpenFeign基础

OpenFeign OpenFeign简介 OpenFeign是一个基于HTTP协议的RPC&#xff08;远程过程调用&#xff09;组件&#xff0c;用于简化HTTP请求和响应的处理。它通过声明式的方式定义REST API接口&#xff0c;并自动生成实现该接口的客户端代码&#xff0c;从而简化了RESTful服务的调用…
阅读更多...
4、MFC:菜单栏、工具栏与状态栏

4、MFC:菜单栏、工具栏与状态栏

菜单栏、工具栏与状态栏 1、菜单栏1.1 简介1.2 创建属性设置菜单消息成员函数 1.3 实例 2、工具栏2.1 简介工具栏属性2.2 创建消息CToolBar类的主要成员函数 2.3 实例 3、状态栏3.1 简介3.2 创建CStatusBar类状态栏创建 3.3 实例 1、菜单栏 1.1 简介 菜单在界面设计中是经常使…
阅读更多...
渗透测试-若依框架的杀猪交易所系统管理后台

渗透测试-若依框架的杀猪交易所系统管理后台

前言 这次是带着摸鱼的情况下简单的写一篇文章&#xff0c;由于我喜欢探究黑灰产业&#xff0c;所以偶尔机遇下找到了一个加密H币的交易所S猪盘&#xff0c;我记得印象是上年的时候就打过这一个同样的站&#xff0c;然后我是通过指纹查找其它的一些站&#xff0c;那个站已经关…
阅读更多...
海外短剧系统如何征服观众心

海外短剧系统如何征服观众心

海外短剧系统要征服观众的心&#xff0c;需要综合考虑多个方面。 1、紧凑的剧情设计&#xff1a; 短小精悍&#xff1a;海外短剧通常每集时长不超过半小时&#xff0c;甚至有的仅有几分钟。这种紧凑的剧情设计让观众能够在短时间内迅速沉浸在故事中&#xff0c;无需花费大量时间…
阅读更多...
OpenCV一文入门

OpenCV一文入门

OpenCV一文入门 官网地址 OpenCV 当前版本 opencv-python 4.9.0.80 python 包地址 https://pypi.org/project/opencv-python/ OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个开源计算机视觉和机器学习软件库&#xff0c;由Intel最初开发&#xff0c…
阅读更多...
oracle中使用临时表GLOBAL TEMPORARY TABLE

oracle中使用临时表GLOBAL TEMPORARY TABLE

需要在存储过程中返回一个临时结果集&#xff0c;这个结果集又是多个语句通过循环查询出来的&#xff0c;这时候就想到了将结果插入到临时表中&#xff0c;然后返回临时表的数据的思路&#xff0c;于是有了以下操作&#xff1a; 1.创建临时表 -- Create table create global …
阅读更多...
STM32驱动-ads1112

STM32驱动-ads1112

汇总一系列AD/DA的驱动程序 ads1112.c #include "ads1112.h" #include "common.h"void AD5726_Init(void) {GPIO_InitTypeDef GPIO_InitStructure;RCC_APB2PeriphClockCmd( RCC_APB2Periph_GPIOA | RCC_APB2Periph_GPIOC, ENABLE );//PORTA、D时钟使能 G…
阅读更多...
Oracle报错：ORA-02292: 违反完整约束条件 - 已找到子记录问题解决

Oracle报错：ORA-02292: 违反完整约束条件 - 已找到子记录问题解决

目录 一、问题详情 二、原因分析 三、解决方案 一、问题详情 使用Mybatis删除数据的时候&#xff0c;报了如下错误详情&#xff1a; org.springframework.dao.DataIntegrityViolationException: ### Error updating database. Cause: java.sql.SQLException: ORA-02292: …
阅读更多...
数学建模 —— 查找数据

数学建模 —— 查找数据

目录 百度搜索技巧 完全匹配搜索&#xff1a;查询词的外边加上双引号“ ” 标题必含关键词&#xff1a;查询词前加上intitle: 搜索文档&#xff1a;空格再输入filetype:文件格式 去掉不想要的&#xff1a;查询词后面加空格后加减号与关键字 知网查文献 先看知网的硕博士…
阅读更多...
大脑临界状态：探索思维背后的物理机制

大脑临界状态：探索思维背后的物理机制

在深度思考或创造性灵感的涌现时刻&#xff0c;个体常体验到一种介于混乱与有序之间的特殊心理状态。这种感受实则反映了大脑在认知过程中的临界状态&#xff0c;这是一种涉及复杂物理现象的心理活动表现。近期研究表明&#xff0c;大脑结构中存在着与临界性密切相关的物理特性…
阅读更多...
为什么挂牌量是跟踪楼市情况的核心指标？

为什么挂牌量是跟踪楼市情况的核心指标？

通过挂牌量&#xff0c;可以跟踪被动卖出者的数量&#xff0c;从而理解楼市的进展。 引子 楼市的“5.17”新政落地有一个多月了&#xff0c;然而&#xff0c;资本市场对“楼市的复苏预期”却在不断地下修。 以房地产开发的龙头企业保利发展为例&#xff0c;市场在“5.17”新…
阅读更多...
学习笔记——路由网络基础——动态路由

学习笔记——路由网络基础——动态路由

五、动态路由 1、动态路由概述 动态路由&#xff1a;通过在设备上运行某种协议&#xff0c;通过该协议自动交互路由信息的过程。 动态路由协议有自己的路由算法&#xff0c;能够自动适应网络拓扑的变化&#xff0c;适用于具有一定数量三“层设备的网络。 动态路由协议适用场…
阅读更多...
Python发送Email的性能怎么样？如何配置？

Python发送Email的性能怎么样？如何配置？

Python发送Email怎么配置SMTP&#xff1f;批发邮件的方法技巧&#xff1f; Python是一种广泛使用的编程语言&#xff0c;因其简洁和强大的功能深受开发者喜爱。在许多应用场景中&#xff0c;Python发送Email是一个常见需求。那么&#xff0c;Python发送Email的性能怎么样呢&am…
阅读更多...
基于Java的农机电招平台系统

基于Java的农机电招平台系统

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果你对农机电招平台系统感兴趣或有相关开发需求&#xff0c;可以私信联系我。 开发语言 Java 数据库 MySQL 技术 B/S结构&#xff0c;SpringBoot框架 工具 Eclipse&#xff0c;Navicat&#xff0c;Tomcat8.0 系…
阅读更多...
代理的匿名级别有哪些？为什么匿名性很重要？

代理的匿名级别有哪些？为什么匿名性很重要？

在互联网时代&#xff0c;代理服务器在许多领域都扮演着重要的角色。无论是个人用户还是企业&#xff0c;都可能需要使用代理来保护自己的隐私和数据安全。在选择代理服务时&#xff0c;匿名级别是一个重要的考虑因素。本文将介绍代理的匿名级别&#xff0c;并解释为什么匿名性…
阅读更多...
最新文章

Copyright @ 2022~2023