07 Vue3框架简介

文章目录

  • 一、Vue3简介
    • 1. 简介
    • 2. 相关网站
    • 3. 前端技术对比
    • 4. JS前端框架
    • 5. Vue核心内容
    • 6. 使用方式
  • 二、基础概念
    • 1. 创建一个应用
    • 2. 变量双向绑定（v-model）
    • 3. 条件控制（v-if）
    • 4. 数组遍历（v-for）
    • 5. 绑定事件（v-on）
    • 6. 表单
  • 三、AJAX交互

一、Vue3简介

1. 简介

Vue是一个流行的JavaScript框架，适合用于构建交互式的Web界面。
Vue的核心特性是响应式数据、组件系统、模板语法和虚拟DOM。
Vue提供了许多有用的工具和库，例如路由、状态管理、指令、过滤器、过渡效果等。

Vue3相关技术栈

  • ECMAScript 6 (ES6) ： 提高 JavaScript 的可读性和可维护性，引入了类（Class）的概念
  • Node.js：跨平台的 JavaScript 运行环境
  • npm：Node.js 的默认包管理器
  • vite：前端项目构建工具
  • Router：用于在 Vue 应用程序中实现页面间的导航和路由管理
  • Pinia：通过状态管理实现组件数据传递
  • Axios：在 Vue.js 应用中处理 HTTP 请求
  • Element-plus：基于 Vue 3 的开源 UI 组件库

2. 相关网站

Vue 3 官方中文文档
Vue3 教程

3. 前端技术对比

在这里插入图片描述

4. JS前端框架

  • jQuery：优点是简化了DOM操作，缺点是频繁操作DOM，影响前端性能。
  • Angular：将后台的MVC模式搬到了前端，增加了模块化开发的理念；对后台程序员友好，对前端程序员不太友好。
  • React：在内存中模拟DOM操作，有效的提升了前端渲染效率；缺点是使用复杂。
  • Vue：综合了Angular（模块化）和React（虚拟DOM）的优点。

5. Vue核心内容

在这里插入图片描述

6. 使用方式

  • 通过 Vite 的构建
    项目使用基于 Vite 的构建设置，并允许使用 Vue 的单文件组件 (SFC)。

  • 通过 CDN 使用 Vue
    通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单。但是无法使用单文件组件 (SFC) 语法。

二、基础概念

1. 创建一个应用

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <meta charset="UTF-8">
    <link rel="icon" href="data:;base64,=">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script>
</head>
<body>
	<!-- 在页面声明一个将要被Vue控制的DOM区域 -->
	<div id="app"></div>
</body>
<script>
	// 选项式 API 风格
	const app = {
		// data() 返回的属性将会成为响应式的状态
		// 并且暴露在 `this` 上
		data() {
			return {
				count: 0
			}
		},
		// methods 是一些用来更改状态与触发更新的函数
		// 它们可以在模板中作为事件处理器绑定
		methods: {
			increment() {
				this.count++
			}
		},
		// 生命周期钩子，会在组件生命周期的各个不同阶段被调用
		// 例如这个函数就会在组件挂载完成后被调用
		mounted() {
			// `this` 指向当前组件实例
			console.log(`The initial count is ${this.count}.`)
		},
		// Vue 组件的模板
		template : `
			<button @click="increment">Count is: {{ count }}</button>
		`
	}
	// 通过Vue框架，使挂载的id可以使用app内定义的变量和方法
	Vue.createApp(app).mount('#app')
</script>
</html>

2. 变量双向绑定（v-model）

  • 使用 v-model 指令实现表单数据双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <meta charset="UTF-8">
    <link rel="icon" href="data:;base64,=">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" v-model="message">
		<p>{{ message }}</p>
	</div>
</body>
<script>
	const app = {
		data() {
			return {
				message: ''
			}
		}
	}
	Vue.createApp(app).mount('#app')
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

