【Vue入门】MVVM数据双向绑定与Vue的生命周期

2023-09-17 23:13:59

目录

一、Vue介绍

1.1 什么是Vue ？

1.2 Vue的优点

1.3 库与框架的区别

二、Vue入门

2.1 MVVM（数据双向绑定）

2.2 BootCDN（加速服务）

三、Vue实例

3.1 Vue开发示例

3.2 双向数据绑定

3.3 Vue生命周期钩子

一、Vue介绍

1.1 什么是Vue ？

        Vue是一个渐进式的JavaScript框架，用于构建用户界面。"渐进式"意味着Vue的设计理念是逐步增强应用的功能和复杂性，而不是一次性地引入所有功能。这使得开发者可以根据项目需求选择性地使用Vue的不同特性和功能。

1.2 Vue的优点

Vue具有许多实际应用的优点，以下是其中一些：

  1. 易学易用：Vue具有简单直观的API和清晰的文档，使得初学者可以快速上手。它的语法和概念与传统的HTML、CSS和JavaScript非常相似，降低了学习曲线。

  2. 渐进式开发：Vue的渐进式特性使得开发者可以根据项目需求选择性地使用Vue的不同特性和功能。这种灵活性使得Vue适用于各种规模和复杂度的项目。

  3. 响应式数据绑定：Vue的响应式数据绑定机制使得数据和视图保持同步，当数据发生变化时，相关的DOM元素会自动更新。这简化了开发过程，减少了手动操作DOM的工作量。

  4. 组件化开发：Vue鼓励开发者将应用拆分为多个可复用的组件，每个组件都有自己的模板、逻辑和样式。组件化开发提高了代码的可维护性和复用性，同时也使得团队协作更加高效。

  5. 虚拟DOM和高性能：Vue使用虚拟DOM来提高性能。通过比较虚拟DOM的差异，Vue只更新需要更新的部分，减少了对真实DOM的操作，提高了性能。此外，Vue还具有异步渲染和组件级别的懒加载等优化策略，进一步提升了应用的性能。

  6. 生态系统和插件支持：Vue拥有庞大的生态系统，有许多第三方库和插件可供选择。这些库和插件可以帮助开发者解决各种问题，提高开发效率。

        Vue具有易学易用、灵活性强、性能优越、可维护性高等优点，使得它成为构建现代化Web应用的理想选择。作为软件工程师，我经常使用Vue来开发前端应用，并且不断学习和探索Vue的最新技术和最佳实践，以提供高质量的用户界面。

1.3 库与框架的区别

  1. 库（Library）：如：（js中最典型的是jQuery）

    • 库是一组可重用的代码集合，用于解决特定的问题或提供特定的功能。它通常包含一系列函数、类、方法或工具，开发者可以根据需要选择性地使用库中的功能。
    • 库的使用方式是主动调用，开发者在自己的代码中引入库，并根据需要调用库中的函数或方法来完成特定的任务。
    • 库通常具有较小的体积，只提供特定的功能，开发者可以根据自己的需求选择合适的库来构建应用。

  2. 框架（Framework）：

    • 框架是一种软件架构的基础，提供了一整套解决方案和工具，用于开发特定类型的应用程序。它定义了应用程序的结构、规范和工作流程，开发者需要按照框架的规则进行开发。
    • 框架的使用方式是被动调用，开发者编写应用程序的代码，并将其嵌入到框架中，由框架来控制应用程序的执行流程。
    • 框架通常具有较大的体积，提供了完整的开发环境和一系列的功能模块，开发者可以基于框架进行快速开发，减少重复性的工作。

二、Vue入门

2.1 MVVM（数据双向绑定）

        在使用之前我们先来了解一下什么是MVVM？，简单来说它一种更好的UI模式解决方案，MVVM可以通过数据双向绑定让数据自动地双向同步

MVVMM-V-VM
M

model数据模型

V

view视图

VMViewModel视图模型，把Model和view关联起来就是ViewModel，viewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model

 1) V（修改数据） -> M  将视图层的数据通过事件将数据提交到后端服务器(前端到后端)
      $('#btn_login').click(function(){
         通过ajax将页面中的数据通过json格式传递到后端服务器
      });

   2) M（修改数据）-> V  将后端数据（JSON）通过赋值的方式在视图层展现(后端到前端)  
      通过ajax的方式调用后端的数据接口将回传过来的JSON数据渲染到页面
      $('#book_name').val("xxx");

        相比之下MVC模式，MVVM模型是一种更现代化的架构模式，它在MVC模式的基础上引入了一个新的组件：视图模型（ViewModel）。MVVM模式将应用程序分为四个主要组件：模型（Model）、视图（View）、视图模型（ViewModel）和数据绑定（Data Binding）。模型负责处理数据和业务逻辑，视图负责展示用户界面，视图模型则充当模型和视图之间的中介，负责处理视图的状态和行为。数据绑定机制使得视图和视图模型之间的数据同步更加简单和自动化。MVVM模式的优点是将视图和业务逻辑分离，使得代码更易于维护和测试，并且通过数据绑定机制提供了更好的用户界面交互体验。

