Vue介绍与入门(一篇入门)

news2024/10/10 14:26:33

Vue.js 是一个流行的 JavaScript 框架，专门用于构建用户界面和单页面应用程序。它简单易学，但功能强大，能够帮助开发者快速构建交互性强的 Web 应用。

本教程旨在帮助那些刚开始学习 Vue.js 的开发者快速入门，并掌握一些基础知识。在这个教程中，我们将介绍 Vue.js 的一些重要概念，比如组件、数据绑定、指令等，帮助你了解如何使用 Vue.js 来构建应用程序。

请注意，本教程假设你已经具有一定的 JavaScript 和 HTML/CSS 基础知识。如果你想要更好地理解本教程内容，建议在继续学习之前先学习一些基础知识。

作者建议:学习知识在于深度理解，多动手、多动脑，总能更快地领悟。不要仅仅停留在阅读代码的层面，亲自动手敲打一遍，会带来更丰富的收获。通过实践，我们能够更深入地理解知识，掌握技能，并且在解决问题时更加得心应手。相信自己的能力，坚持不懈地实践，你将会取得更大的进步和成就。让学习成为一种习惯，让动手实践成为你提升的捷径，加油！你是最棒的!

本篇博客的编辑工具:HBuilderX文档

建议学完:HTML  Css   JavaScript 再来学习Vue

Vue.js是什么

Vue(读音 /vjuː /，类似于view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合. Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三 大主流框架！

Vue官网:Vue.js

Vue.js优点

1.体积小--->压缩后33k

2.更高的运行效率

     用JQuery或者原生的JavaScriptDOM操作函数对DOM进行频繁操作的 时候，浏览器要不停的渲染新的DOM树，导致页面看起来非常卡顿。

    基于虚拟dom，一种可以预先通过JavaScript进行各种计算，把最终的 DOM操作计算出来并优化的技术，最后在计算完毕才真正将DOM操作提交。

3.双向数据绑定,简化Dom操作

      通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象, 把更多的精力投入到业务逻辑上.

      MVVM是Model-View-ViewModel的简写。MVVM 就是将其中的View的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开.

​

4.生态丰富,学习成本低

       市场上拥有大量成熟、稳定的基于vue.js的ui框架、常用组件！来即用实现 快速开发！对初学者友好、入门容易、学习资料多.

Vue安装

1.下载Vue.js文件并导入js文件

 

 

2.在HTML文件中引用vue.js文件

这样一个基础的vue项目(vue项目有进阶版)就完成了

第一个Vue程序

效果演示:

代码: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}
		</div>
		
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					message: 'Hello Vue!'
				}
			})
		</script>
	</body>
</html>

语法解释:

{{ 变量 }} ,插值表达式获取data数据

new Vue();创建Vue对象(VM对象)

el:数据挂载的dom对象

Vue会管理el选项命中的元素及其内部的后代元素

可以使用其他的选择器，但是建议使用ID选择器

可以使用其他的闭合标签，不能使用HTML和BODY

Vue中用到的数据定义在data中

data 中可以写复杂类型的数据,如对象,数组

Vue指令

指令带有前缀 v- 开头，以表示它们是 Vue 提供的特殊属性

1.v-text

作用是设置标签的文本内容

默认写法会替换全部内容，使用差值表达式可以替换指定内容

内部支持写表达式

代码演示：<div v-text="message"><p>你好</p></div>

这个v-text与{{message}}有区别，我们在下面与v-html一起讨论

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-text="message">你好</p>
			<p>你好{{message}}</p>
		</div>
		
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					message: 'Hello Vue!'
				}
			})
		</script>
	</body>
</html>

效果演示：

2.v-html

作用是设置元素的innerHTML

内容中有html结构会被解析为标签

内部支持写表达式

代码演示:<div v-html="message">你好</div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-text="message"><p>你好</p></div>
			<div>你好{{message}}</div>
			<div v-html="message">你好</div>
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					message: '<p>Hello vue</p>'
				}
			})
		</script>
	</body>
</html>

效果演示:

3.{{message}}  v-text v-html区别

{{message}}:这个语法也就是将message的值插在网页中(他不会覆盖其他的值);

v-text v-html:会将这个标签的内容修改或者填入message中的值

v-text:不能识别message中的标签

v-html:可以识别message中的标签