3. 条件控制（v-if）

  • 使用 v-if 指令条件性地渲染元素
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <meta charset="UTF-8">
    <link rel="icon" href="data:;base64,=">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" v-model="num">
		<p v-if="num>0">num 大于 0</p>
		<p v-else-if="num==0">num 等于 0</p>
		<p v-else>num 小于 0</p>
	</div>
</body>
<script>
	const app = {
		data() {
			return {
				num: 0
			}
		}
	}
	Vue.createApp(app).mount('#app')
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

4. 数组遍历（v-for）

  • 使用 v-for 指令循环渲染元素
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <meta charset="UTF-8">
    <link rel="icon" href="data:;base64,=">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script>
</head>
<body>
	<div id="app">
		<p v-for="item in items" :key="item.id">
			{{ item.id }} - {{ item.text }}
		</p>
	</div>
</body>
<script>
	const app = {
		data() {
			return {
				items: [
					{ id: 1, text: 'test 1' },
					{ id: 2, text: 'test 2' },
				]
			}
		}
	}
	Vue.createApp(app).mount('#app')
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

5. 绑定事件（v-on）

  • 使用 v-on 指令在 HTML 元素上绑定事件监听器
  • v-on 指令可以缩写为 @ 符号
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <meta charset="UTF-8">
    <link rel="icon" href="data:;base64,=">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script>
</head>
<body>
	<div id="app">
		<button v-on:click="count+=1">Count is: {{ count }}</button>
	</div>
</body>
<script>
	const app = {
		data() {
			return {
				count: 0
			}
		}
	}
	Vue.createApp(app).mount('#app')
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

6. 表单

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <meta charset="UTF-8">
    <link rel="icon" href="data:;base64,=">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script>
</head>
<body>
<div id="app">
	<p>单行文本框：</p>
	<input v-model="data.message1" placeholder="请输入……">
	<p>输入内容: {{ data.message1 }}</p>
	<p>多行文本框：</p>
	<textarea v-model="data.message2" placeholder="请输入……"></textarea>
	<p>输入内容: {{ data.message2 }}</p>
</div>
</body>
<script>
	const app = {
		data() {
			return {
				data : {
					message1: '',
					message2: ''
				}
			}
		}
	}
	Vue.createApp(app).mount('#app')
</script>
</html>
  • HTML页面效果
    在这里插入图片描述

三、AJAX交互

推荐使⽤Axios来完成AJAX请求。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <meta charset="UTF-8">
    <link rel="icon" href="data:;base64,=">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.13/vue.global.prod.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.2/axios.js"></script>
</head>
<body>
<div id="app">
	<div>
		<p>姓名： <input type="text" v-model="data.baseAccountQueryVo.accountName"></p>
		<button @click="submitForm">查询</button>
	</div>
	<hr>
	<div>
		<div v-for="item in items" :key="item.id">
			<div>姓名: {{ item.accountName }}</div>
			<div>电话: {{ item.mobileNum }}</div>
		</div>
	</div>
</div>
</body>
<script>
	const app = {
		data() {
			return {
				items: [],
				data: {
					"baseAccountQueryVo": {}
				}
			}
		},
		methods: {
			submitForm() {
				axios.post("http://127.0.0.1:8081/test/api/baseAccount/list",this.data).then(response => {
					this.items = response.data.baseAccountQueryVos;
				}).catch(error => {
					console.log(error);
				});
			}
		}
	}
	Vue.createApp(app).mount('#app')
</script>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Vue核心语法、脚手架与组件化开发、VueRouterVuex、综合案例（待办事项工具）

Vue核心语法、脚手架与组件化开发、VueRouterVuex、综合案例（待办事项工具）

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes 觉得有帮助的同学&#xff0c;可以点心心支持一下哈 一、Vue核心语法 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name…
阅读更多...
leetcode2两数加和问题（链表）

leetcode2两数加和问题（链表）

