一、简介
什么是vue?
快速入门
<!-- 3.准备视图元素 -->
<div id="app">
<!-- 6.数据渲染 -->
<h1>{{ msg }}</h1>
</div>
<script type="module">
// 1.引入vue
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
// 2.创建Vue实例
const app = createApp({
// 4.定义数据模型
data() {
return {
msg: 'Hello Vue!'
}
}
}).mount('#app') //5.挂载视图
</script>
二、基础-常用指令
v-for
<div id="app">
<!-- <p v-for="name in names">{{name}}</p> -->
<p v-for="(name, index) in names">{{index + 1}} : {{name}}</p>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data(){
return {
names: ['张无忌', '张三丰', '韦一笑', '殷天正']
}
}
}).mount('#app')
</script>
v-bind
<div id="app">
<a v-bind:href="url">链接1</a>
<br><br>
<a :href="url">链接2</a>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data(){
return {
url: "https://www.4399.com"
}
}
}).mount('#app')
</script>
v-if&v-show
<tr v-for="(user, index) in userList">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td> <img :src="user.image"> </td>
<td>
<span v-if="user.gender==1">男</span>
<span v-else-if>女</span>
<span v-else>妖</span>
</td>
<td>
<span v-show="user.job==1">讲师</span>
<span v-show="user.job==2">班主任</span>
<span v-show="user.job!=1 && user.job!=2">其他</span>
</td>
v-model-双向数据绑定
<div id="app">
<input type="text" v-model="name"> {{name}}
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data(){
return {
name: 'Tom'
}
}
}).mount('#app')
</script>
v-on
<div id="app">
<input type="button" value="点我一下试试" v-on:click="console.log('试试就试试1')">
<input type="button" value="再点我一下试试" v-on:click="handle">
<input type="button" value="再点我一下试试3" @click="handle">
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
// 数据模型
data(){
return {
name: 'Vue'
}
},
// 定义函数
methods: {
handle(){
console.log("试试就试试3");
}
},
}).mount('#app')
</script>
案例：获取用户输入条件
效果图上面列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue3-案例1</title>
<style>
table,th,td {
border: 1px solid #000;
border-collapse: collapse;
line-height: 50px;
text-align: center;
}
#center,table {
width: 60%;
margin: auto;
}
#center {
margin-bottom: 20px;
}
img {
width: 50px;
}
input,select {
width: 17%;
padding: 10px;
margin-right: 30px;
border: 1px solid #ccc;
border-radius: 4px;
}
.btn {
background-color: #ccc;
}
</style>
</head>
<body>
<div id="app">
<div id="center">
姓名: <input type="text" name="name" v-model="name">
性别:
<select name="gender" v-model="gender">
<option value="1">男</option>
<option value="2">女</option>
</select>
职位:
<select name="job" v-model="job">
<option value="1">讲师</option>
<option value="2">班主任</option>
<option value="3">其他</option>
</select>
<input class="btn" type="button" value="查询" @click="query">
</div>
<!-- {{name}}, {{gender}}, {{job}} -->
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>头像</th>
<th>性别</th>
<th>职位</th>
<th>入职时间</th>
<th>更新时间</th>
</tr>
<tr v-for="(user, index) in userList">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td> <img :src="user.image"> </td>
<td>
<span v-if="user.gender==1">男</span>
<span v-else-if>女</span>
<span v-else>妖</span>
</td>
<td>
<span v-show="user.job==1">讲师</span>
<span v-show="user.job==2">班主任</span>
<span v-show="user.job!=1 && user.job!=2">其他</span>
</td>
<td>{{user.entrydate}}</td>
<td>{{user.updatetime}}</td>
</tr>
</table>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
name: '',
gender: '',
job: '',
userList: [
{
"id": 1,
"name": "谢逊",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg",
"gender": 1,
"job": 1,
"entrydate": "2023-06-09",
"updatetime": "2023-07-01 00:00:00"
},
{
"id": 2,
"name": "韦一笑",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg",
"gender": 1,
"job": 1,
"entrydate": "2023-06-09",
"updatetime": "2023-07-01 00:00:00"
},
{
"id": 3,
"name": "黛绮丝",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/3.jpg",
"gender": 2,
"job": 2,
"entrydate": "2023-06-09",
"updatetime": "2023-07-01 00:00:00"
},
{
"id": 4,
"name": "殷天正",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg",
"gender": 1,
"job": 3,
"entrydate": "2023-06-09",
"updatetime": "2023-07-01 00:00:00"
}
]
}
},
methods: {
query() {
console.log(this.name + " " + this.gender + " " + this.job);
}
}
}).mount("#app");
</script>
</body>
</html>
三、Ajax
什么是ajax?
<input id="btn1" type="button" value="获取数据">
<div id="div1"></div>
<script>
document.querySelector('#btn1').addEventListener('click', ()=> {
//1. 创建XMLHttpRequest
var xmlHttpRequest = new XMLHttpRequest();
//2. 发送异步请求
xmlHttpRequest.open('GET', 'https://mock.apifox.cn/m1/3128855-0-default/emp/list');
xmlHttpRequest.send();//发送请求
//3. 获取服务响应数据
xmlHttpRequest.onreadystatechange = function(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
}
}
})
</script>
同步和异步
原生ajax
小结
axios使用
<input type="button" value="获取数据GET" id="btnGet">
<input type="button" value="删除数据POST" id="btnPost">
<!-- 1.引入js文件 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- <script src="../js/axios.js"></script> -->
<script>
document.querySelector("#btnGet").addEventListener('click',
function(){
// 调用axios发送get请求 https://mock.apifox.cn/m1/3083103-0-default/emps/list
axios({
method: 'GET',
url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/list'
}).then((result)=>{ //成功回调函数
console.log(result.data);
console.log(result.data.data);
}).catch((err)=>{ //失败回调函数
alert(err);
})
}
)
document.querySelector("#btnPost").addEventListener('click',
function(){
// 调用axios发送post请求 https://mock.apifox.cn/m1/3083103-0-default/emps/update
axios({
method: 'POST',
url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
data: 'id=1' //封装请求参数
}).then((result)=>{ //成功回调函数
console.log(result.data);
}).catch((err)=>{ //失败回调函数
alert(err);
})
}
)
</script>
axios请求方式别名
axios案例
<!-- 1.引入js文件 -->
<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'
createApp({
data() {
return {
name: '',
gender: '',
job: '',
userList: []
}
},
methods: {
// 输出搜索框中数据
query() {
console.log(this.name + " " + this.gender + " " + this.job);
// https://web-server.itheima.net/emps/list
axios.get('https://web-server.itheima.net/emps/list', {
params: {
name: this.name,
gender: this.gender,
job: this.job
}
}).then((result)=>{ //成功回调函数
console.log(result.data);
this.userList = result.data.data;
})
}
}
}).mount("#app");
</script>
问题：没有自动加载——生命周期
四、生命周期
生命周期
<div id="app">
<p v-for="(name, index) in names">{{index + 1}} : {{name}}</p>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
// 数据模型
data(){
return {
names: ['张无忌', '张三丰', '韦一笑', '殷天正']
}
},
// 定义函数
methods: {
},
// 钩子函数(生命周期方法)
created() {
console.log("对象创建完成....");
},
mounted() {
console.log("页面挂载完成...");
},
}).mount('#app')
</script>
案例改造
// 钩子函数(生命周期方法)
mounted() {
// 页面加载完成即可查询
this.query();
},
总结
五、案例
省市县
async&await