4.v-on

作用是为元素绑定事件(这里的事件指的是JavaScript中学习的事件,如果不知道可以跳转:JavaScript学习)

事件名不需要写on指令可以简写为@

绑定的方法定义在methods属性中,可以传入自定义参数

代码演示:

            <input type="button" value="测试1" v-on:click = "test()"/>
            <input type="button" value="测试2" @click="test()"/>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="测试1" v-on:click = "test()"/>
			<input type="button" value="测试2" @click="test()"/>
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					message: '<p>Hello vue</p>'
				},
				methods:{
					test(){
						alert("你好登山者");
					}
				}
			})
		</script>
	</body>
</html>

效果演示:

 5.v-model

作用是便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联

绑定的数据表单元素的值 双向数据绑定

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="测试1" @click = "test()"/>
			<div>{{message}}</div>
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					message: ''
				},
				methods:{
					test(){
						this.message = "加油登山者";
					}
				}
			})
		</script>
	</body>
</html>

效果演示:

6.v-show

作用是根据真假切换元素的显示状态

原理是修改元素的display，实现显示隐藏

指令后面的内容，最终都会解析为布尔值

值为true元素显示，值为false元素隐藏

数据改变之后，对应元素的显示状态会同步更新

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<img src="img/1.jpg" v-show="key" />
			<input type="button" value="测试1" @click="test()" />
		</div>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					message: '',
					key: true
				},
				methods: {
					test() {
						this.key = false;
					}
				}
			})
		</script>
	</body>
</html>

效果演示:

 7.v-if

作用是根据表达式的真假切换元素的显示状态

本质是通过操纵dom元素来切换

显示状态表达式的值为true，元素存在于dom中，为false，从dom中移除 频繁的切换v-show，反之使用v-if，前者的切换消耗小

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<img src="img/1.jpg" v-if="key" />
			<div v-else>隐藏</div>
			<input type="button" value="测试1" @click="test()" />
		</div>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					message: '',
					key: true
				},
				methods: {
					test() {
						this.key = false;
					}
				}
			})
		</script>
	</body>
</html>

效果:

8.v-bind

作用是为元素绑定属性

完整写法是v-bind：属性名

简写的话可以直接省略v-bind，只保留：属性名

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js"></script>
	<body>
		<div id="app">
			<img v-bind:src="img"/>
			<img :src="img" :title="title"/>
		</div>
		<script>
			var app = new Vue({
			  el: '#app',
			  data: {
				  img:"img/1.jpg",
				  title:"这是一个手机"
			  }
			})
		</script>
	</body>
</html>

效果:

 

9.v-for

作用是根据数据生成列表结构

数组经常和v-for结合

使用语法是（item，index）in数据

item 和index 可以结合其他指令一起使用

数组长度的更新会同步到页面上是响应式的

为循环绑定一个key值 :key=”值” 尽可能唯一

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<select>
				<option>请选择</option>
				<option v-for="city in citys">{{city}}</option>
			</select>
			<table border="1">
				<tr>
					<td>序号</td>
					<td>姓名</td>
					<td>年龄</td>
				</tr>
				<tr v-for="(obj,index) in objs">
					<td>{{index+1}}</td>
					<td>{{obj.name}}</td>
					<td>{{obj.age}}</td>
				</tr>
			</table>
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					citys:['上海','陕西','四川'],
					objs:[{name:'张三',age:19},{name:'李四',age:18}]
				}
			})
		</script>
	</body>
</html>

效果:

Vue 实例生命周期 

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数 据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时 在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添 加自己的代码的机会

简单说：一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期

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

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

相关文章

uni-app的showModal提示框，进行删除的二次确认，可自定义确定或取消操作

uni-app的showModal提示框，进行删除的二次确认，可自定义确定或取消操作

实现效果&#xff1a; 此处为删除的二次确认示例&#xff0c;点击删除按钮时出现该提示&#xff0c;该提示写在js script中。 实现方式&#xff1a; 通过uni.showModal进行提示&#xff0c;success为确认状态下的操作自定义&#xff0c;此处调用后端接口进行了删除操作&#…
阅读更多...
网络爬虫中Xpath的使用方法

网络爬虫中Xpath的使用方法

