Vue02-第一个Vue程序

news2025/1/11 8:12:23

第一个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.coloradmin.cn/o/1835325.html

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

相关文章

Windows 安装 java 环境

Windows 安装 java 环境

搭建java开发环境 java的产品叫JDK&#xff08;java开发者工具包&#xff09;,必须安装JDK才能使用Java。 一、下载——java下载网址 二、安装 直接全部下一步就行&#xff0c;&#xff08;安装路径可以更换一下&#xff09;。 配置JAVA_HOME环境变量&#xff0c; 安装完成后…
阅读更多...
css-Echarts图表柱状图，X轴横坐标值显示不完全问题

css-Echarts图表柱状图，X轴横坐标值显示不完全问题

1.问题 在Echarts图表中当横坐标数值过多&#xff0c;或者数值过长时会导致部分横坐标不显示。数据量少或简单会默认显示完全&#xff0c;当放大时会导致部分横坐标隐藏。 更改第一个Mon字段名 会发现偶数横坐标显示隐藏&#xff1b; 2.解决方法 2.1 在x横坐标中添加interval…
阅读更多...
办理无区域名称公司核名流程和条件及时间说明

办理无区域名称公司核名流程和条件及时间说明

无行政区划公司是指公司名称中不带有对应的行政区划&#xff0c;经营上不受地方限制。其名称需要通过国家工商总局核名&#xff0c;核名成功后会颁发《名称核准通知书》。之后便可以进行印章制作、银行开户等流程。详情致电咨询我或者来公司面谈。 公司国家局核名的步骤包括&am…
阅读更多...
Node.js版本管理工具-NVM

Node.js版本管理工具-NVM

在开发 Node.js 项目时&#xff0c;经常会遇到需要切换不同版本的 Node.js 的情况。为了方便管理和切换各个版本&#xff0c;我们可以使用一些 Node.js 版本管理工具。 Node Version Manager&#xff1a;简称NVM&#xff0c;最流行的 Node.js 版本管理工具之一。它允许我们在同…
阅读更多...
AI大模型落地应用场景：LLM训练性能基准测试

AI大模型落地应用场景：LLM训练性能基准测试

随着 ChatGPT 的现象级走红&#xff0c;引领了AI大模型时代的变革&#xff0c;从而导致 AI 算力日益紧缺。与此同时&#xff0c;中美贸易战以及美国对华进行AI芯片相关的制裁导致 AI 算力的国产化适配势在必行。之前也分享过一些国产 AI 芯片、使用国产 AI 框架 Mindformers 基…
阅读更多...
工业物联网关为智能制造业提供哪些支撑？天拓四方

工业物联网关为智能制造业提供哪些支撑？天拓四方

随着科技的飞速发展&#xff0c;智能制造业已成为工业领域的转型方向。在这一转变中&#xff0c;工业物联网关发挥着至关重要的作用。作为连接物理世界与数字世界的桥梁&#xff0c;工业物联网关不仅实现了设备与设备、设备与云平台之间的互联互通&#xff0c;更通过实时数据采…
阅读更多...
post为什么会发送两次请求详解

post为什么会发送两次请求详解

文章目录 导文跨域请求的预检复杂请求的定义服务器响应预检请求总结 导文 在Web开发中&#xff0c;开发者可能会遇到POST请求被发送了两次的情况&#xff0c;如下图&#xff1a; 尤其是在处理跨域请求时。这种现象可能让开发者感到困惑&#xff0c;但实际上它是浏览器安全机制…
阅读更多...
Linux安装MySQL以及远程连接

Linux安装MySQL以及远程连接

1、Linux安装MySQL 1.1、准备解压包 MySQL5.x解压包 提取码&#xff1a;9y7n 1.2、通过rpm脚本安装 切记安装顺序&#xff1a;common --> libs --> client --> server 因为它们之间存在依赖关系&#xff0c;所以务必按照顺序安装 安装前请确保当前目录/文…
阅读更多...
金融科技行业的融资趋势、投资者关注及未来预测

金融科技行业的融资趋势、投资者关注及未来预测

一、金融科技行业的融资趋势 金融科技行业的融资趋势近年来展现出强劲的增长势头&#xff0c;具体表现在以下几个方面&#xff1a; 融资规模持续扩大&#xff1a; 根据《全球金融科技投融资趋势报告(2023年上半年)》&#xff0c;2023年上半年全球金融科技行业投融资事件总次数…
阅读更多...
防泄密解决方案

防泄密解决方案

