第一个vue案例

原创 2018年04月16日 17:13:28

html:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>更多兑换</title>
<meta content="" name="keywords" />
<meta content="" name="description" />
<script type="text/javascript" src="dest/js/flexible.js"></script>
<link rel="stylesheet" href="dest/css/index.css">
</head>

<body>
<div class="container" id='app'>
<!-- <div class="head">
<a class="iconBack"></a>
更多兑换
</div> -->
<!--遮罩层-->
<div v-show="isLoading" class="cover"></div>
<aside v-show="isLoading" class="loading-wrapper" id="loadingWrapper">
<div>
<div class="loading-img"></div>
<div class="loading-animate"></div>
</div>
</aside>
<main id="mainContent" class="dn">
<!-- 航空产品兑换 -->
<div class="aviationExchange">
<div class="common">
<div class="common_left1"></div>
<p class="common_left2">航空产品兑换</p>
<a>
<span class="common_right2"></span>
<span class="common_right1">更多</span>
</a>
</div>
<div v-show="Object.keys(aviation).length > 0" class="exchangeContent">
<span class="exchangeContentP1">{{aviation.FlightDate}}</span>
<span class="exchangeContentP2">{{aviation.FlightLine}}</span>
<a class="exchangeContentP3"></a>
<span class="exchangeContentP4">积分起</span>
<span class="exchangeContentP5">{{aviation.MinPoint}}</span>
</div>
<div class="line"></div>
<ul class="exchangeItem">
<a>
<li>
<img src="images/seat.png" />
<p>优选座位</p>
</li>
</a>
<a>
<li>
<img src="images/luggageImg.png" />
<p>逾重行李</p>
</li>
</a>
<a>
<li>
<img src="images/vip.png" />
<p>贵宾室</p>
</li>
</a>
<a>
<li>
<img src="images/upgradesImg.png" />
<p>积分升舱</p>
</li>
</a>
</ul>
</div>
<!-- 接送机兑换 -->
<div class="pickExchange">
<div class="common">
<div class="common_left1"></div>
<p class="common_left2">接送机兑换</p>
<a>
<span class="common_right2"></span>
<span class="common_right1">更多</span>
</a>
</div>
<div class="exchangeTip">
<p class="tipContent">
<span v-if="IsLevel">您有积分可以抵用接送机费用,点击去预订</span>
<span v-else>您的积分不足,快去赚积分吧!</span>
</p>
<a class="tipRig"></a>
</div>
</div>
<!-- 积分商城兑换 -->
<div class="iconExchange">
<div class="common">
<div class="common_left1"></div>
<p class="common_left2">积分商城兑换</p>
<a>
<span class="common_right2"></span>
<span class="common_right1">更多</span>
</a>
</div>
<ul class="exchangeList">
<li v-for="exchangeList in mall" v-show="Object.keys(mall).length > 0">
<a v-bind:href="exchangeList.ProductLinkUrl">
<img v-bind:src="exchangeList.ProductImageUrl" />
<p>{{exchangeList.ProductName | checkString}}</p>
<div class="color">
<span>{{exchangeList.MinPoint | intW}}</span>积分
</div>
</a>
</li>
</ul>
</div>
<!-- 酒店兑换 -->
<div class="hotelExchange">
<div class="common">
<div class="common_left1"></div>
<p class="common_left2">酒店兑换</p>
<a>
<span class="common_right2"></span>
<span class="common_right1">更多</span>
</a>
</div>
<ul class="hotelList">
<li v-for="hotelList in hotel" v-show="Object.keys(hotel).length > 0">
<a v-bind:href="hotelList.HotelLinkUrl">
<img v-bind:src="hotelList.HotelImageUrl" />
<p>{{hotelList.HotelName | checkString}}</p>
<div class="use">最高可用</div>
<div class="color">
<span>{{hotelList.MinPoint | int}}</span>
积分
</div>
</a>
</li>
</ul>
</div>
</main>

</div>
<script type="text/javascript" src="dest/js/lib/vue.js"></script>
<script type="text/javascript" src="dest/js/lib/axios.min.js"></script>
<script type="text/javascript" src="dest/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="dest/js/index.min.js"></script>
</body>

</html>

less:

