Vue系列之入门篇

news2024/11/23 16:58:10

前言:

                                                目录

一,关于Vue的简介

1.什么是Vue?

2.使用Vue框架的好处?

3. 库和框架的区别:

4. MVVM的介绍

5.Vue的入门案例

二,Vue的生命周期


一,关于Vue的简介

1.什么是Vue?

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

2.使用Vue框架的好处?

  1. 简单易学:Vue的API设计简洁,易于理解和上手。它采用了模板语法,使得开发者可以更加直观地描述页面的结构和逻辑。

  2. 组件化开发:Vue将页面拆分为独立的组件,每个组件都有自己的状态和行为,方便组织和复用代码。组件化开发可以提高开发效率,同时也使得代码更加可维护和可测试。

  3. 响应式数据绑定:Vue使用双向绑定的方式来处理数据和视图之间的同步,只需简单地绑定数据到视图,当数据发生变化时,视图会自动更新。这大大减少了手动处理DOM的工作量,提高了开发效率。

  4. 轻量高效:Vue的体积小,加载速度快,同时也具有出色的性能,能够高效地处理大规模的应用程序。

  5. 生态丰富:Vue拥有庞大的社区和生态系统,有大量的第三方插件和组件可以使用。这些插件和组件可以帮助开发者快速构建复杂的功能,节省开发时间。

总而言之,Vue框架具有简单易学、组件化开发、响应式数据绑定、轻量高效和丰富的生态等优点,使得它成为一种非常流行的前端框架。

3. 库和框架的区别:

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

      代表:jQuery

      jQuery这个库的核心:DOM操作,即:封装DOM操作,简化DOM操作

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

      代表:vue

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

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

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

4. MVVM的介绍

    MVVM是Model-View-ViewModel的缩写。是一种软件架构设计模式。它是一种简化用户界面的事件驱动编程方式,它是不允许数据和视图直接通信的,只能通过ViewModel来通信 ,一种更好的UI模式解决方案,MVVM通过数据双向绑定让数据自动地双向同步

相比较于mvc更加便捷。  在MVVM模式中,Model是数据层,用于存储数据和对数据进行增删改查;View是视图层,也就是UI界面,用于将数据模型转化成UI展现出来;ViewModel是一个同步View和Model的对象,它负责处理用户的交互事件,以及将用户的操作传递给Model进行相应的处理,最后将处理结果返回给View进行展示
 

5.Vue的入门案例

5.1基本使用:通过vue的方式显示到浏览器:

第一步:使用开发工具Hbuilderx

下载地址:

HBuilderX-高效极客技巧 (dcloud.io)

第二步:正常创建html项目

第三步:导入vue的在线资源:

这里导入的是以vue.js后缀的,高级版本的资源可能没有。

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script>

这个网站不仅仅有vue的在线资源,还有jQuery,bootstrap...

vue (v3.3.4) - Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务icon-default.png?t=N7T8https://www.bootcdn.cn/vue/

第四步:这一步就是开始写代码了。

案例一,入门使用vue的语法写一个显示到浏览器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script>
		<title></title>
	</head>
	<style type="text/css">
		#app{
			background-image: 
			-webkit-linear-gradient(
			0deg,
			yellow,
			red 10%,
			green
			);
			-webkit-background-clip: text;
			color: transparent;
		}
	</style>
	<body>
		<!-- vue管理的边界,只有一个节点==》一个div-->
		<div id="app">
			{{msg}}
		</div>
		
		<!-- 类似我们学过的jQuery方式,但vue比jQuery方便 -->
		<script type="text/javascript">
			new Vue({
				el:"#app",//类似id选择器找到vue的div
					data(){
						return {msg:'输入内容,vue会显示!'}//json数据
					}
			})
			
		</script>
	</body>
	

</html>

效果:

案例二:实现点击显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<title></title>
	</head>
	<style type="text/css">
		#app{
			background-image: 
			-webkit-linear-gradient(
			0deg,
			yellow,
			red 10%,
			green
			);
			-webkit-background-clip: text;
			color: transparent;
		}
	</style>
	<body>
		<!-- vue管理的边界,只有一个节点==》一个div-->
		<div id="app">
			{{msg}}
			<span id="show"></span>
			<input id="tancontent" type="text" />
			<button type="button" onclick="tan()">点击弹出</button>
		</div>
		
		<!-- 类似我们学过的jQuery方式,但vue比jQuery方便 -->
		<script type="text/javascript">
			new Vue({
				el:"#app",//类似id选择器找到vue的div
					data(){
						return {msg:'输入内容,vue会显示!'}//json数据
					}
			})
			
			function tan(){
				var tancontent = $("#tancontent").val();//获取id为tancontent文本
				$("#show").text(tancontent);//为id为show赋值
				
			}
		</script>
	</body>
	

