③Vue3---快速入门
二十五、Vue快速入门
什么是Vue？
d633ce8c1ca24aedb8fd7c2c1e11b4b1.png
b9169c7f7aed459b8059a005d3b83ac4.png
55a1fcf566f34b48a7a79c18eec69a1c.png
课程安排：
1dcd78ca3a8243fd99957e10134d2302.png
3ea56e1c545c46d6b51f47fc8557c48e.png
案例：Vue--快速入门程序
7093385b517947ed902dab9492b52c35.png
第一步：准备工作
d3d67f9027234ee091a7601ac782855a.png
4dce2cb5eeca42d5bb91bd45e3b66702.png
引入Vue模块（官方提供） ①通过 import 从官方提供的 js 当中引入一个模块，就是 createApp 这样一个模块 ②模块化的js，需要我们在script 标签上声明一个属性 type = "moudle" 创建Vue程序的应用实例，控制视图的元素 ①通过导入进来的 createApp 这个函数。直接调用 createApp() 这个函数，并传递js对象{} ②控制视图的元素指的是 html 元素 准备元素 div 被Vue控制 ①<div id = "app"> </div> ②创建完 Vue 应用实例，需要调用 mount()方法。指定接管哪个区域。传入类似CSS选择器。mount("#app"); 指定 id为app 的 div 的这样区域。此时就可以在div中使用Vue提供的相关语法来渲染页面了
第二步：数据驱动视图
3191b71e79784283861b75a6cd1898c9.png
275e75cc67184e4087e3fcc2a9306a09.png
数据准备 外层大括号定义的是一个对象，里面定义了一个data方法。 data方法的返回值就是我们要定义的数据。 data中有个return，{}里面就放了js对象。这样对象定义了我们准备的数据。 通过插值表达式渲染页面 插值表达式就是 {{ }}
65d45322c1cf41c09039ffa68adc8a42.png
实战（入门程序）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue-快速入门</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<h1>{{count}}</h1>
</div>
<script type="module">
import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
createApp({
data() {
return {
message: "Hello Vue",
count: 100,
};
},
}).mount("#app");
</script>
</body>
</html>
4ccab2f34128482f876d03546cab31af.png
小结
a6214a06223340c29e66009fa2879483.png
二十六、Vue-常用指令-v-for
常用指令
ae009dfe9cac4f6ab2255be09bccea49.png
案例：员工列表数据渲染展示
8a9c8064ae3e4b859383c4f8a606ca00.png
v-for（<tr v-for="(e, index) in empList" :key="e.id">）
13136efa70e7437dbd65a236089bcb79.png
5e6ca271a4c24cc1bb1cfa891070e807.png
fdf649c5070646eba534b152e8b57afc.png
<tr v-for="(e, index) in empList" :key="e.id">
<td>{{index + 1}}</td> <!-- index代表索引默认从0开始 -->
<td>{{e.name}}</td>
<td>{{e.gender == 1?'男' : '女'}}</td>
<td>{{e.entrydate}}</td>
<td>{{e.updatetime}}</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>注：下面的写法是错误的。 <!-- 插值表达式是不能出现在标签内部 --> 此时需要用到v-bind
<td><img class="avatar" v-bind:src="{{e.image}}" :alt="{{e.name}}"></td>二十七、v-bind & v-if & v-show
例： 显示头像 根据职位对应的数字来显示对应的 具体职位
v-bind: （插值表达式不能在标签内部使用）
可以简写为：（冒号）
4c6a4db2ce57497b9a9c838912318f11.png
cc92389aa0d04363a1a03b395a2ff6ee.png
dab642d24ce641afbf29599963a65183.png
<td><img class="avatar" v-bind:src="e.image" :alt="e.name"></td>alt 属性 是如果 src 这个路径的图像找不到的话，就会生效 alt 这个属性。就会展示表述文字 故意填错试试：
8065632246c9410fb6ee8599c27799ab.png
4c05554b27fe4cb98bb5df108f17a99b.png
v-if & v-show
作用：这两类指令，都是用来控制元素的显示与隐藏的
v-if （不频繁切换）
d9c5dfc8813647edb1875333e246c297.png
d619969883414e9484b3d000758e0efd.png
<!-- v-if: 控制元素的显示与隐藏 -->
<td>
<span v-if="e.job == 1">班主任</span>
<span v-else-if="e.job == 2">讲师</span>
<span v-else-if="e.job == 3">学工主管</span>
<span v-else-if="e.job == 4">教研主管</span>
<span v-else-if="e.job == 5">咨询师</span>
<span v-else>其他</span>
</td>
0d6951456cd04ff1be583ca89758a4b9.png
a8f29154f2d241a5988c86745742c713.png
v-show （频繁切换）
112da717446d46fe9cde707280f1ecab.png
<!-- v-show: 控制元素的显示与隐藏 -->
<td>
<span v-show="e.job == 1">班主任</span>
<span v-show="e.job == 2">讲师</span>
<span v-show="e.job == 3">学工主管</span>
<span v-show="e.job == 4">教研主管</span>
<span v-show="e.job == 5">咨询师</span>
</td>v-if & v-show区别
对用户来说，呈现的效果是一样的 但 我们要知道他们的区别。 v-if:（控制元素是否真正渲染） 如果不满足条件，span标签就不会被渲染。
e1075e135756465c9376adddec1f9fc7.png
v-show:（控制元素展示还是隐藏） 不满足条件，span标签还是会被渲染。只是通过CSS的display属性设置为none。代表隐藏。
81d44364d770480f81944d07cd450d68.png
小结：
a90ae92a3ae84a5abc082ef7f4e6317c.png
二十八、v-model与v-on
例：
ced0bea8cfc8402d810634e6cb0999d0.png
c393ecfbc1d94985965daa543a091157.png
v-model（双向数据绑定）
9c01c6ba80cc410ca73eb79bbeea19da.png
双向数据绑定： 指的是，数据模型 和 我们的页面 绑定。 1.当我们数据模型数据发生变化。页面展示的内容跟着变化 2.页面内容变化了，数据模型绑定的数据也会跟着变化
searchForm:与empList:同级别
searchForm: {
//封装用户输入的查询条件
name: "",
gender: "",
job: "",
}, <!-- 搜索表单区域 -->
<form class="search-form"> <label for="name">姓名：</label>
<input
type="text"
id="name"
name="name"
v-model="searchForm.name"
placeholder="请输入姓名" <label for="gender">性别：</label>
<select id="gender" name="gender" v-model="searchForm.gender">
<option value=""></option>
<option value="1">男</option>
<option value="2">女</option>
</select> <label for="position">职位：</label>
<select id="position" name="position" v-model="searchForm.job">
<option value=""></option>
<option value="1">班主任</option>
<option value="2">讲师</option>
<option value="3">学工主管</option>
<option value="4">教研主管</option>
<option value="5">咨询师</option>
</select>
82423b6c47414a509bc13fa1d6bda740.png
这样就能采集到用户输入的数据了。 基于v-model，我们将表单项的值，绑定到了我们的数据模型当中。 {{searchForm}}
Vue插件
极简插件官网_Chrome插件下载_Chrome浏览器应用商店
搜索vue
9176f879c31a445d908831d0c8153e32.png
下载解压后， 将里面的CRX文件拖到
注意要打开开发者模式
efa56834a6234b6cb8e0b37bce7f61da.png
d05f7bfb6ba140538a77505135feea81.png
通过这个Vue工具。我们找到了数据模型。修改数据模型，会发现页面也跟着变化了
v-on （为查询/清空按钮赋能）
c5622bceb0b24e52bc0bfea7b332382c.png
查询
<button type="button" v-on:click="search">查询</button>查询和清除需要我们创建一个方法。这个方法在vue中创建。与data数据平级。
//方法
methods: {
search() {
//将搜索条件, 输出到控制台
console.log(this.searchForm); //加this代表当前vue实例对象
},
clear() {
//清空表单项数据
this.searchForm = { name: "", gender: "", job: "" };
},
},清空
<button type="button" @click="clear">清空</button> methods: {
search() {
//将搜索条件, 输出到控制台
console.log(this.searchForm); //加this代表当前vue实例对象
},
f7bf71dacd3b4e80a1093a197a325095.png
小结：
6dd0dbf2c3ca458c9c1a0f367c0ad5e7.png
二十九、Ajax入门
64285895bac4459ebee40f624a637e74.png
什么是ajax
80be614432854c9c8aa0b784b66088e0.png
如下输入后显示该邮箱地址已经被占用。这个就是异步交互。 还有上面输入java就自动提示词。这就是异步交互
97678baddeb74ed58321332823980f1e.png
同步与异步交互
异步：客户端发起请求，需要得到响应才能继续执行其他操作。 同步：客户端发起请求，客户端可以继续执行其他操作。
57b15b1ca93b45b58f1e9879d4790919.png
Axios
2c8104dc4e5047e587525684931c3034.png
Axios发起请求示例：get/post
de6cb47452444bd095f9b7485276121e.png
a3ea6aafe42a486ca91e621b5e7dcaa9.png
Axios-请求方式别名 （推荐这样写）
9ac7bb125fa044bda5342f335e6dc91a.png
3a0bd04f032748dcba06cf85e6278e14.png
thenc （get方法后直接写上）
1ed5940fc2504b839c2f91017b928d53.png
成功回调，失败回调都有了
424bf10980494224824c8ef8db29e44d.png
异步交互的体现
f3fc1393a6b842b3b4d982dc0784af12.png
会先输出②，也就是=============这一部分，因为 请求是需要一定的时间的。 而输出②会很快。 请求发出后，会继续往后执行
小结：
6a10220e79b3445a837a72333540ac95.png
三十、Ajax-案例（从服务器端动态获取数据渲染展示列表）
动态查询服务器端获取数据。
e389377a65544a5b84eb23e4a0dbdf9e.png
原始写法
c9889cd7ca564398b721124f38b6bdeb.png
4e56806fc8364cf4a9bcda51b76863ae.png
后面使用那两个关键字，就不需要 成功回调 和 失败回调 函数了。
点击查询：调用search方法
929c69f5706e486b97bc822f25cc9907.png
<script src="js/axios.js"></script>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
searchForm: { //封装用户输入的查询条件
name: '',
gender: '',
job: ''
},
empList: []
}
},
//方法
methods: {
async search(){
let result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);
this.empList = result.data.data;
},
clear(){
//清空表单项数据
this.searchForm = {name:'', gender:'', job:''}
this.search()
}
},
}).mount('#container')async & await关键字
可以通过 async 、await 可以让异步变成同步操作。 async 就是来声明一个异步方法。。 await 是用来等待异步任务的执行。等待服务器响应了再继续往下执行。有了await之后就不用再写成功回调函数了。因为影响成功才会往下执行。
6b72bf3ee0e14f908ed5ea9f4dfab6dd.png
b086dbc77dfd4ee18393e3734d9eee13.png
思考 ：如何页面加载完毕后自动发起请求来查询数据
999fd73f3c18419fb6530c8a0a019bda.png
Vue的生命周期
fdd7e3f471294c539c613bffb0b3f015.png
699345a3110348d0ad30a5f2bda4d9cd.png
1a7c0f90ccc04de0846700a2ebd7dfb8.png
钩子函数
生命周期-钩子函数 声明钩子函数，与data()平齐
//钩子函数
mounted(){
//页面加载完成之后，发送ajax请求，获取数据
this.search()
}小结
1a0c727e7ac34e6d94fba26caacae338.png
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-12-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号