[原创] 一步一步走近Vue(三)

js vue

2017-02-25 1593

编写我们的第一个组件页面代码,实现从服务器端获取数据显示在页面上.

我们在components目录中创建一个BookList.vue文件作为我们的数据显示页面(组件)

在src目录中创建一个services目录用于存放我们读取数据的接口api文件,然后在目录下创建api_book.js作为我们取数据的处理文件

目录结构修改为为图3-1

图3-1

图3-1

路由文件(router/index.js)

修改我们的路由文件,添加新的路由路径信息用于匹配我们的页面

router/index.js


import Vue from 'vue'
import Router from 'vue-router'
import Hello from 'components/Hello'

/////注意:此处的components别名是在webpack配置文件中做过处理的可以直接使用
import BookList from 'components/BookList' //引入列表页展示组件页面

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello
        },
        {
            path: '/book_list', //路由地址路径
            name:'BookList',//路由别名
            component:BookList//使用的页面组件
        }
    ]
})

接口文件(services/book_api.js)

从远程服务器获取数据,使用axios模块

安装方法


npm i axios --save #在终端命令中进行安装


import axios from 'axios'
export default{
    getData(callback){
        axios.get('http://penkuoer.com/api/v1/book/get_books_by_page.json?page=1')
            .then(res=>{
                callback(res.data)
            })
            .catch(err=>{
                console.log(err)
            })
    }
}


页面文件(components/BookList.vue)

修改页面文件,添加简单的ul进行数据的展示


<template>
    <ul>
        <li v-for="item in books">{{item.title}}</li>
    </ul>
</template>
<script>
    import api from '../services/api_book'//引入获取数据的接口
    export default{
        data(){
            return{
                books:[]//定义页面上使用的数据
            }
        },
        created:function(){//组件创建成功后执行
            this.getData()
            console.log('创建完成')
        },
        watch:{
            $route:function(){//路由地址改变后执行
                this.getData()
            }
        },
        methods:{
            getData:function(){
                api.getData(function(res){
                    this.books = res.data
                }.bind(this))
            }
        }
    }
</script>


在浏览器中访问:http://localhost:8080/#/book_list 即可出现以下效果