01-作业-轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#app {
text-align: center;
}
img {
width: 500px;
height: 300px;
object-fit: cover;
}
button {
vertical-align: top;
margin-top: 140px;
}
</style>
<!--
分析:
1.默认图片显示
:src= arr[arrIndex];
arrIndex的默认值为0
2.下一张
@click = "next"
arrIndex++;
判断: 索引大于了图片地址数组的长度,那就应该改成0
3.上一张
@click = 'prev'
arrIndex--;
判断: 索引小于0,那就应该改成最后一张的索引.
-->
<body>
<div id="app">
<button @click="prev">上一张</button>
<img v-bind:src=arr[index] alt="">
<button @click="next">下一张</button>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
index: 0,
arr: ["http://ossweb-img.qq.com/images/lol/web201310/skin/big145000.jpg",
"http://ossweb-img.qq.com/images/lol/web201310/skin/big145001.jpg",
"http://ossweb-img.qq.com/images/lol/web201310/skin/big145014.jpg",
"http://ossweb-img.qq.com/images/lol/web201310/skin/big145015.jpg",
"http://ossweb-img.qq.com/images/lol/web201310/skin/big145016.jpg",
"http://ossweb-img.qq.com/images/lol/web201310/skin/big145017.jpg"
]
},
methods: {
prev() {
this.index--;
if (this.index < 0) {
this.index = this.arr.length - 1;
}
},
next() {
this.index++;
if (this.index > this.arr.length - 1) {
this.index = 0;
}
}
}
})
</script>
</body>
</html>
展示效果: 实际运用v-bind与v-on结合
在最后一张的时候点击下一张显示第一张,在第一张的时候点击上一张显示最后一张
02-includes基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//includes是用来检测字符串或者数组中,是否包含某个值,如果包含就返回true,否则返回true
// 1.用于字符串
var str = 'abcdefg';
var res = str.includes('abc');
console.log(res);//true
// 补充:
var res2 = str.includes("");
console.log(res2);//true
// 2.用于数组
var arr = [10,20,30,40,50];
var res3 = arr.includes(100);
console.log(res3);//false
// 补充:
var res4 = arr.includes();
console.log(res4);//false
</script>
</body>
</html>
03-案例-搜索当前英雄人物的详情
<!--
分析:
1.完成默认的英雄展示
定义一个默认的索引 heroIndex:0;
a.姓名 {{hero[heroIndex].name}}
b.图片 :src="hero[heroIndex].img"
c.英雄故事 v-html="hero[heroIndex].story"
2.搜索功能
a. input框 v-model="inputValue搜索框输入的值" @keyup.enter = "搜索事件search"
b. 搜索按钮 @click = "搜索事件search"
3.搜索事件如何写?
3.1 遍历hero这个数组
3.2 取遍历出来的每一项里面的name, 检测这个name包含不包含 搜索框输入的值(inputValue) 用includes判断
3.3 如果包含就返回当前这个索引i, 也就是把这个i赋值给heroIndex, 找到了就不用再找了,就return.
-->
<div id="app">
<div class="nav">
<span>英雄列表</span>
<button class="btn" @click="search">搜 索</button>
<input class="search" type="text" v-model="inputValue" @keyup.enter="search" placeholder="请输入英雄名称进行搜索">
</div>
<div class="content">
<!-- 人物列表 -->
<!-- 人物详情 -->
<div class="info">
<div class="name">英雄姓名:{{hero[heroIndex].name}}</div>
<div class='img'>
<img :src="hero[heroIndex].img" alt="">
</div>
<div class="story" v-html="hero[heroIndex].story"></div>
</div>
</div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
//搜索框中输入的值
inputValue:"",
//索引
heroIndex:0,
hero: [{
"id": "Sylas",
"tags": "melee_tag mage_tag charge_tag charge_tag boy_tag ",
"title": "塞拉斯",
"name": "塞拉斯",
"iconUrl": "https://ossweb-img.qq.com/images/lol/img/champion/Sylas.png",
"story": "<h5>英雄故事:</h5>作为一个出生于德玛西亚穷苦家庭的法师，虽然当时塞拉斯还只是一个少年，搜魔人还是将他终身监禁。他使用偷来的魔法杀害了场上所有人，除了饱受惊吓的拉克丝。塞拉斯不是以逃犯的身份离开搜魔人监狱，而是成为了法师反抗的代表。",
"img": "http://ossweb-img.qq.com/images/lol/web201310/skin/big517000.jpg",
"roles": ["法师", "刺客"]
}, {
"id": "Neeko",
"tags": "ranged_tag girl_tag mage_tag charge_tag jungle_tag support_tag",
"title": "妮蔻",
"name": "妮蔻",
"iconUrl": "https://ossweb-img.qq.com/images/lol/img/champion/Neeko.png",
"story": "<h5>英雄故事:</h5>妮蔻来自一个早已迷失的瓦斯塔亚部落。她可以借用别人的外表来伪装自己，融入人群，甚至通过影响别人的情绪状态，一瞬间就能化敌为友。没人知道妮蔻到底在哪儿——或者到底是谁，但是想要为难她的人会立刻见识到她的本色，感受原始的精神魔法倾泻在自己身上的痛苦。",
"img": "http://ossweb-img.qq.com/images/lol/web201310/skin/big518000.jpg",
"roles": ["法师", "辅助"]
}],
methods: {
search() {
//遍历hero数组
for (let i = 0; i < this.hero.length; i++) {
if (this.hero[i].name.includes(this.value)) {
this.index = i;
return;
}
}
}
}
})
</script>
展示效果: 代码中的hero里面数组的数据有很多只拷贝了两份上去
在输入框输入关键词,按下回车或者搜索按钮可以将对应的英雄名以及英雄图片英雄故事显示在页面上
04-v-bind指令之对象用法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
transition: all 2s;
}
.active {
width: 500px;
height: 500px;
background-color: red;
}
.fontSize {
font-size: 40px;
}
</style>
</head>
<!--
v-bind指令 对象用法
用在有多个属性值得属性上,适用于class,class就可以有多个值
v-bind:class="{类名:一句简短的js,最后转换成布尔值"
如果布尔值是true,那就说明这个类作用在这个标签上了
如果布尔值是false,那就说明这个类没有作用在这个标签上
-->
<body>
<div id='app'>
<!-- 点击按钮切换 要或者不要active,fontSize属性 -->
<button @click="isChange=!isChange">点我变变变</button>
<!-- <div class="box" :class="{active:true,fontSize:true}">你好鸭</div> -->
<div class="box" :class="{active:isChange,fontSize:isChange}">你好鸭</div>
</div>
<script src='vue.js'></script>
<script>
var app = new Vue({
el: '#app',
data: {
isChange: true
},
});
</script>
</body>
</html>
展示效果: 没点击按钮之前是有active类(500px红色)跟fontsize类(大字体)的
点击按钮之后是切换变成没有active类(500px红色)跟fontsize类(大字体),也就只有box类(300px默认字体)
05-v-for指令(用于数组):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!--
v-for指令:对数组遍历，得到每一项的值，从而进行列表之类的渲染处理。
语法: v-for="(item, index) in 数组"
（这里index索引也可省略不写）
注意:a.item和index其实是可以改名的,但是一般就用item跟index,语义更强
b.item跟index其实是有作用范围的,就是当前遍历的这个标签里面
-->
<body>
<div id='app'>
<ul>
<!-- 这里有多少li由arr有多少元素决定 -->
<li v-for="(item, index) in arr">{{item}}~~{{index}}</li>
</ul>
</div>
<script src='vue.js'></script>
<script>
var app = new Vue({
el: '#app',
data: {
arr:['测试1','测试2','测试3','测试4'],
},
});
</script>
</body>
</html>
<body>
<div id='app'>
<ul>
<!-- 这里有多少li由arr有多少元素决定 -->
<li v-for="(item, index) in arr">{{item}}~~{{index}}</li>
</ul>
</div>
<script src='vue.js'></script>
<script>
var app = new Vue({
el: '#app',
data: {
arr:['测试1','测试2','测试3','测试4'],
},
});
</script>
</body>
</html>
展示效果: 
06-v-for指令(用于对象):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!--
v-for用于对象:对对象遍历，得到每一项的值，从而进行列表之类的渲染处理。
语法:v-for="(value,key,index) in obj"
(这里key与index可省略,对象的for在实际项目中很少用到。)
-->
<body>
<div id='app'>
<div v-for="(value,key,index) in obj">{{value}}~{{key}}~{{index}}</div>
</div>
<script src='./vue.js'></script>
<script>
new Vue({
el: '#app',
data: {
obj: {
name: 'yania',
age: 19,
gender: '美女'
}
}
});
</script>
</body>
</html>
展示效果: 
07-V-for指令补充( 点击哪个li哪个lli弹出下标且有背景色)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active {
background-color: pink;
}
</style>
</head>
<body>
<div id='app'>
<!-- 需求:1.有多少个li取决于arr有多少个元素,
2.每个li标签有单击事件,弹出当前点击的li标签的索引
3.希望点击哪个li,哪个li的背景色就为红色
-->
<ul>
<!--
<li :class="active:2==0"></li>
<li :class="active:2==1"></li>
<li :class="active:2==2"></li>
<li :class="active:2==3"></li>
-->
<li :class="{active:currentIndex == index}" @click="liClick(index)" v-for="(item, index) in arr">
{{item}}~~{{index}}</li>
</ul>
</div>
<script src='vue.js'></script>
<script>
var app = new Vue({
el: '#app',
data: {
currentIndex: 0, //当前li标签的索引
arr: ['测试1', '测试2', '测试3', '测试4'],
},
methods: {
liClick(index) {
// 点击的时候就可以给这个currentIndex赋值
this.currentIndex = index;
alert(index)
}
}
});
</script>
</body>
</html>
展示效果: 点击哪个li哪个lli弹出下标且有背景色
08-案例单纯英雄列表:
<!--
分析:
1.列表处理:li标签有多少个取决于hero数组有多少个英雄数据.
v-for="(item,index) in hero"
人物名称: {{item.name}}
2.处理样式:当前点击的li标签要添加active类
:class="{active:布尔值(当前点击index值 === 当前li标签项的index值)}"
3.事件处理:给每一个li标签注册事件
给当前点击index值赋值 , 赋当前点击的li标签的index值.
-->
<body>
<div id="app">
<div class="content">
<!-- 人物列表 -->
<ul class="list">
<!-- 点击的时候将该点击的li的下标index赋值给currentIndex -->
<li class="item" @click="currentIndex=index" :class="{active:currentIndex == index}" v-for="(item, index) in hero" >{{item.name}}</li>
</ul>
</div>
<div class="noData">暂无数据</div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
currentIndex:0,
hero: [
{
"id": "Sylas",
"tags": "melee_tag mage_tag charge_tag charge_tag boy_tag ",
"title": "塞拉斯",
"name": "塞拉斯",
"iconUrl": "https://ossweb-img.qq.com/images/lol/img/champion/Sylas.png",
"story": "<h5>英雄故事:</h5>作为一个出生于德玛西亚穷苦家庭的法师，虽然当时塞拉斯还只是一个少年，搜魔人还是将他终身监禁。他使用偷来的魔法杀害了场上所有人，除了饱受惊吓的拉克丝。塞拉斯不是以逃犯的身份离开搜魔人监狱，而是成为了法师反抗的代表。",
"img": "http://ossweb-img.qq.com/images/lol/web201310/skin/big517000.jpg",
"roles": ["法师", "刺客"]
}, {
"id": "Neeko",
"tags": "ranged_tag girl_tag mage_tag charge_tag jungle_tag support_tag",
"title": "妮蔻",
"name": "妮蔻",
"iconUrl": "https://ossweb-img.qq.com/images/lol/img/champion/Neeko.png",
"story": "<h5>英雄故事:</h5>妮蔻来自一个早已迷失的瓦斯塔亚部落。她可以借用别人的外表来伪装自己，融入人群，甚至通过影响别人的情绪状态，一瞬间就能化敌为友。没人知道妮蔻到底在哪儿——或者到底是谁，但是想要为难她的人会立刻见识到她的本色，感受原始的精神魔法倾泻在自己身上的痛苦。",
"img": "http://ossweb-img.qq.com/images/lol/web201310/skin/big518000.jpg",
"roles": ["法师", "辅助"]
},
]
}
})
</script>
展示效果: 上面的hero数组的数据不全实际有很多,太多了就没拷贝.
点击哪个li哪个li就背景颜色变绿色
09-v-if,v-else-if,v-else指令:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!--
v-if指令:有条件的渲染某些内容
语法:
v-if="一句话表达式(最后转换成boolean值，如果为true，则进行该语句所在标签渲染，如果为false则不渲染，该标签将不存在)"
v-else-if和 v-if 是一样用法，但是是在 v-if 不成立情况下才会走到`v-else-if`这里来
v-else后面无须跟任何语句，当前面 v-if 和 v-else-if 都不成立时，它就会执行，当前面任何一个执行渲染，它就不执行
注意:v-if 与 v-else-if 与 v-else 一起使用的时候,他们必须是兄弟标签
-->
<body>
<div id='app'>
<input type="text" placeholder="请输入相应成绩" v-model="inputValue">
<P v-if="inputValue>=90">买法拉利</P>
<P v-else-if="inputValue>=80">买宝马</P>
<P v-else-if="inputValue>=70">买雪佛兰</P>
<P v-else-if="inputValue>=60">买拖拉机</P>
<P v-else>吃锤子</P>
<div>哈哈</div>
</div>
<script src='vue.js'></script>
<script>
var app = new Vue({
el: '#app',
data: {
inputValue: 100
}
});
</script>
</body>
</html>
展示效果: 根据不同条件选择性的渲染某些标签。
在输入框里面输入不同的分数展示的不同的p标签
10-案例完整版英雄搜索:
<!--
分析:
1.完成左边列表功能
li标签 v-for="(item,index) in hero" 英雄姓名{{item.name}}
点击事件 更改当前点击的索引 为 当前li标签项的索引
绑定样式类 :class="{active:currentIndex === index}"
2.完成中间详情部分
a.姓名 {{hero[currentIndex].name}}
b.图片 :src="hero[currentIndex].img"
c.英雄特征 v-for="(item,index) in hero[currentIndex].roles"
d.英雄故事 v-html="hero[currentIndex].story"
3.搜索功能
a.搜索框
v-model="inputValue(搜索框输入的搜索关键字)"
@keyup.enter="搜索事件(search)"
b.搜索按钮
@click="搜索事件(search)"
c.搜索事件(search)里面如何写
c.1 遍历hero数组
c.2 拿到遍历出来的每一项的name的值,判断包含不包含 inputValue(搜索框输入的搜索关键字)
c.3 如果包含的话, 就把当前这一项的i的值, 赋值给currentIndex
c.4 找到了就不要再找了.
4.优化部分
a.搜索不到的时候显示暂无数据
b.搜索一个关键词,左边列表要全部显示带该关键词的英雄名
-->
<div id="app">
<div class="nav">
<span>英雄列表</span>
<button class="btn" @click="search">搜 索</button>
<input class="search" type="text" v-model="inputValue" @keyup.enter="search" placeholder="请输入英雄名称进行搜索">
</div>
<div class="content" v-if="hasData">
<!-- 人物列表 -->
<ul class="list">
<li class="item" :class="{active:currentIndex==index}" @click="currentIndex=index"
v-for="(item, index) in hero" v-if="item.name.includes(searchValue)">{{item.name}}</li>
<!-- 这里搜索的关键词,左边列表只显示对应的英雄名,其余的不用显示 -->
</ul>
<!-- 人物详情 -->
<div class="info">
<div class="name">英雄姓名:{{hero[currentIndex].name}}</div>
<div class='img'>
<img :src="hero[currentIndex].img" alt="">
</div>
<div class="tags">
<h5>英雄特征：</h5>
<span v-for="(item, index) in hero[currentIndex].roles">{{item}}</span>
</div>
<div class="story" v-html="hero[currentIndex].story"></div>
</div>
</div>
<div class="noData" v-else>暂无数据</div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
// 是否搜索到了数据来是否显示数据
hasData:true,
//搜索框输入的搜索关键词
inputValue: "",
//回车时,用户输入的数据存储的中转站
searchValue:"",
currentIndex: 0,
hero: [{
"id": "Sylas",
"tags": "melee_tag mage_tag charge_tag charge_tag boy_tag ",
"title": "塞拉斯",
"name": "塞拉斯",
"iconUrl": "https://ossweb-img.qq.com/images/lol/img/champion/Sylas.png",
"story": "<h5>英雄故事:</h5>作为一个出生于德玛西亚穷苦家庭的法师，虽然当时塞拉斯还只是一个少年，搜魔人还是将他终身监禁。他使用偷来的魔法杀害了场上所有人，除了饱受惊吓的拉克丝。塞拉斯不是以逃犯的身份离开搜魔人监狱，而是成为了法师反抗的代表。",
"img": "http://ossweb-img.qq.com/images/lol/web201310/skin/big517000.jpg",
"roles": ["法师", "刺客"]
}, {
"id": "Neeko",
"tags": "ranged_tag girl_tag mage_tag charge_tag jungle_tag support_tag",
"title": "妮蔻",
"name": "妮蔻",
"iconUrl": "https://ossweb-img.qq.com/images/lol/img/champion/Neeko.png",
"story": "<h5>英雄故事:</h5>妮蔻来自一个早已迷失的瓦斯塔亚部落。她可以借用别人的外表来伪装自己，融入人群，甚至通过影响别人的情绪状态，一瞬间就能化敌为友。没人知道妮蔻到底在哪儿——或者到底是谁，但是想要为难她的人会立刻见识到她的本色，感受原始的精神魔法倾泻在自己身上的痛苦。",
"img": "http://ossweb-img.qq.com/images/lol/web201310/skin/big518000.jpg",
"roles": ["法师", "辅助"]
}]
},
methods: {
search() {
//搜索的时候先不显示数据,如果真的列表中有用户搜的关键词就再改成true显示出来
this.hasData=false;
// 点击搜索按钮或者回车搜索时,给中转站赋值
this.searchValue=this.inputValue;
//遍历hero数组
for (let i = 0; i < this.hero.length; i++) {
// 判断用户输入的关键词是否在英雄名中
if (this.hero[i].name.includes(this.inputValue)) {
//显示出来
this.hasData=true;
this.currentIndex=i;
return;
}
}
}
},
})
</script>
展示效果:
1.打开页面点击左侧的列表中任何英雄中间页面会显示对象的英雄名图片技能以及故事,
2.搜索或者按下回车 英雄名中的某个字去搜,可以出现对应的所有的英雄名在左侧列表,并显示左侧列表中第一个英雄对应的信息显示在中间页面
3.如果在输入框输入类似123或者不属于英雄名中的字,是搜不到相关英雄的,那就中间页面显示"暂无数据"
第一张
第二张
第三张
11-key值的基本使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- 有时候标签长得太像，vue也不一定能识别
当我们写的一些html标签相似度太高时，vue识别的时候是有可能 识别不出来 的，
加上key相当于加了个编号 ，让vue更准确的识别出来，不至于我们在进行一些值修改什么的时候出错。 -->
<!--
语法:key="值"
什么时候加key?
1.一般v-for循环要加
2.需要更新每个数据时出了问题,考虑加个key看看
-->
<body>
<!-- <ul>
<li v-for="(item, index) in items" :key="index"></li>
</ul> -->
<!-- 用v-if时,这个标签是直接没有 -->
<div id='app'>
<button @click="boolVal=!boolVal">点我切换登录模式</button>
<div v-if="boolVal" :key="1">
用户名:<input type="text" name="" id="" placeholder="请输入用户名">
</div>
<div v-else :key="2">
手机号:<input type="text" name="" id="" placeholder="请输入手机号">
</div>
</div>
<script src='vue.js'></script>
<script>
var app = new Vue({
el: '#app',
data: {
boolVal:true
}
});
</script>
<!-- --------------------------------------------- -->
<!-- 用v-show时,这个标签显示与隐藏 在这个input上输入的内容即使切换之后再切换回来还是会存在-->
<div id='app'>
<button @click="boolVal=!boolVal">点我切换登录模式</button>
<div v-show="boolVal" :key="1">
用户名:<input type="text" name="" id="" placeholder="请输入用户名">
</div>
<div v-show="!boolVal" :key="2">
手机号:<input type="text" name="" id="" placeholder="请输入手机号">
</div>
</div>
<script src='./vue.js'></script>
<script>
new Vue({
el: '#app',
data: {
boolVal: true
}
});
</script>
</body>
</html>
展示效果: 这个案例主要是在两个相似的标签加key来区别
第一个是用v-if做的,切换登录模式之后之前在输入框输入的就会不见,因为它主要是是对标签控制是否进行渲染。
第二个是用v-show做的,切换登录模式之后之前在输入框输入的也还在,切来切去都在,因为它主要是对标签控制是否显示还是隐藏本质是控制display:none
12-v-show指令:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!--
v-show="一句话表达式（最后转换成boolean值，如果为真，则进行该标签显示，如果为假则该标签将display:none隐藏)"
注意:所在标签的显示与隐藏，但不管显示与隐藏，这标签都会渲染出来,只是显示与否
v-show与v-if的对比: v-show 控制标签是否显示,本质控制的是样式display
v-if 直接控制当前这个标签是否渲染
应用场景: 当某些标签需要频繁切换使用时，建议优先考虑`v-show`,主要是在性能方向会更佳一些
当某些标签需要判断 条件较多，且切换不太频繁，就优先考虑`v-if`
实际项目开发中,大部分都是使用v-if,因为它灵活
-->
<body>
<div id='app'>
<button @click="isShow=!isShow">点我</button>
<!-- v-show 控制标签是否显示,本质控制的是样式display -->
<div v-show="isShow">我是一个div</div>
<!-- v-if 直接控制当前这个标签是否渲染 -->
<p v-if="isShow">我是一个p</p>
</div>
<script src='vue.js'></script>
<script>
var app = new Vue({
el: '#app',
data: {
isShow: true
}
});
</script>
</body>
</html>
展示效果:
不点击按钮之前是第一张图片,点击之后第二张图片,点击可以切换出现div跟p标签跟不出现
点击之后v-if与v-show都变成false,v-if变成false可以看到就是标签不在了,
v-show变成false可以看到就是加了一个display:none
399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
