上图:
功能: 请求豆瓣电影接口, 用 vue 显示数据, jQuery 做部分效果
Vue 功能点:
1, 请求数据接口, 数据绑定
2,Vue 处理数据 (过滤器, 计算属性)
3, 事件处理 @, 修饰符
4, 监视器 watch
5, 组件切换 (vue-router)
6, 过渡效果 transtion
非 vue 功能点:
1, 数据分页
2,Json 处理
代码奉上
html 代码
- <!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>
附件在此 =>
来源: http://www.qdfuns.com/article/18184/43239f89ec52d48011ce0f039613f8b2.html