目录
一、vue
1、考察
引入式及脚手架
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
2、引入式简单例子
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span @click="btnClick">{{index}}</span>
</div>
</body>
<script>
new Vue({
el:'#app',
data(){
return {
index:1
}
},
methods: {
btnClick(){
console.log(this.index);
}
}
})
</script>
</html>
3、了解更多
想了解更多的小伙伴们可以看小编的vue专栏有很多关于vue的学习
二、生命周期
1、文档图示
2、常考模块介绍
created、mounted、beforeDestroy
(1)created与mounted的区别
①生命周期执行顺序
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{index}}</span>
</div>
</body>
<script>
new Vue({
el:'#app',
data(){
return {
index:1
}
},
created () {
console.log('created');
this.btnClick()
},
mounted () {
console.log('mounted');
},
methods: {
btnClick(){
console.log(this.index);
}
}
})
</script>
</html>
② DOM操作页面
created:整个生命周期中第一个能获取到data和methods的数据,常用于请求接口、数据初始化
mounted:第一个能获取DOM的时刻,做挂载操作
【像挂画一样,created拿起画,mounted是挂画操作】
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span class="demo" @click="btnClick()">{{index}}</span>
</div>
</body>
<script>
new Vue({
el:'#app',
data(){
return {
index:1
}
},
created () {
console.log('created');
this.btnClick()
},
mounted () {
console.log('mounted');
console.log(document.querySelector('.demo'));
},
methods: {
btnClick(){
console.log(this.index);
}
}
})
</script>
</html>
(2)beforeDestroy销毁前:最后一个可以获取到data和methods,常用于在页面销毁destroy前,处理data,methods
常见场景:关闭计时器、记录用户的操作时间、停留时间、视频观看时长、视频有效播放次数
三、组件传参方式
1、创建使用组件
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span class="demo" @click="btnClick()">{{index}}</span>
<user></user>
</div>
<!-- 组件user -->
<template id="user">
<div>
<h1>123</h1>
<h4>{{userIndex}}</h4>
</div>
</template>
</body>
<script>
// 组件user
const user = Vue.extend({
template:"#user",
data(){
return{
userIndex:10,
}
},
methods:{
btnChildClick(){
}
}
});
//父组件
new Vue({
el:'#app',
data(){
return {
index:1
}
},
components: {
user
},
created () {
console.log('created');
this.btnClick()
},
mounted () {
console.log('mounted');
console.log(document.querySelector('.demo'));
},
methods: {
btnClick(){
console.log(this.index);
}
}
})
</script>
</html>
2、父子传参
(1)父传子props
例子:直接传一个字符串
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span class="demo" @click="btnClick()">{{index}}</span>
<!-- 注意如果直接写"lalala",会被认为是一个lalala方法,而报错 -->
<user :userinfo="'lalala'"></user>
</div>
<!-- 组件user -->
<template id="user">
<div>
<h1>123</h1>
<h4>{{userIndex}}</h4>
<h4>{{userinfo}}</h4>
</div>
</template>
</body>
<script>
// 组件user
const user = Vue.extend({
template:"#user",
data(){
return{
userIndex:10,
}
},
props:['userinfo'],
methods:{
btnChildClick(){
}
}
});
//父组件
new Vue({
el:'#app',
data(){
return {
index:1
}
},
components: {
user
},
created () {
console.log('created');
this.btnClick()
},
mounted () {
console.log('mounted');
console.log(document.querySelector('.demo'));
},
methods: {
btnClick(){
console.log(this.index);
}
}
})
</script>
</html>
(2)子传父$emit()
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<span class="demo" @click="btnClick()">{{index}}</span>
<!-- 注意绑定属性要用驼峰btn-child不能用btnChild -->
<user :userinfo="'lalala'" @btn-child="btnFather"></user>
</div>
<!-- 组件user -->
<template id="user">
<div>
<h1>123</h1>
<h4>{{userIndex}}</h4>
<h4 @click="btnChildClick">{{userinfo}}</h4>
</div>
</template>
</body>
<script>
// 组件user
const user = Vue.extend({
template:"#user",
data(){
return{
userIndex:10,
}
},
props:['userinfo'],
methods:{
btnChildClick(){
// 注意用驼峰btn-child,不用btnChild
this.$emit('btn-child',this.userIndex)
}
}
});
//父组件
new Vue({
el:'#app',
data(){
return {
index:1
}
},
components: {
user
},
created () {
console.log('created');
this.btnClick()
},
mounted () {
console.log('mounted');
console.log(document.querySelector('.demo'));
},
methods: {
btnClick(){
console.log(this.index);
},
btnFather(e){
console.log('btnFather:'+e);
}
}
})
</script>
</html>
四、axios
1、简介
axios是一个基于promise的网络请求库,可以用于浏览器和node.js
2、13届蓝桥真题(7)布局切换
(1)实现tab栏图片点击切换效果
①要求:点击“列表效果”的图标,图标背景色变为红色(即 class=active
),“大图效果”的图标背景色变为灰色(即 class=active
被移除)
②分析:要实现点击切换样式效果,可以编写动态绑定class属性;设置点击事件,对动态绑定值isActive进行修改即可
<!-- TODO:请在下面实现需求 -->
<div class="bar">
<a class="grid-icon" :class="{active:isActive}" @click="grid()"></a>
<a class="list-icon" :class="{active:!isActive}" @click="list()"></a>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
goodsList: [],
isActive:true,
},
mounted() {
// TODO:补全代码实现需求
},
methods:{
grid(){
this.isActive = true
},
list(){
this.isActive = false
}
}
});
</script>
③结果显示
(2)通过axios获取json数据
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
goodsList: [],
isActive:true,
},
mounted() {
// TODO:补全代码实现需求
this.getData()
},
methods:{
grid(){
this.isActive = true
},
list(){
this.isActive = false
},
getData(){
axios.get('./goodsList.json').then(res=>{
console.log(res.data);
this.goodsList = res.data
})
}
}
});
</script>
(3)实现内容渲染
①通过观察grid示例代码,可以用v-for循环ul标签,来渲染内容
②结合上面定义的isActive属性值,动态绑定ul标签的class样式,a标签的href属性值,img标签的src属性值
<ul v-for="item in goodsList" :key="item.url" :class="isActive?'grid':'list'">
<li>
<a :href="item.url" target="_blank"> <img :src="item.image.large" /></a>
</li>
</ul>
到这里实现的效果如图
③发现当内容以图片显示时,没有文字内容;以列表显示时,有p标签的文字内容,需要用v-show动态绑定文字的显示与否
<ul v-for="item in goodsList" :key="item.url" :class="isActive?'grid':'list'">
<li>
<a :href="item.url" target="_blank"> <img :src="item.image.large" /></a>
<p v-show="!isActive">{{item.title}}</p>
</li>
</ul>
(4)完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>布局切换</title>
<script type="text/javascript" src="./js/vue.js"></script>
<link rel="stylesheet" type="text/css" href="./css/index.css" />
<script
src="./js/axios.min.js"
type="text/javascript"
charset="utf-8"
></script>
</head>
<body>
<div id="app" v-cloak>
<!-- TODO:请在下面实现需求 -->
<div class="bar">
<a class="grid-icon" :class="{active:isActive}" @click="grid()"></a>
<a class="list-icon" :class="{active:!isActive}" @click="list()"></a>
</div>
<!--grid 示例代码,动态渲染时可删除-->
<ul v-for="item in goodsList" :key="item.url" :class="isActive?'grid':'list'">
<li>
<a :href="item.url" target="_blank"> <img :src="item.image.large" /></a>
<p v-show="!isActive">{{item.title}}</p>
</li>
</ul>
<!-- <ul class="grid">
<li>
<a href="#/3814" target="_blank"> <img src="./images/1.png" /></a>
</li>
</ul>
<ul class="list">
<li>
<a href="#/3814" target="_blank"> <img src="./images/1.png" /></a>
<p>从零吃透 Vue.js 框架</p>
</li>
</ul> -->
</div>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
goodsList: [],
isActive:true,
},
mounted() {
// TODO:补全代码实现需求
this.getData()
},
methods:{
grid(){
this.isActive = true
},
list(){
this.isActive = false
},
getData(){
axios.get('./goodsList.json').then(res=>{
console.log(res.data);
this.goodsList = res.data
})
}
}
});
</script>
3、13届蓝桥真题(8)购物车
要求:修改 addToCart
方法,实现将商品加入到购物车的功能。即:点击“加入购物车”按钮后,如果购物车中不存在该商品,则将该商品添加到购物车末尾,并初始化数量为 1;如果购物车中已存在该商品,则只在原数量上 +1 即可
思路:判断购物车没有被点击商品的数据就push,有数据就修改num。可以用for循环判断,这里小编用高阶函数findIndex
(1)判断购物车有无被点击商品的数据
addToCart(goods){
// TODO:修改当前函数,实现购物车加入商品需求
console.log(goods);
const index = this.cartList.findIndex(e=>{
return e.id === goods.id
})
goods.num = 1;
this.cartList.push(goods);
this.cartList = JSON.parse(JSON.stringify(this.cartList));
},
从效果图看出,当购物车没有被点击商品的数据时,flag输出-1,找到就是返回第一次发现数据的下标
(2)商品的添加或num值的增加
addToCart(goods){
// TODO:修改当前函数,实现购物车加入商品需求
console.log(goods);
const index = this.cartList.findIndex(e=>{
return e.id === goods.id
})
if(index == -1){
goods.num = 1;
this.cartList.push(goods);
}else{
this.cartList[index].num++
}
this.cartList = JSON.parse(JSON.stringify(this.cartList));
},
(3)removeGoods
方法
要求:完善 removeGoods
方法,实现移出购物车商品功能。点击购物车商品后对应的减号(“-”)按钮,将其数量在原数量上 -1;如果减后数量为 0,则将该商品从购物车中移除。
思路:点击‘ - ’,数量num减1,注意当num减到1,再点击' - '时,要实现将商品从购物车列表删除
removeGoods(goods){
// TODO:补全代码实现需求
const index = this.cartList.findIndex(e=>{
return e.id === goods.id
})
if(this.cartList[index].num > 1){
this.cartList[index].num--
}else{
// index裁切的起始点,1裁切长度
this.cartList.splice(index,1)
}
}
(4)拓展学习
将上面的代码进行简化
addToCart(goods){
// TODO:修改当前函数,实现购物车加入商品需求
console.log(goods);
const index = this.cartList.findIndex(e => e.id === goods.id)
// 利用展开符,先结构goods,然后再添加num
index == -1 ? this.cartList.push({...goods,num:1}) : this.cartList[index].num++
this.cartList = JSON.parse(JSON.stringify(this.cartList));
},
removeGoods(goods){
// TODO:补全代码实现需求
const index = this.cartList.findIndex(e => e.id === goods.id)
this.cartList[index].num > 1 ? this.cartList[index].num-- : this.cartList.splice(index,1)
}