初次使用vue,并不知道怎么使用vue进行连接api进行前后端的数据交互,在网上查了些资料看到了vue-resource 和 axios 这两种方法,对于前面的那种方法好像都不怎么推荐使用了。后面就选择使用axios进行数据交互。看了些别人写的文章,好多都是和axios文档是一样的,对于我这种并不聪明的人来说,有个实例的话或许更好理解。然后自己就去尝试了一番。
开始使用
首先安装axios
$ npm install axios
或者直接cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
HTML
循环获取menu
<nav id="nav">
<ul>
<li v-for="menu in menus"><a v-bind:href='menu.menuUrl'>{{menu.menuName}}</a></li>
</ul>
</nav>
js代码
new Vue({
el: '#nav',
data: {
menus: []
},
mounted() {
axios.get("http://slogc.cc/api/menus")
.then(response =>{
this.menus = response.data.result;
console.log(response.data.result);
})
}
});
HTML
获取单个属性
<div class="about_me" id="about-me">
<h2>关于我</h2>
<ul>
<i><img v-bind:src='user.userAvatar'></i>
<p ><b>{{user.userDisplayName}}</b>,{{user.userDesc}}</p>
</ul>
</div>
js代码
new Vue({
el: '#about-me',
data: {
user: []
},
mounted() {
axios.get("http://slogc.cc/api/user")
.then(response =>{
this.user = response.data.result;
})
}
});
当然数据肯定是先写好了的,不然是获取不了的哦!
朋友 交换链接吗
@搬瓦工 可以啊
这个比较厉害,可以用halo的api写vue应用
可以把其他主题移植过来 哈哈哈哈 //@RYAN0UP:这个比较厉害,可以用halo的api写vue应用