</html>

案例三:实现输入显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<title></title>
	</head>
	<style type="text/css">
		#app{
			background-image: 
			-webkit-linear-gradient(
			0deg,
			yellow,
			red 10%,
			green
			);
			-webkit-background-clip: text;
			color: transparent;
		}
	</style>
	<body>
		<!-- vue管理的边界,只有一个节点==》一个div-->
		<div id="app">
			{{msg}}
			<input v-model="msg">
			<span id="show"></span>
			<input id="tancontent" type="text" />
			<!-- <button type="button" onclick="tan()">点击弹出</button> -->
		</div>
		
		<!-- 类似我们学过的jQuery方式,但vue比jQuery方便 -->
		<script type="text/javascript">
			new Vue({
				el:"#app",//类似id选择器找到vue的div
					data(){
						return {msg:'输入内容,vue会显示!'}//json数据
					}
			})
			
			function tan(){
				var tancontent = $("#tancontent").val();//获取id为tancontent文本
				$("#show").text(tancontent);//为id为show赋值
				
			}
		</script>
	</body>
	

</html>

案例四:实现弹窗效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<title></title>
	</head>
	<style type="text/css">
		#app{
			background-image: 
			-webkit-linear-gradient(
			0deg,
			yellow,
			red 10%,
			green
			);
			-webkit-background-clip: text;
			color: transparent;
		}
	</style>
	<body>
		<!-- vue管理的边界,只有一个节点==》一个div-->
		<div id="app">
			{{msg}}
			<!-- <input v-model="msg"> -->
			<span id="show"></span>
			<input id="tancontent" type="text" />
			<button v-on:click="tan()">点击弹出</button>
		</div>
		
		<!-- 类似我们学过的jQuery方式,但vue比jQuery方便 -->
		<script type="text/javascript">
			new Vue({
				el:"#app",//类似id选择器找到vue的div
					data(){
						return {msg:'输入内容,vue会显示!'};//json数据
					},
			methods:{
				tan(){
					alert(this.msg);
				}
			}
			})
		</script>
	</body>
	

</html>

以上使用到vue中有的:v-model

        在Vue中,v-model是一个指令用于在表单控件元素上创建双向数据绑定。

二,Vue的生命周期

Vue组件具有生命周期钩子函数,它们允许开发者在不同阶段插入自定义代码。以下是Vue的生命周期及其用途:

  1. beforeCreate:在实例刚创建之前被调用。在这个阶段,组件的数据和方法都还未初始化。

  2. created:在实例创建后立即被调用。可以在这个阶段进行一些初始的数据处理、异步请求等操作,但尚未进行DOM渲染。

  3. beforeMount:在挂载开始之前被调用。此时,组件的模板已经编译完成,但尚未渲染到页面。

  4. mounted:在挂载完成后被调用。此时,组件已经被渲染到页面中,并且可以操作DOM。

  5. beforeUpdate:在组件更新之前被调用,即在数据发生改变时。可以在此阶段进行一些准备工作。

  6. updated:在组件更新完成后被调用。此时组件的数据已经被更新,DOM也已重新渲染。

  7. beforeDestroy:在组件销毁之前被调用。可以在此阶段进行一些清理工作,如清除计时器、取消订阅等。

  8. destroyed:在组件销毁后被调用。此时,组件已经被销毁,数据和方法都不可用。

 

三,总结:

对于初学的程序员要注意的点:

  1. 理解核心概念:在开始学习Vue之前,确保你对Vue的核心概念有一个清晰的理解,例如组件、模板、指令、数据绑定等。这将为你打下坚实的基础,帮助你更好地理解和运用Vue的各种功能。

  2. 实践驱动学习:Vue是一门实践性很强的技术,只有通过实际的练习来加深理解和熟练运用。尝试使用Vue构建一些简单的项目或小组件,通过实际的实践来巩固所学的知识。

  3. 深入学习官方文档:Vue官方提供了详细的文档,是学习Vue的重要资源。仔细阅读并理解文档中的示例代码和解释,可以帮助你更好地理解Vue的工作原理和用法。

  4. 学习Vue的生态系统:Vue有一个庞大的社区和生态系统,里面有许多有用的第三方库、插件和组件,可以帮助你更高效地开发。花时间了解并学习这些工具和库的使用,将会对你的学习和开发产生积极的影响。

  5. 参与社区交流:加入Vue的社区,参与讨论、提问和回答问题。与其他开发者交流经验和思路,会使你快速成长,并且获取宝贵的帮助和支持。

  6. 不断扩展学习:Vue是一个不断发展和更新的技术,保持对新特性和最佳实践的关注是很重要的。持续学习和不断扩展你的Vue知识,将使你在实际开发中更加得心应手。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1015869.html

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

相关文章

详解混合类型文件(Polyglot文件)的应用生成与检测

1. 引入 混合类型文件&#xff08;Polyglot文件&#xff09;&#xff0c;是指一个文件&#xff0c;既可以是合法的A类型&#xff0c;也可以是合法的B类型。 比如参考3中的文件&#xff0c;是一个html文件&#xff0c;可以用浏览器正常打开&#xff1b;它也是一个一个.jar文件&…

来看看Javadoc(文档注释)详解

Java 支持 3 种注释&#xff0c;分别是单行注释、多行注释和文档注释。文档注释以/**开头&#xff0c;并以*/结束&#xff0c;可以通过 Javadoc 生成 API 帮助文档&#xff0c;Java 帮助文档主要用来说明类、成员变量和方法的功能。 文档注释只放在类、接口、成员变量、方法之前…

代码随想录算法训练营第53天 | ● 1143.最长公共子序列 ● 1035.不相交的线 ● 53. 最大子序和

文章目录 前言一、1143.最长公共子序列二、1035.不相交的线三、53. 最大子序和总结 前言 动态规划 一、1143.最长公共子序列 确定dp数组&#xff08;dp table&#xff09;以及下标的含义 dp[i][j]&#xff1a;长度为[0, i - 1]的字符串text1与长度为[0, j - 1]的字符串text2的…

​云南财经大学《乡村振兴战略下传统村落文化旅游设计》许少辉八一著作

​云南财经大学《乡村振兴战略下传统村落文化旅游设计》许少辉八一著作

掌握这5种方法,让你的新AirPods充电盒更耐用!

每次AirPods充电盒落地时&#xff0c;你都会呼吸急促吗&#xff1f;无论我使用的是旧一代的AirPods还是最新的AirPod Pro 2&#xff0c;我都关心它们的保存状况&#xff0c;并尽力保护这些脆弱设备的安全。我想我对AirPods Pro 2的新充电盒也会有同样的感受&#xff0c;它在9月…

学校项目培训之Carla仿真平台之安装Carla

官网&#xff1a;http://carla.org/ 写在前面 由于安装都写了很多东西&#xff0c;所以我单独将安装弄出来记录一下。 如果你在安装9.12版本的时候遇到了很多问题&#xff0c;你可以考虑以下几点&#xff1a; - 楼梯可能不太行&#xff0c;需要更换&#xff0c;这是我实践得到的…

英语——记忆篇——谐音法+拼音法

中小学单词&#xff1a; 谐音法&#xff1a; 1.issue n.问题&#xff1b;&#xff08;杂志、报刊的&#xff09;一期&#xff1b;v.发行 谐音“一休”&#xff1b;想象聪明的一休很会解决问题&#xff0c;发行了一期杂志专门描述他解决问题的方法&#xff1b; issue 问题&…

电脑大文件删除了能恢复吗 电脑大文件删除了怎么恢复

在日常办公中&#xff0c;电脑是必不可少的办公工具&#xff0c;电脑能够帮助我们储存大量的大文件&#xff0c;但是有时候可能会因为一些误操作或者电脑故障等情况&#xff0c;导致一些电脑大文件的丢失&#xff0c;所以今天就和大家分享一下&#xff0c;电脑大文件删除了能恢…

[UE]碰撞和Trace检测

UE的碰撞和Trace检测 基础概念碰撞相关概念Overlap和Hit事件概念和条件使用示例 Trace检测引擎 World.h 中的TraceUKismetSystemLibrary 中的 TraceHitResultTrace示例LineTraceSphereTraceSingleBoxSweepSphereTraceCapsuleTrace 记录SetActorLocation中的Sweep和Teleport为啥…