题目思路&#xff1a; ①创建一个int类型的局部变量&#xff0c;用来存储两个结点的Val值。 ②判断该Val值与10求余(mod)后是否大于0,如果大于0, 则需要在下一个结点进位。 ③最关键的步骤&#xff1a;实现l1&#xff0c;l2结点数值相加后构建新的存储求和后的结点&#xff0…
阅读更多...
嵌入式——下载仿真调试

嵌入式——下载仿真调试

仿真器 ARM仿真器是用于模拟ARM架构微处理器或微控制器的工具，以便开发和测试嵌入式系统软件。这些仿真器允许开发人员在计算机上模拟ARM处理器的执行，而无需实际的硬件设备。ARM仿真器通常包含以下特点： 指令级仿真： 提供对ARM指令级别的仿真，使开发人员能够逐步执行和调…
阅读更多...
C++11特性：线程同步之条件变量

C++11特性：线程同步之条件变量

条件变量是C11提供的另外一种用于等待的同步机制&#xff0c;它能阻塞一个或多个线程&#xff0c;直到收到另外一个线程发出的通知或者超时时&#xff0c;才会唤醒当前阻塞的线程。条件变量需要和互斥量配合起来使用&#xff0c;C11提供了两种条件变量&#xff1a; 1. conditi…
阅读更多...
基于Python的新能源汽车销量分析与预测系统

基于Python的新能源汽车销量分析与预测系统

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长 QQ 名片 :) 1. 项目简介 基于Python的新能源汽车销量分析与预测系统是一个使用Python编程语言和Flask框架开发的系统。它可以帮助用户分析和预测新能源汽车的销量情况。该系统使用了关系数据库进行数据存储&#xff0c;并…
阅读更多...
AcWing算法进阶课-1.17.1费用流

AcWing算法进阶课-1.17.1费用流

算法进阶课整理 CSDN个人主页&#xff1a;更好的阅读体验 原题链接 题目描述 给定一个包含 n n n 个点 m m m 条边的有向图&#xff0c;并给定每条边的容量和费用&#xff0c;边的容量非负。 图中可能存在重边和自环&#xff0c;保证费用不会存在负环。 求从 S S S 到 …
阅读更多...
Shell三剑客：awk（awk编辑编程）二

Shell三剑客：awk（awk编辑编程）二

一、IF 语句 IF 条件语句语法格式 #方式一&#xff1a; if (condition)action #方式二&#xff1a;使用花括号语法格式 if (condition) {action1;action2; ... } {if(表达式)&#xff5b;语句1;语句2;...&#xff5d;} IF 语句实例 #判断数字是奇数还是偶数 [rootlocalhost ~…
阅读更多...
tomcat自动打包运行

tomcat自动打包运行

结果
阅读更多...
UG图层的使用

UG图层的使用

在绘图过程中&#xff0c;我们可能会有点、线、面、基准等&#xff0c;要管理好这些图素&#xff0c;就要运用到图层 图层的作用 1、规范化 不同图素放置在规定的图层达到统一标准 2、方便绘图与审阅 可单独控制每个图层的显示与隐藏 3、其他模块需要 工程图、装配、加…
阅读更多...
Postman接口测试（超详细整理）

Postman接口测试（超详细整理）

常用的接口测试工具主要有以下几种 Postman&#xff1a;简单方便的接口调试工具&#xff0c;便于分享和协作。具有接口调试&#xff0c;接口集管理&#xff0c;环境配置&#xff0c;参数化&#xff0c;断言&#xff0c;批量执行&#xff0c;录制接口&#xff0c;Mock Server, …
阅读更多...
[SWPUCTF 2021 新生赛]jicao

[SWPUCTF 2021 新生赛]jicao

首先打开环境 代码审计&#xff0c;他这儿需要进行GET传参和POST传参&#xff0c;需要进行POST请求 变量idwllmNB&#xff0c;进行GET请求变量json里需要含参数x以及jsonwllm 构造 得到flag
阅读更多...
在linux操作系统Centos上安装服务器相关软件

在linux操作系统Centos上安装服务器相关软件

如果您的服务器没有图形界面（GUI），您可以通过命令行（终端）来安装和配置Tomcat、JDK和MySQL等软件。以下是在没有图形界面GHome的 Linux 系统上安装这些软件的基本步骤： 对于CentOS Stream 9，您可以按照以下步骤在命令行上安装Tomcat、JDK 和 MySQL 数据库： 1. 安装JD…
阅读更多...
Nginx优化(重点)与防盗链(新版)

Nginx优化(重点)与防盗链(新版)

Nginx优化(重点)与防盗链 Nginx优化(重点)与防盗链一、隐藏Nginx版本号1、修改配置文件2、修改源代码 二、修改Nginx用户与组1、编译安装时指定用户与组2、修改配置文件指定用户与组 三、配置Nginx网页的缓存时间四、实现Nginx的日志切割1、data的用法2、编写脚本进行日志切割的…
阅读更多...
异常和智能指针

异常和智能指针

智能指针的认识 智能指针是一种C语言中用于管理动态内存的工具&#xff0c;它们可以自动管理内存的分配和释放&#xff0c;从而避免内存泄漏和悬空指针等问题。智能指针可以跟踪指向的对象的引用次数&#xff0c;并在需要时自动释放被引用的内存&#xff0c;这极大地提高了内存…
阅读更多...
基于SSM+Vue的教材信息管理系统（Java毕业设计）

基于SSM+Vue的教材信息管理系统（Java毕业设计）

点击咨询源码 大家好&#xff0c;我是DeBug&#xff0c;很高兴你能来阅读&#xff01;作为一名热爱编程的程序员&#xff0c;我希望通过这些教学笔记与大家分享我的编程经验和知识。在这里&#xff0c;我将会结合实际项目经验&#xff0c;分享编程技巧、最佳实践以及解决问题的…
阅读更多...
关于Sneaky DogeRAT特洛伊木马病毒网络攻击的动态情报

关于Sneaky DogeRAT特洛伊木马病毒网络攻击的动态情报

一、基本内容 作为复杂恶意软件活动的一部分&#xff0c;一种名为DogeRAT的新开源远程访问特洛伊木马&#xff08;RAT&#xff09;主要针对位于印度的安卓用户发动了网络安全攻击。该恶意软件通过分享Opera Mini、OpenAI ChatGOT以及YouTube、Netfilx和Instagram的高级版本等合…
阅读更多...
摸索若依框架是如何实现权限过滤的

摸索若依框架是如何实现权限过滤的

摸索若依框架是如何实现权限过滤的 这篇文章&#xff0c;我也是作为一个优秀开源框架的学习者&#xff0c;在这里摸索这套框架是如何实现权限过滤的&#xff0c;这个封装对于入行Java半年之余的我来说&#xff0c;理解起来有些困难&#xff0c;所以&#xff0c;文章只是作为一个…
阅读更多...
QT trimmed和simplified

QT trimmed和simplified

trimmed&#xff1a;去除了字符串开头前和结尾后的空白&#xff1b; simplified&#xff1a;去除了字符串开头前和结尾后的空白&#xff0c;以及中间内部的空白字符也去掉&#xff08;\t,\n,\v,\f,\r和 &#xff09; 代码&#xff1a; QString str " 1 2 3 4 5 …
阅读更多...
关于测试技能和职业规划，ChatGPT这样说

关于测试技能和职业规划，ChatGPT这样说

​ &#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试…
阅读更多...
Linux构建NFS远程共享存储和ftp配置

Linux构建NFS远程共享存储和ftp配置

NFS架构 NFS介绍 文件系统级别共享&#xff08;是NAS存储&#xff09; --------- 已经做好了格式化&#xff0c;可以直接用。 速度慢比如&#xff1a;nfs&#xff0c;samba NFS&#xff1a;Network File System 网络文件系统&#xff0c;NFS 和其他文件系统一样,是在 Linux …
阅读更多...
最新文章

Copyright @ 2022~2023