【Vue】快速入门和生命周期

2023-09-18 11:15:57

目录

前言

一、vue的介绍

1. Vue.js是什么？

2. 库和框架的区别

3.基本概念和用法：

二、MVVM的介绍

1. 什么是MVVM？

2. MVVM的组成部分

3. MVVM的工作流程

4. MVVM的优势

5. MVVM的应用场景

三、vue实例

1.模板语法：

2.双向数据绑定

3.虚拟dom实例

四、vue生命周期钩子

总结

前言

        Vue.js是一款流行的JavaScript框架，它的核心库专注于视图层，使得开发者能够轻松地构建交互式Web界面。Vue的生命周期是指Vue实例从创建到销毁的整个过程，它包含了一系列的钩子函数，可以让我们在不同的阶段执行相应的操作。下面是一篇关于Vue入门及生命周期详解的文章，希望对你有所帮助。

一、vue的介绍

1. Vue.js是什么？

   Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架

  官网：https://cn.vuejs.org/

  Vue作者：尤雨溪/中国无锡

2. 库和框架的区别

  2.1 库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者

      代表：jQuery

      jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

  2.2 框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码

      代表：vue

      框架规定了自己的编程方式，是一套完整的解决方案

      使用框架的时候，由框架控制一切，我们只需要按照规则写代码

      框架的侵入性很高(从头到尾)

3.基本概念和用法：

  • Vue实例：Vue应用的入口，通过实例化Vue类来创建一个Vue实例。可以在实例中定义数据、方法、计算属性等。
  • 模板语法：Vue使用一种类似HTML的模板语法，可以将数据绑定到视图上。通过双大括号{{}}可以插入变量，使用指令v-可以实现条件渲染、循环等功能。
  • 组件化：Vue允许将页面拆分成多个组件，每个组件都有自己的数据和视图。通过组件的嵌套和通信，可以构建复杂的应用。

二、MVVM的介绍

1. 什么是MVVM？

        MVVM是Model-View-ViewModel的缩写，它是一种软件架构模式，用于将用户界面的逻辑与数据的处理分离。在MVVM中，界面的逻辑被放置在ViewModel中，而数据的处理则由Model负责。View负责展示数据，并与ViewModel进行交互。

2. MVVM的组成部分

  • Model：Model代表数据层，负责处理数据的获取、存储和操作。它可以是数据库、网络请求、本地文件等数据源。

  • View：View代表用户界面，负责展示数据和接收用户的输入。它可以是一个页面、一个控件或者一个组件。

  • ViewModel：ViewModel是View和Model之间的桥梁，负责处理界面的逻辑和数据的转换。它从Model中获取数据，并将数据转换为View可以展示的格式。ViewModel还负责处理用户的输入，并将输入传递给Model进行处理。

3. MVVM的工作流程

  1. 用户与View进行交互，例如点击按钮或输入文本。

  2. View将用户的交互事件传递给ViewModel。

  3. ViewModel接收到用户的交互事件后，根据需要从Model中获取数据。

  4. ViewModel将获取到的数据进行处理和转换，然后将处理后的数据传递给View。

  5. View接收到ViewModel传递的数据后，将数据展示给用户。

  6. 如果用户再次进行交互，重复上述步骤。

4. MVVM的优势

  • 分离关注点：MVVM将界面的逻辑与数据的处理分离，使得代码更加清晰和可维护。

  • 可测试性：由于界面的逻辑被放置在ViewModel中，可以更容易地对ViewModel进行单元测试。

  • 可复用性：ViewModel可以独立于具体的界面进行开发，可以在不同的界面中复用。

  • 响应式编程：MVVM框架通常支持响应式编程，可以实现数据的自动更新和绑定。

5. MVVM的应用场景

MVVM适用于需要处理大量数据和复杂交互的应用场景，特别是前端开发和移动应用开发。它可以帮助开发者更好地组织代码，提高开发效率和代码质量。

 注1：虽然没有完全遵循MVVM模型，Vue的设计无疑受到了它的启发。

 注2：学习Vue要转化思想：“不要在想着怎么操作DOM，而是想着如何操作数据！！！”

三、vue实例

1.模板语法：

Vue使用基于HTML的模板语法，允许你将数据绑定到DOM元素。使用双大括号{{}}进行数据绑定，使用v-指令（如v-model）进行属性绑定。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入工具 -->
		<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.js"></script>
		<title></title>
	</head>
	
	<body>
		<!-- 定义vue所管理的边界，有且只有一个根节点 -->
		<div id="app">
		  {{msg}}
		</div>
		
	<script type="text/javascript">
		// 构建vue实例并绑定边界
		new Vue({
		  el: '#app',
		  data(){
			return {msg: 'Hello Vue!你 biao哥哥 又来咯！！！'}
		  }
		})
	</script>
	</body>
