vue实践案例+代码
- 用vue实现记事本（新增，删除，统计， 清空，隐藏底部统计栏）
- 网络应用：vue+axios实现天气预报
功能
输入查询
- 设置文本框，当按下回车键时，触发事件
- 调用天气预报接口，将返回的天气数据赋值给定义的天气数组
- 天气预报接口：http://wthrcdn.etouch.cn/weather_mini
html部分
<input type="text" class="city" placeholder="请输入查询的天气" v-model="city" @keyup.enter="setCity">
js部分
setCity:function(){
// console.log("天气预报");
// console.log(this.city);
//定义that来保存this
var that=this;
// 调用接口
axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
.then(function(response){
// console.log(response);
// 找到需要的数据，注意路径
that.weather=response.data.data.forecast;
// slice()该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。
that.weather_1=response.data.data.forecast.slice(0,2);
that.isIf_2=false;
that.isIf_1=true;
})
.catch(function(error){
console.log(error);
})
}
点击查询
- 设置列表，为每一个列表项绑定点击事件，当点击时触发changeCity()
- 改变city的值，然后调用接口的那个方法，进行查询
html部分
<ul class="cityed">
<li class="name" @click="changeCity('太原')">太原</li>
<li class="name" @click="changeCity('大同')">大同</li>
<li class="name" @click="changeCity('平遥')">平遥</li>
</ul>
js部分
changeCity:function(city){
this.city=city;
// 用this可以点出methonds中其他方法
this.setCity();
}
点击查看5天的天气预报
每次只显示一个列表
- 用v-for设置两个列表，列表项的值用插值表达式表示
- 用v-if来控制每个列表的显示与否，当点击“5天天气时”，触发show()方法，“isIf_2”变为true，显示5天天气情况（第二个列表），同时，isIf_1变为false，隐藏第一个列表
html部分
<!--第一个列表-->
<div>
<ul class="weather_1" v-if="isIf_1">
<li class="weather_1_text text_1"><b>{{city}}</b></li>
<li class="weather_1_text text_2" v-for="dayW_1 in weather_1">
<p class="text_2_content">{{dayW_1.date}}</p>
<h3 class="text_2_content text_color">{{dayW_1.type}}</h3>
<p class="text_2_content">{{dayW_1.low}}~{{dayW_1.high}}</p>
</li>
<li class="weather_1_text text_last" @click="show"><br>5天<br>天气</li>
</ul>
</div>
<!--第二个列表-->
<ul class="weather" v-if="isIf_2">
<li v-for="dayW in weather" class="content">
<h2 class="textWeather text_color">{{dayW.type}}</h2>
<p class="textWeather text_color"><b>{{dayW.low}} ~ {{dayW.high}}</b></p>
<p class="textWeather">{{dayW.fengxiang}}({{dayW.fengli}})</p>
<p class="textWeather">{{dayW.date}}</p>
</li>
</ul>
js部分
show:function(){
// 引用data中数据必须要用this
this.isIf_2=true;
this.isIf_1=false;
}
整体代码
css部分
*{
margin: 0;
padding: 0;
}
input{
outline:none;
color: #666;
}
ul li{
list-style-type:none;
}
#center{
max-width: 1200px;
margin: 0 auto;
}
header{
width: 100%;
height: 70px;
position: relative;
}
.logo{
width: 16.7%;
height: 50px;
position: absolute;
left: 1%;
top: 14%;
}
.city{
width: 250px;
height: 30px;
font-size: 16px;
position: absolute;
top: 19%;
right: 1%;
}
.cityed{
display: flex;
position: absolute;
bottom: 1%;
right: 1%;
}
.name{
margin-right: 10px;
color: #666;
}
/* 选择的链接:active*/
.name:hover{
color: rgba(0, 162, 255, 0.883);
}
section{
width: 100%;
height: 500px;
}
.weather_1{
display: flex;
margin-top: 100px;
justify-content: center;
}
.weather_1_text{
width: 220px;
height: 100px;
text-align: center;
}
.weather_1_text.text_1{
line-height: 120px;
}
.weather_1_text.text_2{
padding-top: 20px;
}
.weather_1_text .text_2_content{
margin-bottom: 5px;
}
.weather_1_text.text_last{
color: rgba(0, 162, 255, 0.883);
padding-top: 20px;
}
.weather_1_text.text_last:hover{
background-color: rgba(0, 162, 255, 0.883);
color: white;
}
.weather{
display: flex;
justify-content: space-around;
margin-top: 100px;
}
ul>li+li{
border-left: 1px solid rgba(163, 162, 162, 0.918);
}
.content{
width: 238px;
height: 200px;
text-align: center;
}
.textWeather{
margin-top: 25px;
}
.text_color{
color: rgba(255, 140, 0, 0.671);
}
html部分
<div id="center">
<div id="test">
<header>
<img src="https://beyondclouds.oss-cn-beijing.aliyuncs.com/blog/images/b94bd53e-a3ac-4c5d-9e7b-79c773baf73f.png" alt="" title="欢迎访问王胖子的网站" class="logo">
<div>
<input type="text" autofocus class="city" placeholder="请输入查询的天气" v-model="city" @keyup.enter="setCity">
<ul class="cityed">
<li class="name" @click="changeCity('太原')">太原</li>
<li class="name" @click="changeCity('大同')">大同</li>
<li class="name" @click="changeCity('平遥')">平遥</li>
</ul>
</div>
</header>
<section>
<div>
<ul class="weather_1" v-if="isIf_1">
<li class="weather_1_text text_1"><b>{{city}}</b></li>
<li class="weather_1_text text_2" v-for="dayW_1 in weather_1">
<p class="text_2_content">{{dayW_1.date}}</p>
<h3 class="text_2_content text_color">{{dayW_1.type}}</h3>
<p class="text_2_content">{{dayW_1.low}}~{{dayW_1.high}}</p>
</li>
<li class="weather_1_text text_last" @click="show"><br>5天<br>天气</li>
</ul>
</div>
<div>
<ul class="weather" v-if="isIf_2">
<li v-for="dayW in weather" class="content">
<h2 class="textWeather text_color">{{dayW.type}}</h2>
<p class="textWeather text_color"><b>{{dayW.low}} ~ {{dayW.high}}</b></p>
<p class="textWeather">{{dayW.fengxiang}}({{dayW.fengli}})</p>
<p class="textWeather">{{dayW.date}}</p>
</li>
</ul>
</div>
</section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
js部分
var test = new Vue({
el:"#test",
data:{
city:"",
weather:[],
weather_1:[],
isIf_1:false,
isIf_2:false,
},
methods:{
setCity:function(){
// console.log("天气预报");
// console.log(this.city);
//定义that来保存this
var that=this;
// 调用接口
axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
.then(function(response){
// console.log(response);
// 找到需要的数据，注意路径
// console.log(response.data.data.forecast);
that.weather=response.data.data.forecast;
console.log(that.weather)
// slice()该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。
that.weather_1=response.data.data.forecast.slice(0,2);
that.isIf_2=false;
that.isIf_1=true;
})
.catch(function(error){
console.log(error);
})
},
changeCity:function(city){
this.city=city;
// 用this可以点出methonds中其他方法
this.setCity();
},
show:function(){
// 引用data中数据必须要用this
this.isIf_2=true;
this.isIf_1=false;
}
}
})
页面效果展示
1. 首页
2. 输入城市按下回车查询
3. 点击5天天气查看详细信息（每次只显示一个列表）
4. 点击上方已有城市进行查询
结束
好啦，这个vue实例案例到这里就结束咯，希望和大家一起学习进步