1. 首页 >
  2. AI专题 >
  3. 正文

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

目录

一、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生命周期

示例：

相关文章

【Vue3】使用ref与reactive创建响应式对象

先来简单介绍一下ref，它可以定义响应式的变量let xxx = ref(初始值)。**返回值：**一个RefImpl的实例对象，简称ref对象或refref对象的value属性是响应式的。JSxxx.value，但模板中不需要.value，直接使用即可。对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。下面我们看一看上图红框中代表的意思是，我们哪里需要响应就在哪个里面导入上述代码即可。
编程日记 2024/02/21 09:49:43

如何设置页面恢复运行事件触发回调

由于 Android 原生的 resume 和 pause 事件不能区分是压后台导致还是页面切换导致，所以 pageResume 和 pagePause 事件是通过 JSAPI 调用记录回调的，仅适用于同一个 session 内 Window 之间的互相切换。当一个 WebView 界面重新回到栈顶时，例如从后台被唤起、锁屏界面恢复、从下个页面回退，会触发页面恢复运行（resume）事件。如果这个界面是通过 popWindow 或 popTo 到达，且传递了 data 参数，则此页可以获取到这些参数。
编程日记 2024/02/21 09:47:28

日常遇到Maven出现依赖版本/缓存问题通用思路。

如果怀疑是本地仓库中缓存的依赖有问题，可以手动删除本地仓库（默认位置在用户的.m2/repository目录下），但这是一个较为极端的做法，因为这会删除所有项目的所有本地依赖，之后Maven将不得不重新下载这些依赖。针对于这样的问题 首先我们的第一思路 就是怀疑到是缓存的问题，那么我在这里去描述一下 我们遇到这类通用类的问题如何解决。检查项目的pom.xml文件，确认依赖声明正确无误，没有冲突的版本号或不正确的依赖范围。版本问题导致的，但是我确认过了一下的一些操作 依然没有解决我的问题。
编程日记 2024/02/21 09:45:27

什么是tomcat？tomcat是干什么用的？

Tomcat是一个开源的、轻量级的应用服务器，是Apache软件基金会的一个项目。它实现了Java Servlet、JavaServer Pages（JSP）和Java Expression Language（EL）等Java技术，用于支持在Java平台上运行的动态Web应用程序。AJP是用于Apache服务器与Tomcat之间进行通信的协议，通常用于将动态生成的内容传递给Apache服务器进行处理。它能够运行Servlet和JSP，提供了一个环境，使得开发者能够构建和运行基于Java的Web应用。
编程日记 2024/02/19 20:51:12

C# winfrom中excel文件导入导出

在C#交流群里，看到很多小伙伴在excel数据导入导出到C#界面上存在疑惑，所以今天专门做了这个主题，希望大家有所收获！环境：win10+vs2017界面：主要以演示为主，所以没有做优化，然后主界面上添加两个按钮，分别命名为ExportExcel和ImportExcel，添加两个dataGridView，分别是dataGridView1和dataGridView2然后在窗体加载程序中给dataGr...
编程日记 2024/02/17 14:00:34

Java 与 JavaScript 的区别与联系

Java 和 JavaScript 两种编程语言在软件开发中扮演着重要的角色。尽管它们都以“Java”命名，但实际上它们是完全不同的语言，各有其独特的特点和用途。本文将深入探讨 Java 和 JavaScript 的区别与联系，帮助大家更好地理解它们在编程世界中的作用。
编程日记 2024/02/13 20:01:28

C语言中的作用域与生命周期

但是全局变量被 static 修饰之后，外部链接属性就变成了内部链接属性，只能在自己所在的源文件内部使用了，其他源文件，即使声明了，也是无法正常使用的。结论：static修饰局部变量改变了变量的生命周期，生命周期改变的本质是改变了变量的存储类型，本来一个局部变量是存储在内存的栈区的，但是被 static 修饰后存储到了静态区。extern 是用来声明外部符号的，如果一个全局的符号在A文件中定义的，在B文件中想使用，就可以使用extern进行声明，然后使用。全局变量的生命周期是：整个程序的生命周期。
编程日记 2024/02/13 20:00:24

Python和Java的区别（不断更新）

运行效率：一般来说，Java的运行效率要高于Python，这主要是因为Java是编译型语言，其代码在执行前会进行预编译，而Python是解释型语言，边解释边执行。而Python没有类似的强大虚拟机，但它的核心是可以很方便地使用C语言函数或C++库，这使得Python可以轻松地与底层硬件进行交互。**类型系统：**Java是一种静态类型语言，所有变量需要先声明（类型）才能使用，且类型在编译时就已经确定。总的来说，Python和Java各有其优势和特点，选择哪种语言取决于具体的项目需求、开发环境以及个人偏好。
编程日记 2024/02/11 20:37:25

服务器与电脑的区别?

服务器是指一种专门提供计算和存储资源、运行特定软件服务的物理或虚拟计算机。服务器主要用于接受和处理来自客户端（如个人电脑、手机等）的请求，并向客户端提供所需的服务或数据。服务器在网络环境中扮演着中心节点的角色，负责存储和管理数据、提供网络服务、处理计算任务等。
编程日记 2024/02/10 19:41:26

windows下ngnix自启动（借助工具winSw）

在windows下安装nginx后，不想每次都手动启动。本文记录下windows下ngnix自启动（借助工具winSw）的操作流程提示：以下是本篇文章正文内容，下面案例可供参考本文记录下windows下ngnix自启动（借助工具winSw）的操作流程。
编程日记 2024/02/08 18:11:23

