活动发起人@小虚竹 想对你说：
这是一个以写作博客为目的的创作活动，旨在鼓励大学生博主们挖掘自己的创作潜能，展现自己的写作才华。如果你是一位热爱写作的、想要展现自己创作才华的小伙伴，那么，快来参加吧！我们一起发掘写作的魅力，书写出属于我们的故事。我们诚挚邀请你参加为期14天的创作挑战赛！
提醒：在发布作品前，请将不需要的内容删除。
Vue的使用步骤
准备
-
引入Vue模板（官方提供）
-
创建Vue程序的应用实例，控制视图的元素
-
准备元素（div），被Vue控制
<!-- 准备元素（div），被Vue控制 --> <div id="app"> <h1>{{message}}</h1> </div> <script type="module"> //引入Vue模板（官方提供） import{ createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'; //创建Vue程序的应用实例，控制视图的元素 createApp({ }).mount('#app'); </script>
数据驱动视图
-
准备数据
-
通过插值表达式渲染页面
<div id="app"> <h1>{{message}}</h1> </div> <script type="module"> import{ createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'; createApp({ //准备数据 data(){ //指定方法返回值 return{ message:'Hello Vue' } } }).mount('#app'); </script>
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标签绑定事件 |
<p v-xxx="...">
...
</p>v-for
-
作用：列表渲染，遍历容器的元素或者对象的属性
-
快捷方式：输入vfor按下tab键直接生成结构
-
语法：
<tr v-for="(item,index) in items" :key="item.id">{{item}}</tr> -
参数说明：
-
items为遍历数组
-
item为遍历出来的元素
-
index为索引/下标，从0开始 ；可以省略，省略index语法：v-for="item in items
-
key：
-
作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能
-
推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应
-
-
-
注意：遍历的数组，必须在data中定义；要想让哪个标签循环展示多次，就在哪个标签上使用 v-for 指令。
<table>
<!-- 表头内容省略 -->
...
<!-- 表格主体内容 -->
<tbody>
<tr v-for="(e, index) in empList" :key="e.id">
<td>{{index +1}}</td>
<td>{{e.name}}</td>
<td>{{e.gender ==1?'男' : '女'}}</td>
<!-- 插值表达式是不能出现在标签内部的，因此图片无法展示 -->
<td><img class="avatar" src="{{e.image}}" alt="{{e.name}}"></td>
<td>{{e.job}}</td>
<td>{{e.entrydate}}</td>
<td>{{e.updatetime}}</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
</tbody>
</table>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
empList: [
{ "id": 1,
"name": "谢逊",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg",
"gender": 1,
"job": "1",
"entrydate": "2023-06-09",
"updatetime": "2024-09-30T14:59:38"
},
{
"id": 2,
"name": "韦一笑",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg",
"gender": 1,
"job": "1",
"entrydate": "2020-05-09",
"updatetime": "2024-09-01T00:00:00"
}
]
}
}
}).mount('#container')
</script>v-bind
-
作用：动态为HTML标签绑定属性值，如设置href，css，style样式等。
-
语法：v-bind：属性名=“属性值”
<img v-bind:src="item.image" width="30px" -
简化： ：属性名=“属性值”
<img :src="item.image" width="30px"> -
注意：动态的为标签的属性绑定值，不能使用插值表达式，得使用 v-bind 指令。且绑定的数据必须在data中定义。
<td><img class="avatar" v-bind:src="e.image" :alt="e.name"></td>
v-if & v-show
-
作用：这两类指令都是用来控制元素的显示与隐藏的
-
v-if
-
语法：v-if="表达式"，表达式值为true，显示；false，隐藏
-
原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
-
场景：要么显示，要么不显示，不频繁切换的场景
-
其他：可以搭配 v-else-if / v-else 进行链式调用条件判断
-
注意：v-else-if 必须出现在 v-if 之后，可以出现多个；v-else 必须出现在 v-if / v-else-if 之后。
<span v-if="gender ==1">男生</span> <span v-else-if="gender ==2">女生</span> <span v-else>未知</span><!-- 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> -
-
v-show
-
语法：v-show="表达式"，表达式值为true，显示；false，隐藏
-
原理：基于CSS样式display来控制显示与隐藏
-
场景：频繁切换显示隐藏的场景
<!-- 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-model
-
作用：在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单数据项。
-
语法：v-model="变量名"
-
注意：v-model中绑定的变量，必须在data中定义
<div id="container">
<!-- 顶部导航栏 -->
...
<!-- 搜索表单区域 -->
<form class="search-form" action="/search" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" v-model="search-form.name" placeholder="请输入姓名">
...
</form>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
searchFrom: {//封装用户输入的查询条件
name: '',
gender: '',
job: ''
},
empList: [
{ "id": 1,...},
{...},
{...}
]
}
}
}).mount('#container')
</script>v-on
-
作用：为html标签绑定事件（添加事件监听）
-
语法：
-
v-on：事件名="方法名"
-
简写为 @事件名=" ... "
-
<div id="app">
<button type="button" v-on:click="handle">
点我
</button>
<button type="button" @click="handle">
再点我
</button>
</div>
<!--...-->
<script>
const app=createApp({
data() {
//...
},
methods:{
handle(){
console.log('试试就试试');
}
},
}).mount('#app');
</script>前后端异步交互Ajax
什么是Ajax
-
介绍：Asynchronous JavaScript And XML，异步的JavaScript和XML。
-
作用：
-
数据交换：通过Ajax可以给服务器发送请求，并获取服务器相应的数据。
-
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户是否可用的校验等等（在浏览器下搜索关键字下方会自动弹出你可能想要搜索的结果）。
-
-
同步与异步：
Axios
-
介绍：Axois对原生的Ajax进行了封装，简化书写，快速开发。
-
步骤：
-
引入Axios的js文件（参照官网）
<script scr="https://unpkg.com/axios/dist/axios.min.js"></script>-
使用Axios发送请求，并获取相应结果
-
method:请求方式，GET/POST
-
url：请求路径
-
data：请求数据（POST）
-
params：发送请求时携带的url参数 如：...?key=val
-
<script> //发送GET请求 document.querySelector('#btnGet').addEventListener('click', () => { //axios发起异步请求 axios({ url: 'http://mock.apifox.cn/m1/3083103-0-default/emps/list', method: 'GET' }).then((result)=>{//成功回调函数 console.log(result); }).catch((error)=>{//失败回调函数 console.log(error); }) }) //发送POST请求 document.querySelector('#btnPost').addEventListener('click', () => { axios({ url: 'http://mock.apifox.cn/m1/3083103-0-default/emps/update', method: 'POST', data:'id=1'//post请求方式，请求体 }).then((result)=>{//成功回调函数 console.log(result); }).catch((error)=>{//失败回调函数 console.log(error); }) }) </script> -
-
为了方便起见，Axios已经为所有支持的请求方法提供了别名
-
格式（推荐方式）：axios.请求方式（url [ , data [ , config ] ] )
-
快捷键：在get（‘axios.get('http://mock.apifox.cn/m1/3083103-0-default/emps/list')’）后输入thenc然后按下tab键即可直接生成成功回调函数和失败回调函数格式
<script>
//发送GET请求
axios.get('http://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => {
console.log(result.data);
})
//发送POST请求
document.querySelector('#btnPost').addEventListener('click', () => {
axios.post('http://mock.apifox.cn/m1/3083103-0-default/emps/update','id=1').then((result) => {
console.log(result.data);
})
})
</script>async & await
-
可以通过async、await可以让异步变为同步操作。async就是来声明一个异步方法，await是用来等待异步任务执行。
-
注意：await关键字只在async函数内有效，await关键字取代then函数，等待获取到请求成功的结果值。
methods: {
async search(){
// 发送ajax请求，获取数据
let result = await axios.get(`web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`)
this.empList = result.data.data;
}
},Vue的生命周期
-
生命周期：指一个对象从创建到销毁的整个过程。
-
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）。
-
vue声明周期典型的应用场景：在页面加载完毕时，发起异步请求，加载数据，渲染页面。
| 状态（vue2中） | 阶段周期 |
|---|---|
| beforeCreate | 创建前 |
| created | 创建后 |
| beforeMount | 载入前 |
| mounted | 挂载完成 |
| beforeUpdate | 数据更新前 |
| updated | 数据更新后 |
| beforeUnmount | 组件销毁前 |
| unmounted | 组件销毁后 |
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
searchForm: { //封装用户输入的查询条件
...
},
empList: []
}
},
//方法
methods: {
async search(){
...
},
clear(){
...
}
},
//钩子函数
mounted(){
//页面加载完成之后，发送ajax请求，获取数据
this.search()
}
}).mount('#container')
</script>
扫一扫
2676
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