/*初始化样式*/
html {overflow-y:scroll;font-family: "PingFangSC-Light";}
body,*{
padding:0;
margin:0;
box-sizing: border-box;
}
body{
background-color: #F2F2F2;
}
.dn {
display: none!important;
}
li{list-style-type:none;}
img{border:0;display:block; width: 100%;max-width:100%;}
a{text-decoration-line: none;}
.container{
width: 100%;
height: auto;
padding-bottom:50px;
.head{
width: 100%;
height: 128px;
padding:63px 31px 17px 31px;
overflow: hidden;
background: #FAFBFC;
box-shadow: 0 1px 10px 0 rgba(0,132,255,0.30);
color: #333333;
font-size: 34px;
text-align: center;
.iconBack{
display: block;
float: left;
width: 19.9px;
height: 35px;
background: url("..\images\ico_back_blue.png") no-repeat center center;
background-size:100% 100%;
}
}
.common{
width: 100%;
height: 93px;
overflow: hidden;
vertical-align: middle;
padding:32px 30.1px 19px 31px;
.common_left1{
float: left;
width: 4px;
height: 30px;
background: #007AFF;
margin-top:9px;
}
.common_left2{
float: left;
width: 180px;
height: 42px;
line-height: 42px;
font-size: 30px;
color: #333333;
letter-spacing: 0;
margin-left: 12px;
}
.common_right1{
display: block;
float: right;
width: 48px;
height: 33px;
line-height: 33px;
font-size: 24px;
color: #999999;
letter-spacing: 0;
margin-right: 10px;
}
.common_right2{
display: block;
float: right;
width: 19.8px;
height: 19.8px;
background: url("..\images\common.png") no-repeat center center;
background-size:auto auto;
margin-top: 8.1px;
}
}
.aviationExchange{
width: 100%;
height: 390px;
background: #fff;
border-bottom: 1px solid #e5e5e5;
.exchangeContent{
width: 100%;
height: 100px;
overflow: hidden;
padding:28.5px 30px 29.5px 32px;
font-size: 30px;
color: #999999;
border-top: 1px solid #E5E5E5;
.exchangeContentP1{
display: block;
float: left;
width: 229px;
text-align: left;
}
.exchangeContentP2{
display: block;
float: left;
width: auto;
color: #333333;
text-align: left;
}
.exchangeContentP3{
display: block;
float: right;
width: 14px;
height: 27.1px;
background: url("..\images\more.png") no-repeat center center;
background-size:100% 100%;
margin-top:6px;
}
.exchangeContentP4{
display: block;
float: right;
margin-right: 22px;
width: 90px;
}
.exchangeContentP5{
display: block;
float: right;
margin-right: 4px;
width: auto;
height: 37px;
line-height: 37px;
font-family: "HelveticaNeue-Medium";
color: #FF9500;
}
}
.line{
width: 690px;
height: 1px;
margin: 0 auto;
background-color: #E5E5E5;
}
.exchangeItem{
width:100%;
height: 197px;
padding:60px 35px 31px 35px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content:space-between;
align-items:center;
vertical-align:middle;
text-align: center;
overflow: hidden;
img{
width: auto;
height: auto;
display: inline-block;
text-align: center;
}
p{
font-size: 24px;
color: #999999;
margin-top:24.4px;
}
}
}

.pickExchange{
width: 100%;
height: 190px;
background: #FFFFFF;
margin-top:24px;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
.exchangeTip{
width: 100%;
height: 100px;
line-height: 100px;
border-top: 0 solid #979797;
padding-left:32px;
padding-right: 30px;
border-top: 1px solid #E5E5E5;
}
.tipContent{
float: left;
width: 620px;
font-size: 30px;
color: #333333;
}
.tipRig{
display: block;
float: right;
width: 14px;
height: 27.1px;
background: url("..\images\more.png") no-repeat center center;
background-size:100% 100%;
margin-top:32.5px;
}
}
.iconExchange{
width: 100%;
height: 390px;
background: #FFFFFF;
margin-top:21px;
.exchangeList{
width:100%;
height: 297px;
padding:31px 38px 28px 32px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content:space-between;
align-items:center;
vertical-align:middle;
text-align: center;
border-top: 1px solid #E5E5E5;
li{
width: 158px;
height: 100%;
}
img{
width: auto;
height: 120px;
display: inline-block;
text-align: center;
}
p{
width: 158px;
height: 66px;
line-height: 33px;
font-size: 24px;
color: #999999;
margin-top:15.1px;
text-align: left;
word-wrap: break-word;
}
.color{
height: 37px;
width: auto;
font-family: "HelveticaNeue-Medium";
font-size: 24px;
color: #FF7F00;
text-align: left;
margin-top: 3px;
}
.color span{
font-weight: bold;
}
}
}
.hotelExchange{
width: 100%;
height:430px;
background: #FFFFFF;
margin-top:21px;
.hotelList{
width:100%;
height: 337px;
padding:18px 29px 38px 30px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content:space-between;
align-items:center;
vertical-align:middle;
text-align: center;
overflow: hidden;
border-top: 1px solid #E5E5E5;
li{
width: 170px;
height: 100%;
}
img{
width: 170px;
height: 130px;
display: inline-block;
text-align: center;
}
p{
width: 170px;
height: 66px;
line-height: 33px;
font-size: 24px;
color: #999999;
margin-top:15px;
text-align: left;
word-wrap: break-word;
}
.use{
height: 33px;
width: 96px;
font-family: "PingFangSC-Light";
font-size: 24px;
color: #FF7F00;
text-align: left;
margin-top:3px;
}
.color{
height: 37px;
width: auto;
font-family: "HelveticaNeue-Medium";
font-size: 24px;
color: #FF7F00;
text-align: left;
}
.color span{
font-weight: bold;
}
}
}
.cover{
position:fixed;
z-index:100;
left:0;
bottom:0;
right:0;
top:0;
}

.loading-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
animation-duration: 1s;
animation-fill-mode: both;
z-index:120;


}
.loading-img {
margin: 0 auto;
width: 108px;
height: 128px;
background: url('../images/penguin.png') no-repeat;
background-size: 100% auto;
}
.loading-animate {
margin: 0 auto;
width: 100px;
height: 40px;
background: url(data:../images/gif;base64,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) no-repeat;
background-size: 100% auto;
}
}


