Vue簡易ケース四(豆弁映画)
17411 ワード
1、要求データインタフェース、データバインド
2、Vue処理データ(フィルタ、計算属性)
3、イベント処理@、修飾子
4、モニタwatch
5、コンポーネント切替(vue-router)
6、移行効果transtion
ダウンロードアドレス:Vue豆弁映画
道は果てしなく広がっていて、私は上下して求めます.不足点はご指摘ください
2、Vue処理データ(フィルタ、計算属性)
3、イベント処理@、修飾子
4、モニタwatch
5、コンポーネント切替(vue-router)
6、移行効果transtion
"utf-8">
"https://unpkg.com/vue/dist/vue.js"</span>>
"js/jquery-1.12.4.min.js"</span>>
"js/vue-router.min.js"</span>>
"stylesheet" type="text/css" href="css/css.css">
"Shortcut Icon" href="favicon.ico" type="image/x-icon">
type</span>=<span class="hljs-string">"text/javascript"</span>>
const baseRequstUrl = <span class="hljs-string">"https://api.douban.com/"</span>;
var App=Vue.component(<span class="hljs-string">"app1"</span>,{
template:`
<div id=<span class="hljs-string">"app"</span> class=<span class="hljs-string">"app"</span>>
<transition name=<span class="hljs-string">"fade"</span> tag=<span class="hljs-string">"div"</span> mode=<span class="hljs-string">"out-in"</span>>
<router-view></router-view>
</transition>
</div>`,
data:<span class="hljs-function"><span class="hljs-title">function</span></span>(){
<span class="hljs-built_in">return</span> {}
},
})
//
var index=Vue.component(<span class="hljs-string">"index"</span>,{
template:
`<div>
<h1> Top250</h1>
<div class=<span class="hljs-string">"nodata"</span> v-if=<span class="hljs-string">"loading"</span>> ...</div>
<div class=<span class="hljs-string">"nodata"</span> v-if=<span class="hljs-string">"err"</span>>{{err}}</div>
<transition-group name=<span class="hljs-string">"fade"</span> tag=<span class="hljs-string">"ul"</span> class=<span class="hljs-string">"movie_list clearfix content"</span> mode=<span class="hljs-string">"out-in"</span>>
<li v-for=<span class="hljs-string">"(item,index) in list"</span> :key=<span class="hljs-string">"item"</span>>
<router-link :to=<span class="hljs-string">"{ path: '/detail/'+item.id}"</span>>
<div class=<span class="hljs-string">"movie_list_img"</span> :style=<span class="hljs-string">"{ backgroundImage:'url('+item.images.large+')'}"</span> :title=<span class="hljs-string">"item.title"</span>></div>
<div class=<span class="hljs-string">"title"</span>>{{item.title}}</div>
<div class=<span class="hljs-string">"original_title"</span>>{{item.original_title}}</div>
<div class=<span class="hljs-string">"original_title"</span> style=<span class="hljs-string">"padding-top:5px"</span>>{{item.genres?item.genres.join(<span class="hljs-string">"/"</span>):<span class="hljs-string">""</span>}}</div>
</router-link>
</li>
</transition-group>
<div class=<span class="hljs-string">"page"</span>>
<ul class=<span class="hljs-string">"pageCon"</span>>
<li v-for=<span class="hljs-string">"i in parseInt(total/count)"</span> :class=<span class="hljs-string">"{active:activeIndex==i}"</span> @click=pageHandle(i,<span class="hljs-variable">$event</span>)>{{i}}</li>
</ul>
</div>
</div>`,
data:<span class="hljs-function"><span class="hljs-title">function</span></span>(){
<span class="hljs-built_in">return</span> {
loading:<span class="hljs-literal">false</span>,
err:null,
list:[],
total:0,
count:20,
start:0,
activeIndex:1,
nodata:<span class="hljs-literal">false</span>
}
},
methods:{
getDate:<span class="hljs-function"><span class="hljs-title">function</span></span>(){
const _this=this;
_this.loading=<span class="hljs-literal">true</span>;
$.ajax({
<span class="hljs-built_in">type</span>: <span class="hljs-string">"get"</span>,
async: <span class="hljs-literal">false</span>,
url: baseRequstUrl+<span class="hljs-string">"v2/movie/top250?count="</span>+_this.count+<span class="hljs-string">"&&start="</span>+_this.start,
dataType: <span class="hljs-string">"jsonp"</span>,
success: <span class="hljs-keyword">function</span>(data){
_this.loading=<span class="hljs-literal">false</span>;
_this.list=data.subjects;
_this.total=data.total;
<span class="hljs-keyword">if</span>(data.total.length==0){this.nodata=<span class="hljs-literal">true</span>}
},
error: <span class="hljs-function"><span class="hljs-title">function</span></span>(){
_this.err=<span class="hljs-string">" ， "</span>
alert(<span class="hljs-string">'fail'</span>);
}
});
},
pageHandle:<span class="hljs-keyword">function</span>(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);
<span class="hljs-keyword">function</span> change_page(eqindex){
<span class="hljs-keyword">if</span>(eqindex<0 )
{
index=0;
}
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(eqindex>=length ){
index=length-1;
}
<span class="hljs-keyword">if</span>(index-5<=0){
leftIndex=0;
}
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(index>length-10)
{
leftIndex=Math.ceil(length-10);
}
<span class="hljs-keyword">else</span>{
leftIndex=index-1;
}
ul.animate({<span class="hljs-string">"left"</span>:<span class="hljs-string">"-"</span>+leftIndex*li.outerWidth()+<span class="hljs-string">"px"</span>},200);
}
}
},
mounted:<span class="hljs-function"><span class="hljs-title">function</span></span>(){
this.getDate()
}
})
var detail=Vue.component(<span class="hljs-string">"detail1"</span>,{
template:`
<div class=<span class="hljs-string">"movie_detail"</span>>
<h1> </h1>
<div class=<span class="hljs-string">"nodata"</span> v-if=<span class="hljs-string">"loading"</span>> ...</div>
<div class=<span class="hljs-string">"detail_con content clearfix"</span> v-else>
<transition-group name=<span class="hljs-string">"fade"</span> tag=<span class="hljs-string">"div"</span> mode=<span class="hljs-string">"out-in"</span>>
<div class=<span class="hljs-string">"item1 clearfix"</span> key=<span class="hljs-string">"detail"</span>>
<div class=<span class="hljs-string">"img_con left"</span>>
<img :src=<span class="hljs-string">"data.images?data.images.large:'' "</span>/>
</div>
<div class=<span class="hljs-string">"movie_con right"</span>>
<h3>{{data.title}}</h3>
<p>{{data.original_title}}</p>
<p> ：{{data.genres?data.genres.join(<span class="hljs-string">"/"</span>):<span class="hljs-string">""</span>}}</p>
<p> ：{{mainPerson}}</p>
<div class=<span class="hljs-string">"level clearfix"</span>>
<div class=<span class="hljs-string">"like"</span> @click.once=<span class="hljs-string">"like=!like"</span>>
<img :src=<span class="hljs-string">"likeImg"</span> class=<span class="hljs-string">"icon"</span>>
{{data.wish_count}}
</div>
<div class=<span class="hljs-string">"like"</span> @click.once=<span class="hljs-string">"yes=!yes"</span>>
<img :src=<span class="hljs-string">"yesImg"</span> class=<span class="hljs-string">"icon"</span>>
{{data.collect_count}}
</div>
</div>
<div class=<span class="hljs-string">"des"</span>>
：{{data.summary}}
</div>
<a :href=<span class="hljs-string">"data.share_url"</span>>
<div class=<span class="hljs-string">"play_con"</span>>
<img src=<span class="hljs-string">"images/play.png"</span> class=<span class="hljs-string">"icon"</span>/>
</div>
</a>
</div>
</div>
</transition-group>
</div>
</div>
`,
data:<span class="hljs-function"><span class="hljs-title">function</span></span>(){
<span class="hljs-built_in">return</span> {
loading:<span class="hljs-literal">false</span>,
err:null,
like:<span class="hljs-literal">false</span>,
yes:<span class="hljs-literal">false</span>,
data:[]
}
},
computed:{
likeImg:<span class="hljs-function"><span class="hljs-title">function</span></span>(){
<span class="hljs-built_in">return</span> this.like?<span class="hljs-string">"images/like_a.png"</span>:<span class="hljs-string">"images/like.png"</span>
},
yesImg:<span class="hljs-function"><span class="hljs-title">function</span></span>(){
<span class="hljs-built_in">return</span> this.yes?<span class="hljs-string">"images/yes_a.png"</span>:<span class="hljs-string">"images/yes.png"</span>
},
mainPerson:<span class="hljs-function"><span class="hljs-title">function</span></span>(){
<span class="hljs-built_in">let</span> arr=[];
<span class="hljs-keyword">if</span>(this.data.casts){
<span class="hljs-keyword">for</span>(<span class="hljs-built_in">let</span> i=0;i<this.data.casts.length;i++)
{
arr.push(this.data.casts[i].name);
}
<span class="hljs-built_in">return</span> arr.join(<span class="hljs-string">" / "</span>)
}
<span class="hljs-keyword">else</span>{
<span class="hljs-built_in">return</span><span class="hljs-string">""</span>
}
}
},
filter:{
},
methods:{
getDate:<span class="hljs-function"><span class="hljs-title">function</span></span>(){
const _this=this;
_this.loading=<span class="hljs-literal">true</span>;
$.ajax({
<span class="hljs-built_in">type</span>: <span class="hljs-string">"get"</span>,
async: <span class="hljs-literal">false</span>,
url: baseRequstUrl+<span class="hljs-string">"v2/movie/subject/"</span>+this.<span class="hljs-variable">$route</span>.params.id,
dataType: <span class="hljs-string">"jsonp"</span>,
success: <span class="hljs-keyword">function</span>(data){
_this.loading=<span class="hljs-literal">false</span>;
_this.data=data;
},
error: <span class="hljs-function"><span class="hljs-title">function</span></span>(){
_this.err=<span class="hljs-string">" ， "</span>;
alert(<span class="hljs-string">'fail'</span>);
}
});
}
},
mounted:<span class="hljs-function"><span class="hljs-title">function</span></span>(){
this.getDate();
}
})
var router= new VueRouter({
routes:[
{
path: <span class="hljs-string">'/'</span>,
component: index
},
{
path: <span class="hljs-string">'/detail/:id'</span>,
name: <span class="hljs-string">"some"</span>,
component: detail
}
]
});
new Vue({
el:<span class="hljs-string">"#app"</span>,
router,
render:(h)=>h(App)
})
ダウンロードアドレス:Vue豆弁映画
道は果てしなく広がっていて、私は上下して求めます.不足点はご指摘ください