2.2 BootCDN（加速服务）

官方网址：BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 

        CDN的全称是Content Delivery Network，即内容分发网络，CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

  1. CDN的关键技术主要有内容存储和分发技术。
  2. CDN加速主要是加速静态资源，如网站上面上传的图片、媒体，以及引入的一些Js、css等文件。
  3. CDN加速需要依靠各个网络节点，例如100台CDN服务器分布在全国范围，从上海访问，会从最近的节点返回资源，这是核心。
  4. CDN服务器通过缓存或者主动抓取主服务器的内容来实现资源储备。
  5. CDN基本原理：将源站内容分发至最接近用户的节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率。
  6. CDN部署在网络提供商的机房，是用户在请求网络服务的时候，可以从距离最近的网络提供商机房获取数据。

        最大的优势就是可以让用户就近访问资源，这样我们就不需要下载所需要的工具或库，便捷开发减少项目资源。

使用cdn的坏处：
        说完好处也要说说坏处了，对于不使用cdn的网站来说，它崩任他崩，我自坐如松。对于少数资源依赖cdn的网站来说，可能仅影响体验，比如页面显示、js事件等，但对于严重依赖cdn的网站来说，只能说同归于尽了。。。

三、Vue实例

3.1 Vue开发示例

        vue有两种开发方式，一种是直接页面开发，一种是工程级开发，本示例使用的是直接页面开发方式。

注：

1. 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的。
2. 需要给vue指定一个内容管理区，通常我们也把它叫做边界，这意味着我们接下来的改动全部在指定的div内，div外部无用。
3. 双花括号叫做插值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue入门</title>
		<!-- 1. 导入工具 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	</head>
	<body>
		<!-- 2. 定义vue所管理的边界，有且只有一个根节点 -->
		<div id="xw">
			<h1>{{msg}}</h1>
		</div>
	<script type="text/javascript">
		/* 3. 构建vue实例并绑定边界 */
		new Vue({
			el:"#xw",
			data(){
				return{
					msg:'hello 小威',
				}
			}
		})
	</script>
	</body>
</html>

3.2 双向数据绑定

  1. vue指令：指的是是带有“v-”前缀的特殊属性
  2. vue实例的methods用来定义交互事件使用的函数,函数名不限制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue入门</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	</head>
	<body>
		<div id="xw">
			<h1>{{msg}}</h1>
			<p>
				<input v-model="msg" />
                <!-- v-on:（也可以用@替代） -->
				<button v-on:click="getMsg">获取输入框内容</button>
			</p>
		</div>
		<script type="text/javascript">
			new Vue({
				el: "#xw",
				data() {
					return {
						msg: '123',
					}
				},
				methods: {
					getMsg() {
						alert(this.msg);
					}
				}
			})
		</script>
	</body>
</html>

注：

  • 数据的改变会引起DOM的改变，DOM的改变也会引起数据的变化
  • 只有当实例被创建时data中存在的属性才是响应式的 
  • 用v-model指令在表单控件元素上创建双向数据绑定
  • this在methods属性的方法里指向当前Vue实例   
  • console对象可以使用printf风格的占位符。只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种
  • Vue实例还暴露了一些有用的实例属性与方法。它们都有前缀$，以便与用户定义的属性区分开来

3.3 Vue生命周期钩子

         Vue生命周期钩子是在Vue实例的不同阶段执行的回调函数。这些钩子函数允许我们在特定的生命周期阶段执行自定义逻辑，以便在应用程序的不同阶段进行初始化、更新和销毁操作。

以下是Vue的生命周期钩子函数：

  1. beforeCreate：在实例被创建之前调用，此时数据观测和事件配置尚未完成。

  2. created：在实例创建完成后调用，此时已完成数据观测，但尚未挂载到DOM上。

  3. beforeMount：在实例挂载到DOM之前调用。

  4. mounted：在实例挂载到DOM后调用，此时可以访问到DOM元素。

  5. beforeUpdate：在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。

  6. updated：在数据更新之后调用，发生在虚拟DOM重新渲染和打补丁之后。

  7. beforeDestroy：在实例销毁之前调用，此时实例仍然完全可用。

  8. destroyed：在实例销毁之后调用，此时实例已被销毁，所有的事件监听器和子实例也被移除。

        除了这些常用的生命周期钩子函数，Vue还提供了一些其他的钩子函数，如activated和deactivated，用于处理keep-alive组件的激活和停用。

