一、Vue快速入门
网站：https://cn.vuejs.org/
Vue是一套用于构建用户界面的JavaScrip框架。封装了原生的DOM操作，无需进行任何手动的DOM编码即可完成页面数据的渲染。
JQuery,Easy UI,Ext JS
Vue作为构建页面的JavaScript框架，简化了页面操作的方式，但其和原生JS在操作页面时要解决的问题是相同的。原生JS操作页面需要解决的问题，也必是Vue需要解决的，而学习Vue其实就是在学习它对这些问题的解决方法。
操作页面需要解决的问题：
渲染数据到页面
为标签属性赋值
事件绑定
当然Vue在解决这些基本问题的同时，也提供了更多的功能，简化开发。
Vue常用指令
指令：HTML标签上带有v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。
|
指令 |
作用 |
|
v-for |
列表渲染，遍历容器的元素或者对象的属性 |
|
v-bind |
为HTML标签绑定属性值，如设置 href , css样式等 |
|
v-if/v-else-if/v-else |
条件性的渲染某元素，判定为true时渲染,否则不渲染 |
|
v-show |
根据条件展示某元素，区别在于切换的是display属性的值 |
|
v-model |
在表单元素上创建双向数据绑定 |
|
v-on |
为HTML标签绑定事件 |
渲染数据到页面
插值表达式
数据绑定最常见的形式就是使用{{值}}（双大括号）的文本插值：
说明：{{}}中通常是变量，但也可以是表达式（比如a+b）、有返回值的函数调用。
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
</div>
<script type="moudle">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
createApp({
data(){
return {
msg: 'Hello Vue'
}
}
}).mount("#app")
</script>
</body>
</html>
引入Vue3核心方法javas 运行
import {createApp} from 'htttps://unpkg.com/vue@3/dist/vue.esm-browser.js'
1) 这行代码通过ES Module 的方式，从unpkg这个CDN地址直接引入Vue3的浏览器版本。
2）createApp 是Vue3 中创建应用实例的核心方法，替代了Vue2的 new Vue()。
3）注意：<script>标签必须加type="module"才能支持ES Module语法
创建Vue 应用实例javascript
createApp({
data(){
return {
msg: 'Hello 软件工程'
}
}
})
createApp() 接收一个根组件选项对象作为参数，这里定义了组件的核心选项data。
data必须是是一个函数（Vue3规范），返回一个对象，对象中的属性（如msg）就是响应式数据，页面中可以通过插值表达式{{msg}}访问。
挂载应用javascript
.mount('#app')
mount()方法将Vue应用实例挂载到页面中指定的DOM元素上（这里是id为app的div）。
挂载后，Vue会接管该元素内部的DOM渲染，把msg的值渲染到页面上。
v-for指令
遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。
语法：v-for="(item,index) in items"
items：要遍历的数组，需要在vue的data中定义好。
item：数组元素
index：元素下标，可以省略
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/* 基础表格样式 */
.c1 {
width: 100%;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 20px 0;
}
/* 表头样式 */
.c1 th {
background-color: #f2f2f2;
border: 1px solid #ddd;
padding: 8px;
text-align: left;
font-weight: bold;
}
/* 单元格样式 */
.c1 td {
border: 1px solid #ddd;
padding: 8px;
}
/* 奇偶行交替颜色 */
.c1 tr:nth-child(even) {
background-color: #f9f9f9;
}
/* 悬停效果 */
.c1 tr:hover {
background-color: #f5f5f5;
transition: background-color 0.2s;
}
/* 表头悬停效果 */
.c1 th:hover {
background-color: #eaeaea;
}
</style>
</head>
<body>
<div id="app">
<table class="c1">
<tr>
<th>序号</th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr v-for="(item,index) in list">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
</tr>
</table>
</div>
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
const list = [
{'id':1,'name':'张三','sex':'男'},
{'id':2,'name':'李四','sex':'男'},
{'id':3,'name':'王芳','sex':'女'}
]
createApp({
data(){
return {'list':list}
}
}).mount("#app")
</script>
</body>
</html>
v-if和v-show指令
v-if指令v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染。
v-show指令 另一个用于根据条件展示元素的指令是v-show指令。和v-if用法大致一样，不过v-show后不能跟v-else：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<span v-if="level==1">青铜</span>
<span v-else-if="level==2">白银</span>
<span v-else-if="level==3">黄金</span>
<span v-else>其他</span>
<br/>
<span v-show="level==1">青铜</span>
<span v-show="level==2">白银</span>
<span v-show="level==3">黄金</span>
</div>
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data(){
return {
level:1
}
}
}).mount("#app")
</script>
</body>
</html>
v-if和v-show指令展示效果相同，但是打开开发者工具（F12或者ctrl+shift+i）查看Element面板，会发现2者的区别。
v-if 是 “真正”的条件渲染，因为它会确保在切换过程中条件内的子组件适当地被销毁和重建。当初始条件为false时，其内部组件不会渲染。
v-show 就简单得多，它在切换过程中，只是简单地基于CSS进行切换。当初始条件为false时，其内部组件也会预先渲染。
一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。
标签属性的赋值：v-bind指令
作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。
语法：v-bind:属性名="属性值"
简化: :属性名="属性值"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<a v-bind:href="url">跳转百度</a> <br/>
<a :href="url2">跳转淘宝</a>
</div>
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data(){
return {
url:'http://www.baidu.com',
url2:'http://www.taobao.com'
}
}
}).mount("#app")
</script>
</body>
</html>
事件绑定：v-on指令
作用：为html标签绑定事件
语法：v-on:事件名="函数名"
简写为 @事件名="函数名"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="m1">测试点击事件</button>
</div>
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
methods:{
m1:function(){
alert("点击按钮了")
}
}
}).mount("#app")
</script>
</body>
</html>
表单的双向数据绑定：v-model指令
作用：在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单项数据
语法：v-model="变量名"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
姓名:<input type="" v-model="person.name"/>
年龄:<input type="" v-model="person.age"/>
<button v-on:click="clear">重置</button>
</div>
<script type="module">
import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data(){
return {
person:{
name:'zs',
age:20
}
}
},
methods:{
clear:function(){
console.log('清空前：' + this.person.name)
this.person.name = ""
this.person.age = ""
}
}
}).mount("#app")
</script>
</body>
</html>
底层原理：v-model是语法糖v-model并不是Vue品控创造的新功能，而是一个语法糖（简化写法），它本质上是把“值绑定(v-bind)”和“事件监听(v-on)”合并成一个指令。
所谓的双向如何理解：
双向绑定： 1.数据→页面：Vue实例里的数据变了，表单输入框的内容会自动更新；
2.页面→数据：用户在表单输入框里手动输入/修改内容，Vue实例里的数据会自动同步更新。这两个方向的自动同步，就是“双向绑定”的核心，而v-model就是Vue为表单元素封装的、实现这种双向同步的指令。
二、生命周期
生命周期：指一个对象从创建到销毁的整个过程。
生命周期的八个阶段：每个阶段会自动执行一个生命周期方法（钩子），让开发者有机会在特定的阶段执行自己的代码
|
状态 |
阶段周期 |
|
beforeCreate |
创建前 |
|
created |
创建后 |
|
beforeMount |
载入前 |
|
mounted |
挂载完成 |
|
beforeUpdate |
数据更新前 |
|
updated |
数据更新后 |
|
beforeUnmount |
组件销毁前 |
|
unmounted |
组件销毁后 |
注：Vue3选型式API中仍保留beforeCreate/created，但官方推荐用setup代替。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Vue3 生命周期示例（修复 unmount 错误）</title>
<style>
.box { padding: 20px; border: 1px solid #ccc; margin: 10px 0; }
button { margin: 5px; padding: 8px 15px; cursor: pointer; }
</style>
</head>
<body>
<div id="app">
<div class="box">
<h3>当前计数：{{ count }}</h3>
<button @click="count++">点击更新数据</button>
<button @click="unmountApp">点击卸载组件</button>
</div>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
// 第一步：创建应用实例（app 指向原始应用实例，包含 unmount 方法）
const app = createApp({
data() {
return {
count: 0
}
},
beforeCreate() {
console.log('🔴 beforeCreate：实例刚创建，数据/方法还未初始化');
console.log('→ 此时 count：', this.count);
},
created() {
console.log('🟢 created：数据/方法已初始化，DOM 还未渲染');
console.log('→ 此时 count：', this.count);
},
beforeMount() {
console.log('🟡 beforeMount：挂载前，虚拟DOM已生成，真实DOM未挂载');
console.log('→ 此时页面中 count 元素：', document.querySelector('h3')?.innerText);
},
mounted() {
console.log('🟤 mounted：挂载完成，真实DOM已渲染到页面');
console.log('→ 此时页面中 count 元素：', document.querySelector('h3')?.innerText);
},
beforeUpdate() {
console.log('🔵 beforeUpdate：数据已更新，DOM 还未重新渲染');
console.log('→ 数据 count：', this.count);
console.log('→ 页面 count 元素：', document.querySelector('h3')?.innerText);
},
updated() {
console.log('🟣 updated：数据+DOM 都已更新完成');
console.log('→ 数据 count：', this.count);
console.log('→ 页面 count 元素：', document.querySelector('h3')?.innerText);
},
beforeUnmount() {
console.log('🟠 beforeUnmount：卸载前，组件仍可用，可做清理操作');
},
unmounted() {
console.log('⚫ unmounted：卸载完成，组件已销毁，数据/DOM 都不可用');
console.log('→ 此时 count：', this.count);
},
methods: {
unmountApp() {
// 此时 app 是原始应用实例，拥有 unmount 方法
app.unmount();
}
}
});
// 第二步：挂载应用（单独执行，不影响 app 指向）
app.mount('#app');
</script>
</body>
</html>
三、Axios应用/ˈæksiɒs/
介绍：Axios对原生的Ajax进行了封装，简化书写，快速开发。
官网：https://www.axios-http.cn/
Axios使用步骤
引入Axios的js文件（参考官网）
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
使用Axios发送请求，并获取相应结果
axios({
method: 'GET',
url: 'url地址'
}).then((result) => {
console.log(result.data);
}).catch((err) => {
alert(err);
});
为了方便起见，Axios已经为所有支持的请求方法提供了别名
格式：axios.请求方式(url [, data [, config]])
axios.get('url地址').then((result) => {
console.log(result.data);
}).catch((err) => {
console.log(err);
});
测试案例：
编写接口：
@RequestMapping("/selectCustomers2")
@CrossOrigin(origins = "http://localhost:63342")
public List<Customer> selectCustomers(){
List<Customer> customers = customerService2.list();
return customers;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<table border="1px">
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
const list = []
createApp({
data(){
return {
list:list
}
},
mounted() {
console.log('App mounted');
axios.get('http://localhost:80/selectCustomers2')
.then(resp=>{
console.log(resp.data)
this.list = resp.data
console.log(this.list)
}).catch(err=>{
console.error(err)
})
}
}).mount('#app');
</script>
</body>
</html>