synchronized 和 Lock 有什么区别？synchronized 和 ReentrantLock 区别是什么？说一下 atomic 的原理？

例如，AtomicInteger 的 incrementAndGet() 方法就是通过 CAS 操作实现的，它首先尝试原子地将共享变量加 1，如果操作成功，则返回新的值，否则重试直到操作成功为止。CAS 操作的原理是，当 V 的值等于 A 时，将 V 的值更新为 B，否则什么也不做。synchronized 和 Lock 都是 Java 中用于实现线程同步的关键字/类库，它们都能够提供对共享资源的安全访问和防止数据竞争的功能，但是在实现方式、特性、适用场景等方面存在一些差异。
编程日记 2024/02/07 09:09:26

Kafka常见生产问题详解

比如，在原有Topic下，可以调整Producer的分区策略，让Producer将后续的消息更多的发送到新增的Partition里，这样可以让各个Partition上的消息能够趋于平衡。思路是可行的，但是重试的次数，发送消息的数量等都是需要考虑的问题。PageCache缓存中的消息是断电即丢失的。因为如果业务逻辑异步进行，而消费者已经同步提交了Offset，那么如果业务逻辑执行过程中出现了异常，失败了，那么Broker端已经接收到了消费者的应答，后续就不会再重新推送消息，这样就造成了业务层面的消息丢失。
编程日记 2024/02/02 14:04:11

深入理解 Java 变量类型、声明及应用

Java 变量 变量是用于存储数据值的容器。在 Java 中，有不同类型的变量，例如： String - 存储文本，例如 &amp;quot;你好&amp;quot;。字符串值用双引号引起来。 int - 存储整数（全数字），没有小数，例如 123 或 -123。 float - 存储浮点数，带有小数，例如 19.
编程日记 2024/02/01 21:45:51

Zookeeper分布式队列实战

ZooKeeper实现队列步骤1.创建队列根节点：在Zookeeper中创建一个持久节点，用作队列的根节点。所有队列元素的节点将放在这个根节点下。2.实现入队操作：当需要将一个元素添加到队列时，可以在队列的根节点下创建一个临时有序节点。节点的数据可以包含队列元素的信息。3.实现出队操作：当需要从队列中取出一个元素时，先获取根节点下的所有子节点。再找到具有最小序号的子节点，获取该节点的数据，删除该节点，然后返回节点的数据。
编程日记 2024/02/01 14:42:13

SpringMVC校验注解不生效

用来实现参数校验功能。Spring使用hibernate-validator作为它的默认实现，我们只需要进行一些简单的注解声明，就可以达到参数校验的功能。但是在实际使用场景中，经常会出现校验没生效的问题。
编程日记 2024/01/31 20:39:50

为什么Java中的String类被设计为final类？

String类作为Java中不可或缺的类之一，被设计成final类带来了不可变性、安全性、可靠性和性能优势。不可变的特性使得String对象在多线程环境下安全共享，提高了应用程序的并发性和性能。此外，String类的设计还符合Java类库的一致性和规范，确保了整个语言的稳定性和可靠性。因此，String类被设计成final类是出于多方面的考虑，以提供最佳的使用体验和编程效率。
编程日记 2024/01/27 08:53:11

bat脚本打开多个黑窗口并执行不同的命令

在使用java -jar运行jar包之前，需要先启动redis，而redis的安装目录与jar包不在同一目录下，所以每次启动项目的时候都需要来回的切换目录。现写了一个bat脚本，用来一键启动redis和jar包。start cmd /k &quot;cd /d redis安装目录 &amp;&amp; redis-server redis.windows.conf&quot;其中，cmd /k命令是不关闭黑窗口的命令，timeout /T 3表示等待3秒，/NOBREAK表示键盘输入不会中断等待。
编程日记 2024/01/26 16:42:44

鸿蒙（ArkUI）开发：实现二级联动

列表的二级联动（Cascading List）是指根据一个列表（一级列表）的选择结果，来更新另一个列表（二级列表）的选项。这种联动可以使用户根据实际需求，快速定位到想要的选项，提高交互体验。例如，短视频中拍摄风格的选择、照片编辑时的场景的选择，本文即为大家介绍如何开发二级联动。
编程日记 2024/01/25 21:53:21

Vue和React的区别 | | React函数式写法和类写法的区别

React 更多的是一个库而不是框架，它更专注于视图层的管理，通过社区和第三方库来进行补充和扩展。类式组件: 类式组件是 ES6 中引入的 class 类的一种用法，它继承自 React.Component，拥有完整的生命周期和内部状态管理能力。它是无状态的，没有生命周期和内部状态。而在 React 中，我们使用 JSX 语法，它是一种 JavaScript 的扩展语法，可以在 JavaScript 中直接编写类似 HTML 的结构。在 React 中，我们可以定义组件的两种方式，即函数式组件和类式组件。
编程日记 2024/01/24 20:03:08

SpringBoot：详解Bean生命周期和作用域

前面我们讲诉了将Bean正确地装配到IoC容器，却未讲诉IoC如何装配和销毁Bean。本篇文章主要讲诉一下Bean的生命周期和作用域。以上就是Bean生命周期和作用域的讲解。
编程日记 2024/01/22 09:39:43

微信小程序 自定义组件和生命周期

类似vue或者react中的自定义组件⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成可以在微信开发者⼯具中快速创建组件的⽂件结构在⽂件夹内 components/myHeader ，创建组件 名为 myHeader⾸先要在⻚⾯的 json ⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径index.wxml// 引用声明// 要使用的组件的名称 // 组件的路径&lt; view &gt;
编程日记 2024/01/20 18:18:16
返回
顶部