</html>

2.双向数据绑定

边界中的变量和vue实例中的变量定义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入工具 -->
		<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.js"></script>
		<title></title>
	</head>
	
	<body>
		<!-- 定义vue所管理的边界，有且只有一个根节点 -->
		<div id="app">
		  {{msg}}
		  <input type="text" v-model="msg" />
		</div>
		
	<script type="text/javascript">
		// 构建vue实例并绑定边界
		new Vue({
		  el: '#app',
		  data(){
			return {msg: 'Hello Vue!你 biao哥哥 又来咯！！！'}
		  },
		})
	</script>
	</body>
</html>

3.虚拟dom实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入工具 -->
		<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.js"></script>
		<title></title>
	</head>
	
	<body>
		<!-- 定义vue所管理的边界，有且只有一个根节点 -->
		<div id="app">
		  {{msg}}
		  <input type="text" v-model="msg" />
		  <button type="button" @click="tan()">发送</button>
		</div>
		
	<script type="text/javascript">
		// 构建vue实例并绑定边界
		new Vue({
		  el: '#app',
		  data(){
			return {msg: 'Hello Vue!你 biao哥哥 又来咯！！！'}
		  },
		  methods:{
			  tan(){
				  alert(this.msg)
			  }
		  }
		})
	</script>
	</body>
</html>

v-model：是Vue中非常重要的一个指令，用于在表单控件元素和Vue实例之间创建双向数据绑定。当用户输入表单控件的值时，v-model会自动更新Vue实例中的值；当Vue实例中的数据发生变化时，v-model也会自动更新表单控件的值。

value：是v-model指令绑定的表单控件元素的value属性。它表示表单控件当前显示的值，也是Vue实例中通过v-model指令绑定的数据。

@click：是Vue中的事件监听器指令，用于在元素上添加点击事件处理函数。当用户点击该元素时，Vue实例中绑定了@click事件的函数就会被执行。

四、vue生命周期钩子

Vue的生命周期可以分为创建、更新和销毁三个阶段，每个阶段都有对应的钩子函数。下面是Vue的生命周期钩子函数及其对应的阶段：

  • beforeCreate：在实例初始化之后，数据观测和事件配置之前调用。
  • created：在实例创建完成后调用，此时已经完成了数据观测和事件配置。
  • beforeMount：在挂载开始之前调用，此时模板已经编译完成，但尚未挂载到DOM上。
  • mounted：在挂载完成后调用，此时实例已经挂载到DOM上。
  • beforeUpdate：在数据更新之前调用，可以在此时修改数据。
  • updated：在数据更新之后调用，DOM已经重新渲染。
  • beforeDestroy：在实例销毁之前调用，可以在此时进行一些清理工作。
  • destroyed：在实例销毁之后调用，此时实例中的所有东西都已经被销毁。

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

生命周期示例图：

示例： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="d1">
			<div>number:{{number}}</div>
			<div>{{detail()}}</div>
			<input type="text" v-model="number" />
		</div>
		<script>
			var data = {
				number:999,
				msg:null
			};
			var vm = new Vue({
				el:'#d1',
				data:data,
				methods:{
					detail:function(){
						return "使用方法来插值："+this.msg;
					}
				},
				beforeCreate:function(){
		            console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')           
		            console.log(this.msg)//undefined
		            console.log(document.getElementsByClassName("myp")[0])//undefined
		        },
		        created:function(){
		            console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
		            this.msg+='!!!'
		            console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
		            console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
		        },
		        beforeMount:function(){
		            console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
		            this.msg+='@@@'
		            console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
		            console.log(document.getElementsByClassName("myp")[0])//undefined
		            console.log('接下来开始render，渲染出真实dom')
		        },
		        // render:function(createElement){
		        //     console.log('render')
		        //     return createElement('div','hahaha')
		        // },
		        mounted:function(){ 
		            console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')
		            console.log(document.getElementsByClassName("myp")[0])
		            console.log('可以在这里操作真实dom等事情...')
		
		        //    this.$options.timer = setInterval(function () {
		        //        console.log('setInterval')
		        //         this.msg+='!'  
		        //    }.bind(this),500)
		        },
		        beforeUpdate:function(){
		            //这里不能更改数据，否则会陷入死循环
		            console.log('beforeUpdate:重新渲染之前触发')
		            console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')         
		        },
		        updated:function(){
		            //这里不能更改数据，否则会陷入死循环
		            console.log('updated:数据已经更改完成，dom也重新render完成')
		        },
		        beforeDestroy:function(){
		            console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
		            // clearInterval(this.$options.timer)
		        },
		        destroyed:function(){
		            console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
		        }
			});
		</script>
	</body>
</html>

总结

