axios 的显著优势在于 代码量较 fetch 少了很多
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue fetch</title>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Fetch请求</h1>
<div id="vue-app">
<!-- post 请求 -->
<form @submit.prevent="submit">
<input type="text" v-model="todo.title" />
<input type="checkbox" v-model="todo.completed" />
<input type="submit" value="提交" />
</form>
<ul>
<li v-for="todo in todos">
<h1>{{todo.title}}</h1>
<p v-if="todo.completed">{{todo.completed}}</p>
</li>
</ul>
</div>
<script src="./app.js"></script>
</body>
</html>app.js
const app = new Vue({
el: "#vue-app",
data() {
return {
todos: [],
todo: {
title: '',
completed: false
}
}
},
mounted() {
// axios get 请求接口
axios.get('http://jsonplaceholder.typicode.com/todos')
.then(res => {
this.todos = res.data
})
},
computed: {},
methods: {
//axios post 请求接口
submit() {
axios.post('http://jsonplaceholder.typicode.com/todos', this.todo)
.then(res => {
console.log(res.data);
this.todos.unshift(res.data);
})
}
}
})
754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
