Vue

Vue组件与异步获取数据的方式

Vue定义组件,异步获取数据

Posted by wang chong on March 31, 2019

定义一个组件

声明组件使用Vue.component方法,这个方法有两个参数,一个是定义组件的名字,另一个是一个对象,相当于实例化Vue所传入的对象。

Vue.component('my-app',{
    template : "<h1>Hello Vue</h1>"  //template 是组件模板
})

上述就定义好了一个组件,使用直接在把<my-app></my-app>放在html中就可以。

<my-app></my-app>

上面这种定义组件的方式,template属性中写的是字符串,并不能很好的书写,所以可以卸载template元素里面。template元素不会被html解析。

<my-app></my-app>
<template id="template">
    <h1> Hello Vue</h1>
<template>
<script>
Vue.component('my-app',{
    template : "#template"  //这里写template元素的id
})
</script>

这两个是相同的效果,只是第二种相对于第一种写html比较方便。

Vue异步获取数据的方式

异步获取数据最直接的方式就是我们最接地气的jQuery,引入jQuery使用ajax异步获取数据。

Vue有一个叫做vue-resourece,可以用来帮助我们发送请求。

脚手架安装:npm install vue-resource –save

cdn :https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js

使用插件 Vue.use(Resource);

使用方式:

在vue实例中使用this.$http.methods就可以获取,methods是http的方法。

例如:http://jsonplaceholder.typicode.com/posts 来请求一个这个接口

const vm = new Vue({
    el : "#app",
    data : {
        datas : [],
    }
    methods : {
        requests(){
            const _self = this;
            this.$http.get("http://jsonplaceholder.typicode.com/posts").then(res=>res.jons()).then(data => {
                _self.datas = data;
            }).catch(()=>_self.datas = []);
        }
    }
})

其他

还有一个插件是vue-async-data也是vue异步获取的插件。对于我个人来说我还是喜欢使用原生API的fetch,因为现在浏览器对fetch支持的很好,使用node的时候,服务端有node-fetch前后,node-fetch是服务端的fetch,二者API相同,使用起来比较顺手。