正则表达式虽然可以处理包含了诸如 HTML 或 XML 内容的字符串&#xff0c;但只能根据文本的 特征匹配字符串&#xff0c;而忽略字符串所包含的内容的真实格式。为了解决这个问题&#xff0c;Python 引入 XPath 以及支持 XPath 的第三方库 lxml&#xff0c;专门对 XML 或 HTML 格…
阅读更多...
【LeetCode】一、数组相关（双指针算法 + 置换）

【LeetCode】一、数组相关（双指针算法 + 置换）

文章目录 1、算法复杂度1.1 时间复杂度1.2 空间复杂度 2、数组3、leetcode485&#xff1a;最大连续1的个数4、leetcode283&#xff1a;移动05、leetcode27&#xff1a;移除元素 1、算法复杂度 1.1 时间复杂度 算法的执行时间与输入值之间的关系&#xff08;看代码实际总行数的…
阅读更多...
CMA软件测试报告对企业和用户有什么好处?

CMA软件测试报告对企业和用户有什么好处?

CMA是中国计量认证的简称&#xff0c;由省级以上人民政府计量行政部门对检测机构的检测能力及可靠性进行的一种全面的认证及评价&#xff0c;认证对象是所有对社会出具公正数据的产品质量监督检验机构及其它各类实验室&#xff0c;是需要强制性认证的资质。取得该资质认证的&am…
阅读更多...
【深度强化学习】如何使用多进程（multiprocessing、pipe）来加速训练

【深度强化学习】如何使用多进程（multiprocessing、pipe）来加速训练

文章目录 实验结果实现思路思路1思路2 进程与线程介绍如何实现multiprocessing、Pipe的范例关于时间对比上的问题代码修改收敛为何不稳定 技巧进程资源抢占问题线程问题cpu和gpu问题 进阶&#xff08;还没看懂/还没实验&#xff09;附代码raw代码mul代码 实验结果 实验平台&am…
阅读更多...
Kali Linux渗透测试指南（详细教程，建议收藏）

Kali Linux渗透测试指南（详细教程，建议收藏）

渗透测试是对信息系统遭受实际攻击时的一种受控模拟&#xff0c;是安全中十分重要的一部分。 渗透测试人员往往会使用一些成熟的工具&#xff0c;只有全面掌握这些工具&#xff0c;我们才能更好地进行渗透。 今天就给大家分享一份Kali Linux高级渗透测试指南&#xff0c;一共…
阅读更多...
google浏览器无法访问大端口的处理方式

google浏览器无法访问大端口的处理方式

属性的目标中添加后缀内容或者修改后台端口为常用端口&#xff0c;比如8080等。 “C:\Program Files\Google\Chrome\Application\chrome.exe” --explicitly-allowed-ports8888
阅读更多...
YOLOv8+SwanHub+作物检测：从可视化训练到Demo演示

YOLOv8+SwanHub+作物检测：从可视化训练到Demo演示

1. 项目介绍 本项目旨在利用先进的YOLOv8深度学习模型对麦穗进行高效、准确的检测。我们采用了GlobalWheat数据集&#xff0c;该数据集包含丰富的麦穗图像&#xff0c;为模型的训练提供了有力的数据支持。通过该实验&#xff0c;实现高准确率的麦穗识别&#xff0c;为农业生产提…
阅读更多...
亮数据，一款新的低代码爬虫利器！

亮数据，一款新的低代码爬虫利器！

在当今数据驱动型时代&#xff0c;数据采集和分析能力算是个人和企业的核心竞争力。然而&#xff0c;手动采集数据耗时费力且效率低下&#xff0c;而且容易被网站封禁。 我之前使用过一个爬虫工具&#xff0c;亮数据&#xff08;Bright Data&#xff09; &#xff0c;是一款低…
阅读更多...
LLM生成模型在生物蛋白质应用：ESM3

LLM生成模型在生物蛋白质应用：ESM3

参考&#xff1a; https://github.com/evolutionaryscale/esm 通过GPT模型原理&#xff0c;输入蛋白质序列等模态输出预测的蛋白质序列及结构 使用 参考&#xff1a;https://colab.research.google.com/github/evolutionaryscale/esm/blob/main/examples/generate.ipynb#sc…
阅读更多...
进阶篇08——MySQL管理

进阶篇08——MySQL管理

