07 Vue3框架简介

news2024/9/23 23:33:08

文章目录

一、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>