简介
Vue 是一款用于构建用户界面的渐进式的 JavaScript 框架。（官方：htttps://cn.vuejs.org/）
快速上手
VSCode 创建一个文件 01快速入门.html
<!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>
<!-- 引入vue模块 -->
<script type="module">
import { createApp} from 'https://cdn.jsdelivr.net/npm/vue@next/dist/vue.esm-browser.js'
// 创建vue的应用实例
createApp({
data() {
return {
//定义数据
msg: 'hello vue3'
}
}
}).mount("#app");
</script>
</body>
</html>
常用指令
指令：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标签绑定事件 |
v-for
语法：v-for = "(shop,index) in shops"
参数说明：
- shops 为遍历的数组
- shop 为遍历出来的元素
- index 为索引/下标，从0开始；可以省略，省略index语法：v-for = "shop in shops"
VSCode 创建一个文件 02指令v-for.html
<!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="1 solid" colspan="0" cellspacing="0">
<tr>
<th>文章标题</th>
<th>分类</th>
<th>发表时间</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr v-for="article in articleList" :key="article.title">
<td>{{ article.title }}</td>
<td>{{ article.category }}</td>
<td>{{ article.time }}</td>
<td>{{ article.state }}</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</table>
</div>
<script type="module">
import { createApp} from 'https://cdn.jsdelivr.net/npm/vue@next/dist/vue.esm-browser.js'
// 创建应用实例
createApp({
data() {
return {
articleList: [
{
title: "医疗反腐绝非砍医护收入",
category: "时事",
time: "2023-09-05",
state: "已发布"
},
{
title: "中国男篮缘何一败涂地？",
category: "篮球",
time: "2023-09-05",
state: "草稿"
},
{
title: "华山景区已受大风影响阵风达 7-8 级,未来 24 小时将持续",
category: "旅游",
time: "2023-09-05",
state: "已发布"
}
]
};
}
}).mount("#app");
</script>
</body>
</html>
注意：遍历的数组，必须在data中定义；要想让哪个标签循环展示多次，就在哪个标签上使用 v-for 指令
v-bin
语法：v-bind:属性名=“属性值 | 简化：：属性名=“属性值”
VSCode 创建一个文件 03指令v-bind.html
<!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> -->
<a :href="url">百度一下</a>
</div>
<script type="module">
//引入vue模块
import { createApp} from
'https://cdn.jsdelivr.net/npm/vue@next/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
url: 'https://www.baidu.com'
}
}
}).mount("#app")//控制html元素
</script>
</body>
</html>
注意：v-bind所绑定的数据，必须在data中定义
v-if & v-show
v-if
语法：v-if = "表达式"，表达式值为 true，显示；flase，隐藏
其它：可以配合 v-else-if / v-else 进行链式调用条件判断
原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
场景：要么显示，要么不显示，不频繁切换的场景
v-show
语法：v-show="表达式"，表达式为 true，显示；false，隐藏
原理：基于CSS样式display来控制显示与隐藏
场景：频繁切换显示隐藏的场景
VSCode 创建一个文件 04指令v-if&v-show.html
<!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="customer.level >= 0 && customer.level <= 1">9.9</span>
<span v-else-if="customer.level >= 2 && customer.level <= 4">19.9</span>
<span v-else>29.9</span>
<br>
商品价格为: <span v-show="customer.level >= 0 && customer.level <= 1">9.9</span>
<span v-show="customer.level >= 2 && customer.level <= 4">19.9</span>
<span v-show="customer.level >= 5">29.9</span>
</div>
<script type="module">
//导入vue模块
import { createApp } from 'https://cdn.jsdelivr.net/npm/vue@next/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
customer: {
name: '张三',
level: 1
}
}
}
}).mount("#app")//控制html元素
</script>
</body>
</html>
v-on
语法：v-on：事件名 = "函数名" | 简写：@事件名="函数名"
VSCode 创建一个文件 05指令v-on.html
<!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="xiao">笑</button>
<button @click="ku">哭</button>
</div>
<script type="module">
//导入vue模块S
import { createApp} from 'https://cdn.jsdelivr.net/npm/vue@next/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
//定义数据
}
},
methods:{
xiao: function(){
alert('哈哈哈哈')
},
ku: function() {
alert('呜呜呜呜')
}
}
}).mount("#app");//控制html元素
</script>
</body>
</html>
v-model
语法：v-model = "变量名"
VSCode 创建一个文件 06指令v-model.html
<!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="text" v-model="searchConditions.category"/> <span> {{searchConditions.category}} </span>
发布状态: <input type="text" v-model="searchConditions.state"/> <span> {{searchConditions.state}} </span>
<button>搜索</button>
<button v-on:click="clear">重置</button>
<br />
<br />
<table border="1 solid" colspa="0" cellspacing="0">
<tr>
<th>文章标题</th>
<th>分类</th>
<th>发表时间</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr v-for="(article,index) in articleList">
<td>{{article.title}}</td>
<td>{{article.category}}</td>
<td>{{article.time}}</td>
<td>{{article.state}}</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</table>
</div>
<script type="module">
//导入vue模块
import { createApp } from 'https://cdn.jsdelivr.net/npm/vue@next/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
//定义数据
searchConditions:{
category: '',
state: ''
},
articleList: [{
title: "医疗反腐绝非砍医护收入",
category: "时事",
time: "2023-09-5",
state: "已发布"
},
{
title: "中国男篮缘何一败涂地？",
category: "篮球",
time: "2023-09-5",
state: "草稿"
},
{
title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
category: "旅游",
time: "2023-09-5",
state: "已发布"
}]
}
},
methods:{
clear: function(){
//清空category以及state的数据
//在methods对应的方法里面，使用this就代表vue实例，可以使用this获取到vue实例中的数据
this.searchConditions.category = '';
this.searchConditions.state = '';
}
}
}).mount("#app")//控制html元素
</script>
</body>
</html>
注意：v-model 中绑定的变量，必须在data中定义
生命周期
生命周期：指一个对象从创建到销毁的整个过程
应用场景：在页面加载完毕时，发起异步请求，加载数据，渲染页面
生命周期的八个阶段：每个阶段会自动执行一个生命周期方法（钩子），让开发者有机会在特定的阶段执行字节的代码
| 状态 | 阶段周期 |
|---|---|
| beforeCreate | 创建前 |
| created | 创建后 |
| beforeMount | 载入前 |
| mounted | 挂载完成 |
| beforeUpdate | 数据更新前 |
| updated | 数据更新后 |
| beforeUnmount | 组件销毁前 |
| unmounted | 组件销毁后 |
Axios
介绍：Axios 对原生的 Ajax 进行了封装，简化书写，快速开发
Axios 使用步骤：
- 引入Axios的js文件（参考官网）
- 使用Axios发送请求，并获取相应结果
样例：
<!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>
<!-- 引入axios的js文件 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//发送请求
axios({
method: 'GET',
url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/list'
}).then((result=>{
//成功的回调
//restful代表服务器响应的所有的数据，包含了响应头，响应体. result.data 代表的是响应的核心数据
console.log(result.data);
}).catch(err=>{
//失败的回调
console.log(err);
}));
let test={
test: 'test'
}
axios({
method: 'POST',
url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
data: test
}).then((result=>{
//成功的回调
//restful代表服务器响应的所有的数据，包含了响应头，响应体. result.data 代表的是响应的核心数据
console.log(result.data);
}).catch(err=>{
//失败的回调
console.log(err);
}));
//别名的方式发送请求
axios.get("https://mock.apifox.cn/m1/3083103-0-default/emps/list").then((result=>{
//成功的回调
//restful代表服务器响应的所有的数据，包含了响应头，响应体. result.data 代表的是响应的核心数据
console.log(result.data);
}).catch(err=>{
//失败的回调
console.log(err);
}));
axios.post("https://mock.apifox.cn/m1/3083103-0-default/emps/list",test).then((result=>{
//成功的回调
//restful代表服务器响应的所有的数据，包含了响应头，响应体. result.data 代表的是响应的核心数据
console.log(result.data);
}).catch(err=>{
//失败的回调
console.log(err);
}));
</script>
</body>
</html>