系统数据库 常用工具 mysql 客户端工具 mysqladmin 执行管理操作 mysqlbinlog 数据库二进制日志转成文本 mysqlshow 数据库查找 mysqldump 数据库备份 mysqlimport/source 数据库导入
阅读更多...
SSH的基本使用

SSH的基本使用

文章目录 1. SSH使用介绍2. 如何配置OpenSSH Client和OpenSSH Server2.1 Windows系统配置2.2 Linux系统配置2.2.1. 安装OpenSSH服务2.2.2. 启动和检查SSH服务 3. SSH具体使用方式4. vscode中使用ssh远程连接 1. SSH使用介绍 SSH 最常见的用途是通过加密连接在不安全的网络中进…
阅读更多...
qt pro文件常用配置

qt pro文件常用配置

概述 记录一下常用的项目pro文件的一些常用配置 常用配置 QT core gui concurrent#添加concurrent并行处理模块 CONFIG windeployqt#打包部署&#xff0c;项目->构建步骤->Make参数 添加windeployqt&#xff0c;编译自动打包greaterThan(QT_MAJOR_VERSION, 4):…
阅读更多...
VSCode安装并配置java环境

VSCode安装并配置java环境

注&#xff1a;本文不包含jdk安装教程&#xff0c;还没安装jdk的先去安装jdk并配置好环境变量 目录 一、参考博客二、下载VSCode2.1 下载地址 三、安装VSCode四、安装插件4.1 安装中文包4.2 安装java相关插件 五、创建并运行java项目 一、参考博客 https://blog.csdn.net/wei…
阅读更多...
这几个PR小技巧你Get到了吗？

这几个PR小技巧你Get到了吗？

学习是永无止境的&#xff0c;需要不间断地学习&#xff0c;获取新知识。今天带来了5个PR小技巧&#xff0c;可以先收藏起来Adobe Premiere Pro 2024的获取查看Baidu Cloud 1、双倍稳定画面更舒适 一般来说大型电视剧、电影使用的拍摄设备都是非常高端的&#xff0c;不像我们…
阅读更多...
北大医院副院长李建平：用AI解决临床心肌缺血预测的难点、卡点和痛点

北大医院副院长李建平：用AI解决临床心肌缺血预测的难点、卡点和痛点

2024年6月14日&#xff0c;第六届北京智源大会在中关村展示中心开幕&#xff0c;海内外的专家学者围绕人工智能关键技术路径和应用场景&#xff0c;展开了精彩演讲与尖峰对话。在「智慧医疗和生物系统&#xff1a;影像、功能与仿真」论坛上&#xff0c;北京大学第一医院副院长、…
阅读更多...
每日一题——力扣100. 相同的树（举一反三+思想解读+逐步优化）四千字好文

每日一题——力扣100. 相同的树（举一反三+思想解读+逐步优化）四千字好文

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法 代码分析 时间复杂度分析 空间复杂度分析 总结 我要更强 时间复杂度和空…
阅读更多...
阿尔兹海默症-图像分类数据集

阿尔兹海默症-图像分类数据集

阿尔兹海默症-图像分类数据集 数据集&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1gSUT74XrnHmg2Z11oZNd6A?pwdwphh 提取码&#xff1a;wphh 数据集信息介绍&#xff1a; 文件夹 健康 中的图片数量: 8000 文件夹 早期轻度认知障碍 中的图片数量: 10000 文件夹 …
阅读更多...
RabbitMQ中lazyqueue队列

RabbitMQ中lazyqueue队列

lazyqueue队列非常强悍 springboot注解方式开启 // 使用注解的方式lazy.queue队列模式 非常GoodRabbitListener(queuesToDeclare Queue(name "lazy.queue",durable "true",arguments Argument(name "x-queue-mode",value "lazy&…
阅读更多...
【MySQL进阶之路 | 高级篇】InnoDB存储结构(页的内部结构)

【MySQL进阶之路 | 高级篇】InnoDB存储结构(页的内部结构)

1. 数据库的存储结构 : 页 索引结构给我们提供了高效的索引方式&#xff0c;不过索引信息以及数据记录都是保存在文件上的.确切说是存储在页结构中.另一方面&#xff0c;索引是在存储引擎中实现的&#xff0c;MySQL服务器上的存储引擎负责对表中数据的读取和写入操作.不同的存…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023