router构建一个简单的单页应用（附源码）(2)

<template> <div> <h1>{{ msg }}</h1> <ul> <li v-for="article in articles"> <div><img v-bind:src="article.images.small"/></div> <div> <div>{{article.title}}</div> <div>年份：{{article.year}}</div> <div>类型：{{article.subtype}}</div> </div> </li> </ul> </div> </template> <script> // mounted 钩子函数 这里去请求豆瓣数据 export default { name: 'home', data () { return { msg: '电影列表', articles:[] } }, created:function(){ //这里mounted和created生命周期函数区别 this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=10', {}, { headers: { }, emulateJSON: true }).then(function(response) { // 这里是处理正确的回调 console.log(response); this.articles = response.data.subjects // this.articles = response.data["subjects"] 也可以 }, function(response) { // 这里是处理错误的回调 console.log(response) }); } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> ul{ list-style: none; margin: 0; padding: 0; } ul li{ border-bottom: 1px solid #999; padding: 10px 0; } .inl-block{ display: inline-block; } .m-img{ } .m-content{ margin-left: 20px; } </style>

3、最后我们运行npm run dev命令查看页面显示效果

OK，可以看到我们的数据成功加载出来了，可以点击左侧的导航来进行导航内容切换

源码下载

总结

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章: