2、Vue处理数据（过滤器、计算属性）
3、事件处理@、修饰符
4、监视器watch
5、组件切换（vue-router）
6、过渡效果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豆瓣电影
路漫漫其修远兮，吾将上下而求索。 不足之处，欢迎指出