找回密码
当前位置：前端开发者 > Vue.js > 正文

前端开发Vue案例四（豆瓣电影Top250）

2018-11-27 22:22:53 分类：Vue.js 阅读(114) 评论(0)
前端开发工具有哪些
新手前端开发用什么开发工具
前端代码开发工具免费
html5前端开发工具 拖拽

功能：请求豆瓣电影接口，用vue显示数据，jquery做部分效果

vue功能点：
1、请求数据接口，数据绑定
2、vue处理数据（过滤器、计算属性）
3、事件处理@、修饰符
4、监视器watch
5、组件切换（vue-router）
6、过渡效果transtion

非vue功能点：
1、数据分页
2、Json处理

代码奉上
html 代码

<!DOCTYPE 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>
谷歌浏览器的前端开发工具
wps前端开发工具
前端界面开发工具
前端h5游戏开发工具
» 本文来自：前端开发者 » 《前端开发Vue案例四（豆瓣电影Top250）》
» 本文链接地址：https://www.rokub.com/6807.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论