Vue.js 与 Ajax(vue-resource)的集成应用
<template>
<div>
<h1>用户列表</h1>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
users: []
};
},
created() {
this.fetchData();
},
methods: {
fetchData() {
this.$http.get('https://jsonplaceholder.typicode.com/users')
.then(response => {
this.users = response.body;
})
.catch(error => {
console.error('There was an error fetching the data: ', error);
});
}
}
};
</script>
这个例子展示了如何在Vue组件中使用created
生命周期钩子来获取数据,并在模板中使用获取到的数据。同时,使用了vue-resource
插件来进行Ajax请求。这是一个简单的应用程序,但它展示了如何将Ajax请求整合到Vue.js应用程序中。
评论已关闭