本文介绍了Vue的事件绑定v-on、列表指令v-for和v-model的使用，以及商品加减案例。深入探讨了Vue的生命周期和异步操作，区分了同步与异步操作的区别。此外，还讲解了自定义组件的重要性，通过组件实现代码复用，以解决样式重复问题。最后提到了Element-UI，这是一个基于Vue的组件库，用于快速构建用户界面，并提供了引入和使用Element-UI的初步指南。
文章目录
2022.01.13 第二阶段 day 13
Vue
事件绑定v-on:为 HTML 标签绑定事件。
事件指令:
方式一: v-on:事件名称=“函数名称()”
方式二: @事件名称=“函数名称()”
注意:
1.事件名称不要加on
比如: ccc
<button @click=“test1()”>ccc
2.事件名称赋值:函数时,小括号也可以省略不写.建议写上小括号
比如:<button @click=“test1”>ccc</button>
键值对后加上,号
列表指令
v-for
列表指令(循环指令)
v-for=“数组中的每个元素 in 数组名称”
比如:
String[] names={“a”,“b”,“c”};
普通for循环:
for(int i=0;i<names.length;i++){}
增强for循环
for(String element : names){}
v-model：在表单元素上创建双向数据绑定。
双向绑定指令
概述:
指的改变vue里面data选项的数据,会影响html网页中的数据
改变html网页中的数据,同时也会改变vue里面data选的数据
语法:
v-model指令
商品加减案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品个数的加和减操作</title>
</head>
<body>
<div id="a">
<button @click="multiProduct()">+</button>
<input type="text" name="count" v-model="count" />
<button @click="subProduct()">-</button>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
/*案例: 模仿电商网站,动态实现购买商品个数的加和减
分析思路:1.使用v-model指令
2.给+号按钮添加点击事件: +1
3.给-号按钮添加点击事件: -1
*/
new Vue({
"el":"#a",
"data":{
"count":1,
},
"methods":{
// this表示vue对象
//获取data选项中的数据
//方式一: this.$data.count
//方式二: this.count
//1.增加购买数量
multiProduct(){
// 让count++
//问题2: 用户输入数据,获取时就是字符串,效果就是字符串拼接
//this.count = this.count+1
//解决2: parseInt(): "12"--->12
//this.count = parseInt(this.count)+1;
//简单的方式
//用户输入数据,获取时就是字符串,但是没有字符串拼接
//因为: this.count++ 写法,自带类型转换("12"-->12++)
this.count++;
},
//2.减少购买数量
subProduct(){
//让count--
//this.count--;
//1.问题一: 商品个数不能为负数
if(this.count>=2){
this.count--;
}else{
this.count=1;
}
// var num = this.count;
// if(num>=2){
// num--;
// }else{
// num=1;
// }
//this.count = num;
}
}
});
</script>
</body>
</html>
Vue的生命周期
Vue对象的生命周期:指的从Vue对象开始创建,以及过程数据的显示,数据更新等等,以及Vue对象销毁
特点:
vue整个生命周期过程中,与生命周期相关的函数,都是自动执行的.
细节: 生命周期相关的函数,又称之钩子函数
生命周期函数有那些,生命周期函数有那些特点
1.beforeCreate:function(){}
特点: vue对象没有创建, 也不能获取data里面的数据
2.created:function(){}
特点: vue对象已经创建,可以获取数据,
但是vue对象没有挂载(vue对象还没有加载到浏览器)
3.beforeMount:function(){}
特点: vue对象已经创建,并且在浏览器中存在
并且数据未挂载
4.mounted:function(){}
特点: vue对象已经创建,并且在浏览器中存在
并且数据已经挂载了
5.beforeUpdate:function(){}
特点: vue对象已经创建,并且在浏览器中存在
并且数据已经挂载了,在浏览器的内存中显示的未修改的
6.updateed:function(){}
特点: vue对象已经创建,并且在浏览器中存在
并且数据已经挂载了,在浏览器的内存中显示的已经修改的
7.beforeDestroy
特点: vue对象在浏览器中存在,数据依然显示
8.destroyed
特点: vue对象在浏览器中不存在,数据依然显示
与vue对象绑定的一切全部解绑.
总结:
1.vue生命周期相关的函数一共分为8个阶段,执行顺序从1到8
2.自动执行的
beforeCreated() created() beforeMounte() mounted()
当data数据发生改变时才会执行
beforeUpdate() updated()
当vue对象销毁时,才会执行
beforeDestroy(),destroyed()
| 生命周期的八个阶段 | |
|---|---|
| beforeCreate | 创建前 |
| created | 创建后 |
| beforeMount | 载入前 |
| mounted | 载入后 |
| beforeUpdate | 更新前 |
| updated | 更新后 |
| beforeDestroy | 销毁前 |
| destroyed | 销毁后 |
Vue的异步操作
同步操作:指的我们在向后台提交数据时,提交整个网页
异步操作:指的是向后台提交数据时,提交网页的一部分
| axios常用方法 | |
|---|---|
| 方法名 | 作用 |
| get(请求的资源路径与请求的参数) | 发起GET方式请求 |
| post(请求的资源路径与请求的参数) | 发起POST方式请求 |
| then(response) | 请求成功后的回调函数,通过response获取响应的数据 |
| catch(error) | 请求失败后的回调函数,通过error获取错误信息 |
同步操作
指的我们在向后台提交数据时,提交整个网页.
client客户端(浏览器)----->server后台(java程序)
前台提交数据到后台?
client----提交数据–>server
后台响应数据到前台?
client<----响应数据–server
同步缺点:
当后台响应慢,用户看到的"留白"
同步优点:
向后台提交的 次数少(
最低0.47元/天 解锁文章
1188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