Vue.js是一款非常强大且易于上手的JavaScript框架，通过数据驱动视图的方式，使得我们可以更加高效地构建用户界面。同时，了解Vue的生命周期也是非常重要的，它可以帮助我们在不同的阶段执行相应的操作。希望这篇文章对你有所帮助，祝你在学习Vue.js的过程中取得进步！

更多推荐

阿里云服务器上CentOS 7.6使用rpm包安装MySQL 8.0.31

我这里下载的是最新版本，需要到MySQL官网最新版本下载地址。要是想要下载以前的版本需要到MySQL以前版本网址中。1）先使用wgethttps://cdn.mysql.com//Downloads/MySQL-8.0/mysql-8.0.31-1.el7.x86_64.rpm-bundle.tar（这个网址现在已经不

降低半导体金属线电阻的沉积和蚀刻技术

铜的电阻率取决于其晶体结构、空隙体积、晶界和材料界面失配，这在较小的尺度上变得更加重要。传统上，铜(Cu)线的形成是通过使用沟槽蚀刻工艺在低k二氧化硅中蚀刻沟槽图案，然后通过镶嵌流用Cu填充沟槽来完成的。不幸的是，这种方法产生具有显着晶界和空隙的多晶结构，这增加了铜线电阻。该工艺中还使用了高电阻TaN衬垫材料，以防止镶

直播视频处理过程

视频其实就是快速播放一连串连续的图片。每一张图片，我们称为一帧。只要每秒钟帧的数据足够多，也即播放得足够快。比如每秒30帧，以人的眼睛的敏感程度，是看不出这是一张张独立的图片的，这就是我们常说的帧率（FPS）。每一张图片，都是由像素组成的，假设为1024*768（这个像素数不算多）。每个像素由RGB组成，每个8位，共2

离散制造企业如何打造MES管理系统

在当今制造业中，MES生产管理系统越来越受到关注，但在实际应用中也遇到了一些问题。本文分析了离散制造业和流程生产行业的MES应用现状，指出了这两个行业在部署MES管理系统时存在差异的原因，并探讨了如何在离散制造业提升生产效率，降低维护和培训成本。MES系统通过信息的传递对从生产命令下发到产品完成的整个生产过程进行优化管

智能网联驾驶测试与评价工业和信息化部重点实验室“车载智能计算基础平台参考架构2.0专家研讨会”圆满结束

近日，智能网联驾驶测试与评价工业和信息化部重点实验室在北京市召开“车载智能计算基础平台参考架构2.0专家研讨会”，本次会议由智能网联驾驶测试与评价工业和信息化部重点实验室、中国软件评测中心（工业和信息化部软件与集成电路促进中心）、国家智能网联汽车创新中心主办，北京经纬恒润科技股份有限公司承办。会议主要包括两个环节，一是

redis 事务

1.什么是Redis事务提到事务,我们可能马上会想到传统的关系型数据库中的事务,客户端首先向服务器发送BEGIN开启事务,然后执行读写操作,最后用户发送COMMIT或者ROLLBACK来提交或者回滚之前的操作。但是Redis中的事务与关系型数据库是不一样的,Redis通过MULTI命令开始,之后输入一连串的操作,最终以

LeetCode 363 期周赛