Vue生命周期
Vue生命周期

示例：

更多推荐

oracle 12c相对oralce 11g的新特性（3）|oracle 12c的自动化管理特性：自动备份、自动恢复、自动维护的功能使用

一、前言：前面几期讲解了oracle12c多租户的使用、In-Memory列存储来提高查询性能以及数据库的克隆、全局数据字典和共享数据库资源的使用今天我们讲讲oracle12c的另外的一个自动化管理功能新特性：自动备份、自动恢复、自动维护的功能二、自动备份、自动恢复、自动维护概要通过使用这些自动化功能，Oracle12

使用 FHE 实现加密大语言模型

近来，大语言模型(LLM)已被证明是提高编程、内容生成、文本分析、网络搜索及远程学习等诸多领域生产力的可靠工具。大语言模型对用户隐私的影响尽管LLM很有吸引力，但如何保护好输入给这些模型的用户查询中的隐私这一问题仍然存在。一方面，我们想充分利用LLM的力量，但另一方面，存在向LLM服务提供商泄露敏感信息的风险。在某些领

PCIE研究-1

PCI-Express(peripheralcomponentinterconnectexpress)是一种高速串行计算机扩展总线标准，PCIe属于高速串行点对点双通道高带宽传输，所连接的设备分配独享通道带宽，不共享总线带宽，主要支持主动电源管理，错误报告，端对端的可靠性传输，热插拔以及服务质量(QOS)等功能。PCI

【大数据实训】基于Hadoop的2019年11月至2020年2月宁波天气数据分析（五）

博主介绍：✌全网粉丝6W+,csdn特邀作者、博客专家、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于大数据技术领域和毕业项目实战✌🍅文末获取项目联系🍅基于Hadoop的2019年11月至2020年2月宁波天气数据分析2019—2020学年第二学期《分布式系统原理与技术》期

如何使用Java爬取指定链接的网页内容

在当今信息时代，互联网上的数据量庞大且不断增长。为了获取特定网页的内容，爬虫技术成为了一种非常有用的工具。本文将介绍如何使用Java编程语言来实现爬取指定链接的网页内容。首先，我们需要准备好Java开发环境。确保你已经安装了JavaDevelopmentKit（JDK）并配置好了环境变量。接下来，我们将使用Java提供

面向Java开发者的ChatGPT提示词工程（7）

在如今信息爆炸的时代，我们面临着海量的文字信息，很难抽出足够的时间去阅读所有感兴趣的内容。然而，大语言模型为我们提供了一种有效的解决方案：通过自动文本摘要，帮助我们快速获取文章的核心内容。这种技术已经被广泛应用于各种软件应用程序中。以ChatGPT为例，它提供了一个简洁的网页界面，让用户能够轻松地对文章进行摘要。这种方

关于C#.Net网页跳转的7种方法

一、目前在ASP.NET中页面传值共有这么几种方式：1.Response.Redirect("http://www.hao123.com",false);目标页面和原页面可以在2个服务器上，可输入网址或相对路径。后面的bool值为是否停止执行当前页。跳转向新的页面，原窗口被代替。浏览器中的URL为新路径。Respons

运算符——“MySQL数据库”

各位CSDN的uu们好呀，今天，小雅兰的内容是MySQL数据库里面的操作符，下面，让我们进入操作符的世界吧！！！算术运算符比较运算符逻辑运算符位运算符运算符的优先级拓展：使用正则表达式查询算术运算符算术运算符主要用于数学运算，其可以连接运算符前后的两个数值或表达式，对数值或表达式进行加（+）、减（-）、乘（*）、除（/

您的开发团队是否面临效率陷阱？

“努力还是摸鱼？”这是一个职场老笑话了，当被问到这句话，人们往往回以礼貌一笑或单纯点头、做个鬼脸。这个笑话无伤大雅，但它总让人想起一个根深蒂固的观念：在工作时，我们必须时刻保持高效。在谷歌搜索“工作效率”，会弹出数百万结果，无论是关于自我提升的书籍，还是TED演讲，又或是提高工作效率的应用程序，比如“如何在工作中提高工

（10）(10.9) 术语表（三）

