Vue簡易案例四（豆瓣電影）
二、Vue處理數據（過濾器、計算屬性）
三、事件處理@、修飾符
四、監視器watch
五、組件切換（vue-router）
六、過渡效果transtion
<!DOCTYPE html>
<html>
<head>
<title>組件切換練習</title>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/vue-router.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/css.css">
<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">
<base target="_blank" />
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
const baseRequstUrl = "https://api.douban.com/";
var App=Vue.component("app1",{
template:`
<div id="app" class="app">
<transition name="fade" tag="div" mode="out-in">
<router-view></router-view>
</transition>
</div>`,
data:function(){
return {}
},
})
//列表
var index=Vue.component("index",{
template:
`<div>
<h1>豆瓣Top250</h1>
<div class="nodata" v-if="loading">加載中...</div>
<div class="nodata" v-if="err">{{err}}</div>
<transition-group name="fade" tag="ul" class="movie_list clearfix content" mode="out-in">
<li v-for="(item,index) in list" :key="item">
<router-link :to="{ path: '/detail/'+item.id}">
<div class="movie_list_img" :style="{ backgroundImage:'url('+item.images.large+')'}" :title="item.title"></div>
<div class="title">{{item.title}}</div>
<div class="original_title">{{item.original_title}}</div>
<div class="original_title" style="padding-top:5px">{{item.genres?item.genres.join("/"):""}}</div>
</router-link>
</li>
</transition-group>
<div class="page">
<ul class="pageCon">
<li v-for="i in parseInt(total/count)" :class="{active:activeIndex==i}" @click=pageHandle(i,$event)>{{i}}</li>
</ul>
</div>
</div>`,
data:function(){
return {
loading:false,
err:null,
list:[],
total:0,
count:20,
start:0,
activeIndex:1,
nodata:false
}
},
methods:{
getDate:function(){
const _this=this;
_this.loading=true;
$.ajax({
type: "get",
async: false,
url: baseRequstUrl+"v2/movie/top250?count="+_this.count+"&&start="+_this.start,
dataType: "jsonp",
success: function(data){
_this.loading=false;
_this.list=data.subjects;
_this.total=data.total;
if(data.total.length==0){this.nodata=true}
},
error: function(){
_this.err="加載失敗，請刷新重試"
alert('fail');
}
});
},
pageHandle:function(index,obj){
this.list=[];
this.activeIndex=index;
this.start=(index-1)*this.count+1;
this.getDate();
var ul=$(obj.path[1]);
var li=$(obj.path[0]);
var length=parseInt(this.total/this.count);
change_page(index-1);
function change_page(eqindex){
if(eqindex<0 )
{
index=0;
}
else if(eqindex>=length ){
index=length-1;
}
if(index-5<=0){
leftIndex=0;
}
else if(index>length-10)
{
leftIndex=Math.ceil(length-10);
}
else{
leftIndex=index-1;
}
ul.animate({"left":"-"+leftIndex*li.outerWidth()+"px"},200);
}
}
},
mounted:function(){
this.getDate()
}
})
var detail=Vue.component("detail1",{
template:`
<div class="movie_detail">
<h1>電影詳情</h1>
<div class="nodata" v-if="loading">正在加載...</div>
<div class="detail_con content clearfix" v-else>
<transition-group name="fade" tag="div" mode="out-in">
<div class="item1 clearfix" key="detail">
<div class="img_con left">
<img :src="data.images?data.images.large:'' "/>
</div>
<div class="movie_con right">
<h3>{{data.title}}</h3>
<p>{{data.original_title}}</p>
<p>分類：{{data.genres?data.genres.join("/"):""}}</p>
<p>主演：{{mainPerson}}</p>
<div class="level clearfix">
<div class="like" @click.once="like=!like">
<img :src="likeImg" class="icon">
喜歡{{data.wish_count}}
</div>
<div class="like" @click.once="yes=!yes">
<img :src="yesImg" class="icon">
人氣{{data.collect_count}}
</div>
</div>
<div class="des">
簡介：{{data.summary}}
</div>
<a :href="data.share_url">
<div class="play_con">
<img src="images/play.png" class="icon"/>
當即播放
</div>
</a>
</div>
</div>
</transition-group>
</div>
</div>
`,
data:function(){
return {
loading:false,
err:null,
like:false,
yes:false,
data:[]
}
},
computed:{
likeImg:function(){
return this.like?"images/like_a.png":"images/like.png"
},
yesImg:function(){
return this.yes?"images/yes_a.png":"images/yes.png"
},
mainPerson:function(){
let arr=[];
if(this.data.casts){
for(let i=0;i<this.data.casts.length;i++)
{
arr.push(this.data.casts[i].name);
}
return arr.join(" / ")
}
else{
return""
}
}
},
filter:{
},
methods:{
getDate:function(){
const _this=this;
_this.loading=true;
$.ajax({
type: "get",
async: false,
url: baseRequstUrl+"v2/movie/subject/"+this.$route.params.id,
dataType: "jsonp",
success: function(data){
_this.loading=false;
_this.data=data;
},
error: function(){
_this.err="加載失敗，請刷新重試";
alert('fail');
}
});
}
},
mounted:function(){
this.getDate();
}
})
var router= new VueRouter({
routes:[
{
path: '/',
component: index
},
{
path: '/detail/:id',
name: "some",
component: detail
}
]
});
new Vue({
el:"#app",
router,
render:(h)=>h(App)
})
</script>
</body>
</html>
複製代碼
下載地址：Vue豆瓣電影javascript
路漫漫其修遠兮，吾將上下而求索。 不足之處，歡迎指出php
相關文章
- 1. vuex案例-豆瓣接口
- 更多相關文章...
- • XSD 簡易元素 - XML Schema 教程
- • SVG 陰影 - SVG 教程
- • Git可視化極簡易教程 — Git GUI使用方法
- • RxJava操作符（四）Combining
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
