什么是vue-resource
Vue 要实现异步加载需要使用到 vue-resource 库,可以选择cdn方式:
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
也可以选择安装,详细可以看github: https://github.com/pagekit/vue-resource
npm 安装vue-resource
1、在根目录下的package.json中声明依赖:
2、命令行:
cnpm install vue-resource
进入到项目目录重新跑一下:cnpm run dev
在项目中使用时,查看一下vue-resource中package.json中name值,再在main.js中注册:
在项目中使用:
先看看现有App.vue中已经写好的代码:
<template>
<div id="app">
<v-header>
</v-header>
<div class="tab">
<div class="tab-item">
<router-link :to="'goods'">商品</router-link>
</div>
<div class="tab-item">
<router-link :to="'ratings'" >评论</router-link>
</div>
<div class="tab-item">
<router-link :to="'seller'" >商家</router-link>
</div>
</div>
<router-view>
</router-view>
</div>
</template>
<script>
import header from 'components/header/header.vue';
export default {
name: 'app',
components: {
'v-header': header
}
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
#app
/* background: gray */
.tab
display: flex
width: 100%
height: 40px
background: white
line-height: 40px
border-bottom: 1px solid rgba(7,17,27,0.1)
.tab-item
flex: 1
text-align: center
& > a
display: block
font-size: 14px
color: rgb(77,85,93)
&.active
color: rgb(240,20,20)
</style>
涉及到的header.vue:
<template>
<div class="header">
我是header
</div>
</template>
<script type="text/ecmascript-6">
export default{
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
.header
width: 100%
height: 134px
background: rgba(0,0,0,0.1)
</style>
效果图:
这些在另一篇中有写到:https://blog.csdn.net/baidu_41327283/article/details/89345625
再看看我们的目的:通过App组件获取商家相关数据,并传递给v-header组件进行渲染。
1、首先我们需要准备好App组件要获取的数据--本地模拟数据(vue+express),将准备好的数据文件data.json放在项目根目录下,data.json内容如下:
之后就可以进行配置,我们的配置目的:实现访问http://localhost:8080/app/seller即可取得data.json文件中seller对应数据。
对于早期的vue在build目录下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-template 中已经去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替,所以 配置本地访问在webpack.dev.conf.js里配置即可。
修改build文件夹下webpack.dev.conf.js:
//使用express框架
const express = require('express');
const app = express();
//获取data.json的数据赋值给appData
var appData = require('../data.json');
var seller = appData.seller;
var goods = appData.goods;
var ratings = appData.ratings;
然后找到devServer,添加以下代码:
before(app){
//定义接口
app.get('/api/seller',function(req,res){
//定义返回值json
res.json({
//表示数据正常
errno: 0,
data:seller
});
});
app.get('/api/goods',function(req,res){
res.json({
errno: 0,
data:goods
});
});
app.get('/api/ratings',function(req,res){
res.json({
errno: 0,
data:ratings
});
});
}
},
修改完需要重新跑一下代码才能看到效果:
更多express框架详情:http://www.expressjs.com.cn/starter/hello-world.html
2、准备好App组件要获取商家相关数据之后,我们需要在App组件中定义一个data用于传递给v-header组件
在vue组件中,data必须是函数,这样每个实例的data有自己的作用域,相互独立,互不影响。详细解释:https://www.cnblogs.com/libin-1/p/6878057.html
修改App.vue:
<script>
import header from 'components/header/header.vue';
const ERR_OK = 0;
export default {
name: 'app',
data () {
return {
seller: {}
};
},
components: {
'v-header': header
}
};
</script>
在每个vue实例创建完成后,将调用created(),此时已经完成了数据初始化,但还未渲染,可以对数据进行修改。我们可以使用created(),在此方法中使用vue-resource获取数据
<script type="text/ecmascript-6">
import header from 'components/header/header.vue';
const ERR_OK = 0;
export default {
name: 'app',
data () {
return {
seller: {}
};
},
created () {
this.$http.get('/api/seller').then((response) => {
response = response.body;
if (response.errno === ERR_OK) {
this.seller = response.data;
console.log(this.seller);
}
});
},
components: {
'v-header': header
}
};
</script>
3、通过上面步骤,我们已经拿到了seller对象,接下来就是将对象通过v-bind属性传递给v-header组件进行渲染
修改App.vue:
<v-header :seller='seller'>
</v-header>
在header.vue中通过props对象接收数据,header.vue:
<template>
<div class="header">
<div class="content-wrapper">
// 输出seller对象中name的值
{{seller.name}}
</div>
<div class="bulletin-wrapper">
</div>
</div>
</template>
<script type="text/ecmascript-6">
export default{
// 通过props属性对象中的seller属性接收数据,类型是对象类型
props: {
seller: {
type: Object
}
}
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
.header
width: 100%
height: 134px
background: rgba(0,0,0,0.1)
</style>