04-Json/Ajax/Vue的知识
在这个问题中，你想要了解如何使用JSON、AJAX和Vue.js来构建一个前端应用。这里有一个简单的例子，展示了如何使用Vue.js来处理从一个API获取的JSON数据。
<!DOCTYPE html>
<html>
<head>
<title>Vue AJAX JSON Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<h2>Vue AJAX JSON Example</h2>
<ul>
<li v-for="user in users">{{ user.name }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
users: []
},
created() {
this.fetchData();
},
methods: {
fetchData() {
let vm = this;
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users');
xhr.onload = function() {
if (this.status == 200) {
vm.users = JSON.parse(this.responseText);
}
};
xhr.send();
}
}
});
</script>
</body>
</html>这段代码使用Vue.js创建了一个简单的应用，在created钩子中，它通过AJAX请求获取了一个用户的JSON数据，并将其解析后赋值给了users数组。然后，在模板中，它使用v-for指令来循环显示每个用户的名字。这是一个非常基础的例子，展示了如何将这些技术结合在一起使用。
评论已关闭