2859.计算K置位下标对应元素的和题目给你一个下标从0开始的整数数组nums和一个整数k。请你用整数形式返回nums中的特定元素之和，这些特定元素满足：其对应下标的二进制表示中恰存在k个置位。整数的二进制表示中的1就是这个整数的置位。例如，21的二进制表示为10101，其中有3个置位。示例1：输入：nums=[5,1

端接电阻的阻抗匹配

差分的匹配多数采用终端的匹配；时钟采用源段匹配传输线的端接通常采用两种策略：（1）使负载阻抗与传输线阻抗匹配，即并行端接（2）使源阻抗与传输线阻抗匹配，即串行端接。（1）并行端接并行端接主要是在尽量靠近负载端的位置加上拉和/或下拉阻抗以实现终端的阻抗匹配。（2）串行端接串行端接是通过在尽量靠近源端的位置串行插入一个电阻

零基础学前端（五）HTML+CSS实战：模仿百度网站首页

1.该篇适用于从零基础学习前端的小白2.初学者不懂代码得含义也要坚持模仿逐行敲代码，以身体感悟带动头脑去理解新知识一、实战：将百度网站首页补全上一篇零基础学前端（三）重点讲解HTML-CSDN博客我们已经将顶部两侧内容已经写完。1.接下来我们的目标如下图：分析对应的标签已经写在下面图片（我将百度logo涂上马赛克，主要

看板系统如何异地电脑手机访问?主机内网ip端口映射域名外网访问

看板系统是一种可视化管理系统平台，如生产管理看板、项目管理看板、APP运营看板等将企业或工厂本地项目具体数据转换成图表模式，方便实时管理和汇总，有效提升工作效率和助力生产实践。单位内部服务器部署了看板管理系统，由于无公网IP原因，无法直接让手机访问，也无法让异地外网电脑查看。这时，我们可以利用快解析端口映射方法，一步将

【藏经阁一起读】（69）__《阿里云视频云产品手册2023版》

【藏经阁一起读】（69）__《阿里云视频云产品手册2023版》目录一、概述阿里云视频云全产品矩阵二、数字人视频制作以下是人工智能虚拟人物的一些优秀代表作品及其特点：阿里云视频云数字人视频制作产品优势▶高还原度的拟真效果▶场景化智能AI联动处理▶丰富的衍生制作能力▶灵活的应用方案阿里云视频云数字人视频制作产品能力▶数字人

热文推荐
  1. 数据在C++中的大小（占用内存）

    C++中的大小（占用内存）摘要正文获取数据类型的大小注意结论摘要在C++中，了解数据类型的大小及其在内存中的占用情况对于编写高效的代码至关重要。本文将介绍C++中不同数据类型的大小以及如何计算它们所占用的内存空间。正文在C++中，每个数据类型都有不同的字节大小，这取决于编译器和操作系统的实现。下面是一些常见的数据类型及

  2. fastjson反序列化漏洞(CVE-2017-18349)

    文章目录fastjson序列化FastJson序列化操作反序列化漏洞原理漏洞复现（CVE-2017-18349）fastjsonfastjson是阿里巴巴开发的java语言编写的高性能JSON库,用于将数据在Json和JavaObject之间相互转换。它没有用java的序列化机制,而是自定义了一套序列化机制。提供两个主

  3. Open Interpreter，一个让ChatGPT入驻你的电脑并获得联网能力成为贾维斯！

    OpenInterpreter，一个让ChatGPT入驻你的电脑并获得联网能力成为贾维斯！介绍安装使用介绍最近看了Github最近大火的程序员终端大升级，发现了openinterpreter这个可以部署到本地命令行的对话AI，其依赖ChatGPT，可以使用联网功能和本地模型，很好地拓展了原有的功能并且能结合物理设备软硬

  4. 勇立潮头！高品质SFT语音数据实现Zero-Shot语音复刻大模型

    文本到语音合成（TexttoSpeech，TTS）作为生成式人工智能（GenerativeAI或AIGC）的重要课题，在近年来取得了飞速发展。为了实现高效合成既自然又高质量的人类语音，有不少机构及企业都进行了相关项目的研究，包括微软亚洲研究院机器学习组和微软Azure语音团队去年推出的NaturalSpeech（htt

  5. 企业微信 API 接口调用教程：图文详解企业微信 API 的使用方法

    本文通过access_token凭证的方式来讲解怎么调用企业微信API，并一步步介绍如何获取企业微信API的corpsecret、corpid、access_token凭证以及怎么向企业微信的应用发送消息。企业微信API在线地址为：概述-企业微信API，这个在线地址的项目你可以克隆到Apifox，以方便调试。话不多说，

  6. 基于深度学习的加密恶意流量检测

    加密恶意流量检测研究目标定位数据收集数据处理基于特征分类算法的数据预处理基于源数据分类算法的数据预处理特征提取模型选择基于数据特征的深度学习检测算法基于特征自学习的深度学习检测算法训练和评估精确性指标实时性指标应用检验改进摘录自：MingfangZHAI,XingmingZHANG,BoZHAO.Surveyofenc

  7. 应用在苹果应用商店该如何进行优化

    众所周知，ASO最大化的提高应用程序在商店中的可见性，其目标是获得更多的下载量，同时它也与下载的转化率有关。1、根据应用阶段追求不同的目标。它可以是有机增长或转化率的提高，获得更多安装并降低用户获取成本，增加收入或提高保留率，达到一定的参与水平或提高每日或每月活跃用户。2、应用的文本字段。应用名称需要包含一些主要关键词

  8. PAT 1035 插入与归并

    PAT1035插入与归并题目描述思路讲解代码展示题目描述思路讲解分析：先将i指向中间序列中满足从左到右是从小到大顺序的最后一个下标，再将j指向从i+1开始，第一个不满足a[j]==b[j]的下标，如果j顺利到达了下标n，说明是插入排序，再下一次的序列是sort(a,a+i+2);否则说明是归并排序。归并排序就别考虑中间

  9. xen-timer

    目的主要了解一下armtimerspec和xen项目中timer是怎么使用，如何实现的。同时也是对学习过程的一些记录。学习链接文章链接时间子系统http://www.wowotech.net/sort/timer_subsystemarmtimerspechttps://developer.arm.com/docume