Vue系列（一）之 Vue入门

2023-09-18 08:38:57

一. Vue简介

1.1 概述

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

2.2 特点

1.声明式编码，遵循MVVM原则

2.编码简单，体积小

3.组件化，复用率高，代码维护容易

2.3 MVVM介绍

MVVM，一种更好的UI模式解决方案，这个模式的核心是ViewModel，它是一种特殊的model类型，用于表示程序的UI状态。它包含描述每个UI控件的状态的属性。例如，文本输入域的当前文本，或者一个特定按钮是否可用。它同样暴露了视图可以执行哪些行为，如按钮点击或手势。

MVVM ===> M / V / VM

   M：model数据模型

   V：view视图

   VM：ViewModel 视图模型    虚拟dom

我们可以将ViewModel看作是视图的模型(model-of-the-view)，ViewModel层通过双向数据绑定将View层和Model层连接了起来。MVVM模式中的三部分比MVC更加简洁，下面是一些严格的限制

  1. View引用了ViewModel，但反过来不行。
  2. ViewModel引用了Model，但反过来不行。

如果我们破坏了这些规则，便无法正确地使用MVVM。

这个模式有以下一些立竿见影的优势：

  1. 轻量的视图：所有的UI逻辑都在ViewModel中。
  2. 便于测试：我们可以在没有视图的情况下运行整个程序，这样大大地增加了它的可测试性

 注1：虽然没有完全遵循MVVM模型，Vue的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例，另外一个js框架“knockout”完全遵循MVVM模型

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

2.4 库和框架的区别

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

      代表：jQuery

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

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

      代表：vue

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

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

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

二. Vue入门

2.1 Vue起步

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<!-- 定义vue所管理的边界，有且只有一个根节点 -->
		<div id="app">
			{{msg}}
		</div>
		
		<script type="text/javascript">
			// 构建vue实例并绑定边界
			new Vue({
				// el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
				el:"#app",
				// Vue 实例的数据对象，用于给 View 提供数据
				data(){
					return{msg:"hello vue!!!"}
				}
			})
		</script>
	</body>
</html>

效果：

 

2.2 v-model：数据双向绑定实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<!-- 定义vue所管理的边界，有且只有一个根节点 -->
		<div id="app">
			{{msg}}
			<br>
			<input v-model="msg" />
		</div>
		
		<script type="text/javascript">
			// 构建vue实例并绑定边界
			new Vue({
				// el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
				el:"#app",
				// Vue 实例的数据对象，用于给 View 提供数据
				data(){
					return{msg:"hello vue!!!"}
				}
			})
		</script>
	</body>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<!-- 定义vue所管理的边界，有且只有一个根节点 -->
		<div id="app">
			{{msg}}
			<br>
			<input v-model="msg" />
			<button type="button" @click="tan()">发送弹屏</button>
		</div>
		
		<script type="text/javascript">
			// 构建vue实例并绑定边界
			new Vue({
				// el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
				el:"#app",
				// Vue 实例的数据对象，用于给 View 提供数据
				data(){
					return{msg:"hello vue!!!"}
				},
				methods:{
					tan(){
						alert(this.msg);
					}
				}
			})
		</script>
	</body>
</html>

 

三. Vue的生命周期

Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。

vue生命周期可以分为八个阶段，分别是：

beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）

<!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初始化默认触发的钩子函数有：beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）

四. 前后端分离

在传统的web应用开发中，大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端，而将运行在服务器，为前端提供业务逻辑和数据准备的所有代码统称为后端。 由于前后端分离这个概念相对来说刚出现不久，很多人都是只闻其声，不见其形，所以可能会对它产生一些误解，误以为前后端分离只是一种web应用开发模式，只要在web应用的开发期进行了前后端开发工作的分工就是前后端分离。 其实前后端分离并不只是开发模式，而是web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并进行开发和测试；在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。 前后端分离原则，简单来讲就是前端和后端的代码分离也就是技术上做分离。推荐的模式是最好直接采用物理分离的方式部署，进一步促使进行更彻底的分离。不要继续以前的服务端模板技术，比如JSP ，把Java JS HTML CSS 都堆到一个页面里，稍复杂的页面就无法维护。

好处：

这种分离模式的方式有几个好处：

前后端技术分离，可以由各自的专家来对各自的领域进行优化，这样前端的用户体验优化效果会更好。分离模式下，前后端交互界面更加清晰，就剩下了接口和模型，后端的接口简洁明了，更容易维护。前端多渠道集成场景更容易实现，后端服务无需变更，采用统一的数据和模型，可以支撑前端的web UI ，移动App等访问。

前后端分离意味着，前后端之间使用 JSON 来交流，两个开发团队之间使用 API 作为契约进行交互。从此，后台选用的技术栈不影响前台。 前后端分离并非仅仅只是前后端开发的分工，而是在开发期进行代码存放分离、前后端开发职责分离，前后端能够独立进行开发测试；在运行期进行应用部署分离，前后端之间通过HTTP请求进行通讯。前后端分离的开发模式与传统模式相比，能为我们提升开发效率、增强代码可维护性，让我们有规划地打造一个前后端并重的精益开发团队，更好地应对越来越复杂多变的Web应用开发需求。 前后端分离的核心：后台提供数据，前端负责显示。

更多推荐

使用 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相抗衡，最关键的是，价格只要一二百块钱。以下

【C++】C++ 语言对 C 语言的加强 ① ( 实用性增强 - 变量任意位置定义 | register 关键字增强 - 自动进行寄存器优化 )

文章目录一、实用性增强-变量任意位置定义二、register关键字增强-自动进行寄存器优化一、实用性增强-变量任意位置定义C语言定义变量位置:在C语言中,函数作用域中使用到的变量,必须在作用域开始的位置定义,一旦开始编写代码逻辑后,在逻辑代码行之间,不能定义变量;新版本的C语言编译器不会报错,可以在逻辑代码之间定义变量

热文推荐
  1. MySQL学习系列（2）-每天学习10个知识

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

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

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

  3. 19 Python的math模块

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

  4. php函数usort使用方法

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

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

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

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

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

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

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

  8. 算法基础:图

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

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

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