文章目录1Oilpan2OSD3PCB4PCM5PDB6PIC7PID8POI9PPM10PWM11PX4FMU/PX4IO12RTL13SiRFIII14Sketch15SVN16TelemetrySystem17Thermopile18UAV19VLOS20WAAS21Xbee22ZigBee1OilpanOilp

开学好用的电容笔有哪些推荐？平价触控笔推荐

尽管ApplePencil很贵，但是如果你有足够的预算的话，也可以考虑买一款。此外，iPad配备了一款电容笔，它不但能用于画画，也能用于记录笔记。苹果的原装电容笔，虽然功能强大，但是价格非常昂贵，而国产的平替型电容笔，无论是从手感上，还是从配置上，都能和苹果原装的Pencil相抗衡，最关键的是，价格只要一二百块钱。以下

热文推荐
  1. Vue系列（一）之 Vue入门

    一.Vue简介1.1概述Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架。2.2特点1.声明式编码，遵循MVVM原则2.编码简单，体积小3.组件化，复用率高，代码维护容易2.3MVVM介绍MVVM，一种更好的UI模式解决方案，这个模式的核心是ViewModel，它是一种特殊的model类型，用于表示

  2. MySQL学习系列（2）-每天学习10个知识

    目录1.INNERJOIN和ON子句2.死锁3.SELECT*和SELECTcolumn1,column24.数据库的视图5.MySQL的触发器类型6.MySQL表的备份和恢复7.MySQL存储引擎8.索引优化9.MySQL中的子查询10.使用连接（JOIN）从多个表中检索数据👍点赞，你的认可是我创作的动力！⭐️收藏

  3. VuePress网站如何使用axios请求第三方接口

    前言VuePress是一个纯静态网站生成器,也就是它是无后端,纯前端的,那想要在VuePress中,发送ajax请求,请求一些第三方接口,有时想要达到自己一些目的在VuePress中，使用axios请求第三方接口，需要先安装axios，然后引入，最后使用本文包括VuePress中安装和使用axios,直接使用与挂载在根

  4. 19 Python的math模块

    概述在上一节，我们介绍了Python的sys模块，包括：sys模块中一些常用的属性和函数。在这一节，我们将介绍Python的math模块。math模块提供了许多数学函数和常量，可以用于进行各种数学运算和常数表示。math模块中的常量和函数主要分为以下几类：常量：包括math.pi、math.e等，用于表示圆周率π和自然

  5. php函数usort使用方法

    在PHP中，usort()函数用于对数组进行排序，它允许你使用自定义的比较函数来确定元素的顺序。以下是usort()函数的使用方法：usort(array&$array,callable$cmp_function):bool参数说明：$array：要排序的数组，是传入函数的引用。$cmp_function：自定义的比较

  6. BiLSTM(双向LSTM)实现股票时间序列预测(TensorFlow2版)

    本专栏旨在通过实战案例帮助深度学习初学者通过实战案例快速掌握深度学习的核心概念和技术，这个专栏将覆盖以下关键主题：深度学习基础：介绍深度学习的基本原理以及数学概念，你将了解到神经网络的工作原理、激活函数、优化算法等基本概念。常见算法：例如卷积神经网络（CNN）、循环神经网络（RNN）和生成对抗网络（GAN）。数据预处理

  7. SQL server中字段自增：IDENTITY、序列Sequence

    SQLserver中字段自增：IDENTITY、序列Sequence1.列字段自增`IDENTITY在SQLServer中，IDENTITY(1,1)是用于定义一个自增长列的属性。它的含义如下：IDENTITY：表示该列是一个自增长列。(1,1)：表示自增长列的起始值为1，每次递增1。当你在创建表时使用IDENTITY

  8. Sqlserver 监控使用磁盘空间情况

    最近遇到一个小问题：为了保存以往的一些数据，间了大量临时表，导致SQLserver数据增长过快，不得不想个办法监控磁盘空间使用情况。网上一般有几种办法：一是使用dm_os_volume_stats函数，缺点是无法获取非数据库所在的磁盘空间使用情况。二是使用Execmaster.dbo.xp_fixeddrives，缺点

  9. 算法基础:图

    图论图论〔GraphTheory〕是数学的一个分支。它以图为研究对象。图论中的图是由若干给定的点及连接两点的线所构成的图形，这种图形通常用来描述某些事物之间的某种特定关系，用点代表事物，用连接两点的线表示相应两个事物间具有这种关系。如下就是一种逻辑上的图结构：图是一种最复杂的数据结构，前面讲的数据结构都可以看成是图的特