一、vue

1、考察

2、引入式简单例子

二、生命周期

1、文档图示

2、常考模块介绍

三、组件传参方式

1、创建使用组件

2、父子传参

四、axios

1、简介

2、13届蓝桥真题（7）布局切换

3、13届蓝桥真题（8）购物车

一、vue

1、考察

引入式及脚手架

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

安装 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://v2.cn.vuejs.org/v2/guide/installation.html#%E7%9B%B4%E6%8E%A5%E7%94%A8-lt-script-gt-%E5%BC%95%E5%85%A5

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的学习

http://t.csdn.cn/hhNB5

二、生命周期

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>// 组件userconst 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>// 组件userconst 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>// 组件userconst user = Vue.extend({template:"#user",data(){return{userIndex:10,}},props:['userinfo'],methods:{btnChildClick(){// 注意用驼峰btn-child，不用btnChildthis.$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" /><scriptsrc="./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，然后再添加numindex == -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)
}

蓝桥杯Web组备赛笔记5相关推荐

蓝桥杯Web组备赛笔记6
目录一.ElementUI 1.安装 2.简单使用 3.例子 4.其他内容的学习二.echarts 1.简介 2.考点 3.安装 4.配置项:使用echarts的三步走 5.13届蓝桥真题(3)布 ...
蓝桥杯Web组备赛笔记1
目录一.flex布局 1.详细的使用解释 2.简单例子 3.flex布局要认识两个轴 4.版心布局 5.13届蓝桥真题 (1,6) 二.grid布局 1.应用 2.代码例子三.CSS动画 1.注意 ...
蓝桥杯Web组备赛笔记4
目录一.es6新增特性 1.定义常量及其简单的使用 2.set()函数 3.构造器 4.构造函数二.高阶函数 1.filter():过滤器 2.find() 三.13届蓝桥真题 (9) 1.解题思 ...
蓝桥杯Web组备赛笔记7
目录一.node.js 1.概念 2.认识前后端交互 3.注意 4.下载二.常见api 1.读写文件内容 2.更多常见的使用 3.API中文网文档三.http 1.使用 2.监听请求 3.传回数 ...
蓝桥杯Web组备赛笔记3
目录一.JQuery基础 1.详细的JQ介绍,小伙伴们可以参考小编的文章
2022.4.9第十三届蓝桥杯web组省赛个人题解
2022第十三届蓝桥杯第一次开放了web组赛道,博主作为一名前端小白,参加了这次比赛.一共十个题目,目的均是实现特定的网页效果,考点包含三件套.jQuery和vue,这里简单的进行一下个人的题解记录. ...
第十二届蓝桥杯青少年组国赛C++中级组第1题 -- 第3题（python3实现）
12届蓝桥杯青少年组国赛C++中级组编程题 12届蓝桥杯青少年组国赛C++中级组编程题_lybc2019的博客-CSDN博客蓝桥杯算法学习路线 | 全程制作过程公开蓝桥杯算法学习路线 | 全程制作 ...
2018年第九届蓝桥杯 JavaB组省赛刷题思路及答案
前言本人是二本院校大二的计算机系学生,已经报名了下一届的蓝桥杯省赛,整个寒假学习了很多算法知识,我是看<算法很美>这个课程学习算法的,一套学习下来确实受益匪浅,视频在b站上面都有. 此前 ...
2013第四届蓝桥杯Java组省赛题解析
2013第四届蓝桥杯Java组省赛题解析目录第一题:高斯日记第二题:马虎的算式第三题:第39级台阶第四题:黄金连分数第五题:前缀判断第六题:三部排序第七题:错误票据第八题:翻硬币 ...

蓝桥杯Web组备赛笔记5

一、vue

1、考察

2、引入式简单例子

二、生命周期

1、文档图示

2、常考模块介绍

三、组件传参方式

1、创建使用组件

2、父子传参

四、axios

1、简介

2、13届蓝桥真题（7）布局切换

3、13届蓝桥真题（8）购物车

蓝桥杯Web组备赛笔记5相关推荐

最新文章

热门文章