前端开发Vue案例四（豆瓣电影Top250）
摘要： 前端开发工具有哪些 新手前端开发用什么开发工具 前端代码开发工具免费 html5前端开发工具 拖拽 功能：请求豆瓣电影接口，用vue显示数据，jquery做部分效果 vue功能点： 1、请求数据接口，数据绑定……
| 前端开发工具有哪些 |
| 新手前端开发用什么开发工具 |
| 前端代码开发工具免费 |
| html5前端开发工具 拖拽 |
功能：请求豆瓣电影接口，用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/vue-router.min.js”></script>
<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
近期评论