CocosCreator3.8研究笔记(十九)CocosCreator UI组件(三)

前面的文章已经介绍了Layout 组件 、ScrollView 组件 、PageView 组件 。 想了解的朋友&#xff0c;请查看 CocosCreator3.8研究笔记&#xff08;十八&#xff09;CocosCreator UI组件&#xff08;二&#xff09;。 今天我们主要介绍CocosCreator 常用组件&#xff1a;Butt…

Windows 10 Enterprise LTSC 2021 (x86) - DVD (Chinese-Simplified)文件分享

Windows 10 Enterprise LTSC 2021 (x64) - DVD (Chinese-Simplified) SW_DVD9_WIN_ENT_LTSC_2021_64BIT_ChnSimp_MLF_X22-84402.ISO 镜像文件&#xff1a; 链接&#xff1a;https://pan.quark.cn/s/2f8f61ec4a98 Windows 10 Enterprise LTSC 2021 (x86) - DVD (Chinese-Simpli…

辐射威胁:揭示辐射对人体健康和肠道菌群的影响及防护

谷禾健康 辐射对人体的影响是一个长期以来备受关注的问题。长时间暴露在辐射环境下可能会导致细胞损伤、突变和癌症等健康问题。 辐射包括电离辐射&#xff08;X光机、CT、伽马刀、钴60治疗机、碘-131&#xff09;和非电离辐射&#xff08;手机辐射、微波炉、电热毯、高压电塔、…

LeetCode(力扣)968. 监控二叉树Python

LeetCode968. 监控二叉树 题目链接代码 题目链接 https://leetcode.cn/problems/binary-tree-cameras/description/ 代码 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # …

翻牌闯关游戏

翻牌闯关游戏 3关&#xff1a;关卡由少至多12格、20格、30格图案&#xff1a;12个玩法&#xff1a;点击两张卡牌&#xff0c;图案一到即可消除掉 记忆时长(毫秒)&#xff1a;memoryDurationTime:5000 可配置&#xff0c;默认5000 提示游戏玩法&#xff1a;showTipsFlag:1 可…

算法宝典2——Java版本(此系列持续更新,这篇文章目前3道)(有题目的跳转链接)(此份宝典包含了二叉树的算法题)

注&#xff1a;由于字数的限制&#xff0c;我打算把算法宝典做成一个系列&#xff0c;一篇文章就20题&#xff01;&#xff01;&#xff01; 目录 一、二叉树的算法题&#xff08;目前3道&#xff09; 1. 平衡二叉树&#xff08;力扣&#xff09; 2. 对称二叉树&#xff0…

合肥先进光源国家重大科技基础设施项目及配套工程启动会纪念

合肥先进光源国家重大科技基础设施项目及配套工程启动会纪念 卡西莫多 合肥长丰岗集里 肥鸭从此别泥塘 先平场地设围栏 进而工地筑基忙 光阴似箭指日争 源流汇智山水长 国器西北扩新地 家校又添新区园 重器托举有群力 大步穿梭两地间 科教兴邦大国策 技术盈身坦荡行…

Sourcetree 无法打开/闪退问题

Sourcetree在某次开机以后无法打开或者是闪退。 Sourcetree是一款Git的可视化图形管理界面,提供了Windows和Mac的免费Git客户端,很方便的管理项目的代码版本 出现问题的环境 win11&#xff0c;sourcTree版本&#xff1a;3.4.12.0 在开始菜单搜索sourcetree&#xff0c;打开…

Golang中的GMP调度模型

GMP调度模型 Golang调度器的由来 单进程时代不需要调度器 1.单一的执行流程&#xff0c;计算机只能一个任务一个任务处理。 2.进程阻塞所带来的CPU时间浪费。 后来操作系统就具有了最早的并发能力&#xff1a;多进程并发&#xff0c;当一个进程阻塞的时候&#xff0c;切换…

polygon yolo

[1] : github: https://github.com/HRan2004/Yolo-ArbPolygon [2] https://github.com/XinzeLee/PolygonObjectDetection [3] https://github.com/AlbinZhu/yolov7-polygon-detection 链接&#xff1a;https://pan.baidu.com/s/1Zpl1bIGfMli6p5LQdbET0w?pwddw2b 提取码&#…

C++之std::holds_alternative与std::get应用实例(二百一十九)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…