js:

var vm = new Vue({
el: "#app",
data: {
aviation: {},
mall: {},
hotel: {},
isLoading: true,
IsLevel: true

},
beforeMount() {

},
mounted() {
var _this = this;
axios.post('http://10.0.11.95:8201/api/Redeem/getPointExchangeData')
.then(function (response) {
const data = response.data;
if (data && data.code == -1 && data.data) {
_this.IsLevel = data.data.IsLevel;
const { ExchangeAviationModel = {}, ExchangeMallModel = {}, ExchangeHotelModel = {} } = data.data;
_this.aviation = ExchangeAviationModel.RecommedFlight || {};
_this.mall = ExchangeMallModel.RecommendProduct && ExchangeMallModel.RecommendProduct.length ? ExchangeMallModel.RecommendProduct.splice(0, 3) : [];
_this.hotel = ExchangeHotelModel.RecommendHotel && ExchangeHotelModel.RecommendHotel.length ? ExchangeHotelModel.RecommendHotel.splice(0, 3) : [];
}
}).finally((res) => {
this.isLoading = false;
document.getElementById('mainContent').className = ''
})
.catch(function (error) {
});
},
methods: {
even: function (number) {
}
},
computed: {
checkString: function (value) {
if (value.length > 19)
value = value.substring(0, 19) + '...';
return value
}
},
filters: {
intW: function (value) {
value = value.replace(/,/g, '').split(".")[0];
if (value.length > 4) {
value = parseInt(value) / 10000 + "万";
}
else {
value = parseInt(value);
}
return value
},
int: function (value) {
value = value.replace(/,/g, '').split(".")[0];
value = parseInt(value);
return value
},
checkString: function (value) {
if (value.length > 12)
value = value.substring(0, 12) + '...';
return value
}
}
});


效果图:


版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_38747509/article/details/79963329

Vue 2.0 商业案例一则

课程中演示了一套在线四级英语单词的复习系统的架构,从开始构建到路由的设置,vuex的后端同步,前后端分离的案例分析。
  • 2017年01月21日 09:47

Vue.js学习和第一个实例

第一个实例效果图:   1、node.js下载,然后安装。下载地址:链接:http://pan.baidu.com/s/1o7TONhS 密码:fosa 2、下载Vue.js.链接:http...
  • zhuzhu81
  • zhuzhu81
  • 2017-08-26 12:13:33
  • 233

创建第一个vue应用

(1)应用结构 (2)view层-HTML代码 VUE-HelloWorld {{ message }} ...
  • gaoxiaoba
  • gaoxiaoba
  • 2016-09-29 17:55:53
  • 1035

Vue 介绍以及如何使用,配有demo案例

  • 2018年02月25日 11:33
  • 104KB
  • 下载

vue示例及优秀案例

完整的示例: https://auth0.com/blog/build-an-app-with-vuejs/
  • scut1135
  • scut1135
  • 2016-08-18 22:27:08
  • 23863

小白搭建VUE环境、创建我的第一个vue项目(VUE学习第三课)

前言两天没有更新了vue学习进程不是不学了,只是遇到恶心的事情了,之前说过,vue的使用是可以直接导入js到您的html中的,这样是可以使用,但是如果是做vue的项目的时候,那就不行了,因为vue项目...
  • qq_41485414
  • qq_41485414
  • 2018-04-02 15:56:53
  • 85

vue 应用案例全解析

  • 2017年12月11日 14:31
  • 126KB
  • 下载

五个小案例带你学习火热的Vue.js

vue.js背后的理念是提供尽可能简单的API,在视图(HTML)和模型(javascript对象)创建实时的双向绑定机制。正如你在下面的例子中所看到的,这个框架使用起来非常的高效且不影响任何功能。 ...
  • daimomo000
  • daimomo000
  • 2017-01-06 16:17:43
  • 3496

优秀的 Vue框架案例

总链接:https://github.com/vuejs/awesome-vue#component-collections 链接1:https://github.com/TonyLuo/eleme...
  • qq_26422747
  • qq_26422747
  • 2018-01-20 17:44:15
  • 93

如何构建你的第一个 Vue.js 组件

(点击上方公众号,可快速关注)编译:开源中国/凉凉www.oschina.net/translate/build-your-first-vue-js-component记得当那天使用 CakePHP ...
  • VhWfR2u02Q
  • VhWfR2u02Q
  • 2018-01-29 00:00:00
  • 114
收藏助手
不良信息举报
您举报文章:第一个vue案例
举报原因:
原因补充:

(最多只允许输入30个字)