防泄密解决方案是一个系统性的策略&#xff0c;旨在保护敏感信息不被非法获取、泄露或滥用。以下是一个结构清晰、分点表示的防泄密解决方案&#xff0c;结合了参考文章中的关键信息和建议&#xff1a; 一、策略制定与政策明确 明确数据分类&#xff1a;将数据分为公开、内部…
阅读更多...
【区块链】POS（Proof of Stake）权益证明算法深度解析

【区块链】POS（Proof of Stake）权益证明算法深度解析

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 POS&#xff08;Proof of Stake&#xff09;权益证明算法深度解析引言1. POS基本…
阅读更多...
【方法】如何隐藏和保护Excel表格中的敏感数据？

【方法】如何隐藏和保护Excel表格中的敏感数据？

在工作中&#xff0c;很多人经常需要处理包含敏感信息的Excel表格。 为了确保这些数据的安全性&#xff0c;我们可以通过隐藏单元格、行和列&#xff0c;以及设置密码保护工作表的方法&#xff0c;来保护数据&#xff0c;下面一起来看看吧&#xff01; 一、隐藏数据&#xff1…
阅读更多...
微信商城源码带分销功能 支持微信小程序+公众号端 含详细图文搭建教程

微信商城源码带分销功能 支持微信小程序+公众号端 含详细图文搭建教程

分享一款微商城源码系统&#xff0c;不仅支持微信公众号端和小程序端二合一管理&#xff0c;带分销机制&#xff0c;集合了市面上电商系统的功能&#xff0c;并增加了多项全新特色功能&#xff0c;如多商户商家入驻、区域代理、收银台、互动直播等&#xff0c;为商家提供了全方…
阅读更多...
Go——channel

Go——channel

channel是Go在语言层面提供的协程间的通信方式。通过channel我们可以实现多个协程之间的通信&#xff0c;并对协程进行并发控制。 使用注意&#xff1a; 管道没有缓冲区时&#xff0c;从管道中读取数据会阻塞&#xff0c;直到有协程向管道中写入数据。类似地&#xff0c;向管道…
阅读更多...
动手学深度学习（Pytorch版）代码实践 -深度学习基础-13Kaggle竞赛：2020加州房价预测

动手学深度学习（Pytorch版）代码实践 -深度学习基础-13Kaggle竞赛：2020加州房价预测

13Kaggle竞赛&#xff1a;2020加州房价预测 # 导入所需的库 import numpy as np import pandas as pd import torch import hashlib import os import tarfile import zipfile import requests from torch import nn from d2l import torch as d2l# 读取训练和测试数据 train_…
阅读更多...
哈尔滨等保测评流程

哈尔滨等保测评流程

哈尔滨的等保测评程序是一项严格的、系统化的检测程序&#xff0c;其目的在于保证信息系统的安全、稳定。下面详细介绍了这个过程&#xff1a; 一、引言 随着信息技术的飞速发展&#xff0c;信息系统在各行各业中的应用越来越广泛&#xff0c;信息安全问题也日益凸显。为了保障…
阅读更多...
使用CSS常见问题解答卡片

使用CSS常见问题解答卡片

常见问题解答卡片 效果展示 CSS 知识点 CSS 选择器的使用background 渐变背景色运用CSS 综合知识运用 页面整体布局 <div class"container"><h1>经常问的问题</h1><!-- 这里只是展示一个项目 --><div class"tab"><in…
阅读更多...
API 设计技巧：基础知识与实践的方法

API 设计技巧：基础知识与实践的方法

在这篇深入探讨中&#xff0c;我们将从基础开始&#xff0c;逐步介绍 API 设计&#xff0c;并探讨定义卓越API的最佳实践。 作为一名开发者&#xff0c;你可能已经熟悉了许多这些概念&#xff0c;但我将提供详细解释&#xff0c;以加深你的理解。 API 设计&#xff1a;电子商…
阅读更多...
云上战场：ToDesk云电脑、青椒云、顺网云全面对决

云上战场：ToDesk云电脑、青椒云、顺网云全面对决

前言 记得端午放假期间&#xff0c;我已经在旅游的路上了&#xff0c;老板突然发短信&#xff0c;让我给他画个图&#xff0c;我手上的战斗机已经是十年前的老古董了(平常一直用的公司电脑&#xff0c;也没想过要换)&#xff0c;压根满足不了老板的任务要求&#xff0c;不得已&…
阅读更多...
Linux_应用篇(20) 串口应用编程

Linux_应用篇(20) 串口应用编程

本小节我们来学习 Linux 下串口应用编程&#xff0c;串口&#xff08;UART&#xff09;是一种非常常见的外设&#xff0c;串口在嵌入式开发领域当中一般作为一种调试手段&#xff0c;通过串口输出调试打印信息&#xff0c;或者通过串口发送指令给主机端进行处理&#xff1b;当然…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023