Vue指令、生命周期、Axios异步请求方式
Vue 是一款用于构建用户界面的渐进式的JavaScript框架
一、v-for
v-for = "(item, index) in items" 参数说明： items 遍历的数组 item 遍历出来的元素 index 为索引/下表，从0开始，可以省略，省略index 语法： v-for = "item in items"
遍历的数组，必须在data中定义，要想让哪个标签循环展示多次，就在哪个标签上使用v-for指令。
Document
| 文章标题 | 分类 | 发表时间 | 状态 | 操作 |
|---|---|---|---|---|
| {{article.title}} | {{article.category}} | {{article.time}} | {{article.state}} | 编辑 删除 |
二、v-bind
作用：动态为html标签绑定属性值，如设置href、src、style样式等
语法：v-bind：属性名=“属性值”
简化：属性名=“属性值”
v-bind绑定的数据，也必须在data里
Document
百度
//引入vue模块
import { createApp} from
'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
url: 'https://www.baidu.com'
}
}
}).mount("#app")//控制html元素
三、v-if 和v-show
作用：这两类指令，都是用来控制元素的显示与隐藏的
v-if
语法：v-if=“表达式”，表达式值为true，显示，false，隐藏
其他：可以配合 v-else-if / v-else进行链式调用条件判断
原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
场景：要么显示，要么不显示，不频繁切换的场景
v-show
语法：v-show=“表达式”，表达式值为true，显示，false，隐藏
原理：基于CSS样式display来控制显示与隐藏
场景：频繁切换显示隐藏的场景
Document
手链价格为: =0 && customer.level19.9
29.9
手链价格为: =0 && customer.level19.9
=5">29.9
//导入vue模块
import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
customer:{
name:'张三',
level:2
}
}
}
}).mount("#app")//控制html元素
四、v-on
作用：html标签绑定事件
语法：
v-on：事件名=“函数名”
简写为 @事件名=“函数名”
Vue中使用的函数需要定义在methods选项内部
createApp({data(){需要用到的数据},methods:{需要用到的方法}})
Document
点我有惊喜
再点更惊喜
//导入vue模块
import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
//定义数据
}
},
methods:{
money: function(){
alert('送你钱100')
},
love: function(){
alert('爱你一万年')
}
}
}).mount("#app");//控制html元素
五、v-model
作用：在表单元素上使用，双向数据绑定。可以方便的获取 或设置表单项数据。视图发生了变化，数据就发生了变化；数据发生变化，试图也发生变化。 数据视图
语法：v-model=“变量名”
v-model中绑定的变量，必须在data中定义。
Document
文章分类: {{searchConditions.category}}
发布状态: {{searchConditions.state}}
搜索
重置
| 文章标题 | 分类 | 发表时间 | 状态 | 操作 |
|---|---|---|---|---|
| {{article.title}} | {{article.category}} | {{article.time}} | {{article.state}} | 编辑 删除 |
六、Vue生命周期
生命周期：指一个对象从创建到销毁的整个过程
生命周期的八个阶段：每个阶段会自动执行一个生命周期方法（钩子函数），让开发者有机会在特定的阶段执行自己的代码。
| 状态 | 阶段周期 | |
|---|---|---|
| beforeCreate | 创建前 | vue应用实例创建前调用 |
| created | 创建后 | vue应用实例创建后调用 |
| beforeMount | 载入前 | vue应用实例载入前调用 |
| mounted | 挂载完成 | vue应用实例挂在后调用 |
| beforeUpdate | 数据更新前 | vue应用实例数据更新前调用 |
| updated | 数据更新后 | vue应用实例数据更新后调用 |
| beforeUnmount | 组件销毁前 | vue应用实例组件销毁前调用 |
| unmounted | 组件销毁后 | vue应用实例组件销毁后调用 |
| 只需要记住mounted钩子函数， | ||
| Vue生命周期包含几个阶段？ | ||
| 八个阶段 | ||
| Vue生命周期典型的应用场景？ | ||
| 在页面加载完毕时，发起异步请求，加载数据，渲染页面。 | ||
| //生命周期-钩子函数 mounted | ||
| mounted(){ |
console.log('Vue挂在完毕，发送请求获取数据.....');
}
发送请求使用Ajax的库
七、Axios
介绍：Axios对原生的Ajax进行封装，简化书写，快速开发
官网：https://www.axios-http.cn/
Axios使用步骤
引入Axios的js文件
使用Axios发送请求，并获取相应结果
axios({
method: 'GET',
url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/list'
}).then((result) => {
console.log(result.data);
}).catch((err) => {
alert(err);
});
例子，then是正确的回调，catch是错误的回调结果
Document
/* 发送请求 */
/* axios({
method:'get',
url:'http://localhost:8080/article/getAll'
}).then(result=>{
//成功的回调
//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
console.log(result.data);
}).catch(err=>{
//失败的回调
console.log(err);
}); */
let article = {
title: '明天会更好',
category: '生活',
time: '2000-01-01',
state: '草稿'
}
/* axios({
method:'post',
url:'http://localhost:8080/article/add',
data:article
}).then(result=>{
//成功的回调
//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
console.log(result.data);
}).catch(err=>{
//失败的回调
console.log(err);
}); */
//别名的方式发送请求
/* axios.get('http://localhost:8080/article/getAll').then(result => {
//成功的回调
//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
console.log(result.data);
}).catch(err => {
//失败的回调
console.log(err);
}); */
axios.post('http://localhost:8080/article/add', article).then(result => {
//成功的回调
//result代表服务器响应的所有的数据,包含了响应头,响应体. result.data 代表的是接口响应的核心数据
console.log(result.data);
}).catch(err => {
//失败的回调
console.log(err);
});
常用的是使用别名的方式请求
Axios的异步请求方式
GET:
axios.get(url).then((res)=>{…}).catch((err)=>{…})
POST:
axios.post(url,data).then((res)=>{…}).catch((err)=>{…})
免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理!
部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!
图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!
