Vue-Axios
Vue-Axios
什麼是Axios
Axios是一個開源的可以用在瀏覽器端和NodeJs的非同步通訊框架，她的主要作用就是實現AJAX非同步通訊，其功能特點如下：
- 從瀏覽器中創建XMLHttpRequests從node.js創建http請求
- 支援Promise API[JS中鏈式編程]
- 攔截請求和響應
- 轉換請求數據和響應數據
- 取消請求
- 自動轉換JSON數據
- 客戶端支援防禦XSRF（跨站請求偽造）
GitHub：//github.com/gxios/axios
中文文檔：//www.axios-js.com/
第一個Axios實例
1.創建data.json
{
"name":"MoYu",
"url":"//www.moyuzc.cn/",
"page":1,
"isNonProfit":true,
"address": {
"street":"含光門",
"city":"陝西西安",
"country":"中國"
},
"links":[
{
"name": "bilibili",
"url": "//space.bilibili.com/84493733"
},
{
"name": "MoYu",
"url": "//moyu-zc.gitee.io/"
}
]
}
2.Vue綁定
<div id="vue"></div>
<script src="//cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="//unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#vue'
});
</script>
3.鉤子函數
<script type="text/javascript">
var vm = new Vue({
el:'#vue',
mounted(){ //鉤子函數 鏈式編程 ES6新特性
axios.get('../data.json').then(response=>(console.log(this.info=response.data)));
}
});
</script>
成功獲取
注意：response=> 該表達式為ES6新特性，如果出錯，可以這樣解決：
4.頁面顯示資訊
<div id="vue">
<div>
{{info.name}}
<br>
{{info.address}}
</div>
</div>
<script src="//cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="//unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#vue',
data(){
return{
//請求的返回參數，必須和 json 字元串一樣
info:{
name: null,
address: {
street: null,
city: null,
country: null
},
}
}
},
mounted(){ //鉤子函數 鏈式編程 ES6新特性
axios.get('../data.json').then(response=>(console.log(this.info=response.data)));
}
});
</script>
Vue-呼吸問題
在剛進入頁面時，可能會出現如下情況：
顯示的是html文件中的資訊，而不是調用出的文字
過一會才會變為調用出的文字，這個就是Vue呼吸問題
解決方法
<div id="vue" v-clock>
</div>
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--解決閃爍問題-->
<style>
[v-clock]{
display: none;
}
</style>
</head>
這個就可以啦
5.a標籤綁定
<div id="vue" v-clock>
<div>
{{info.name}}
<br>
{{info.address}}
<br>
<a v-bind:href="info.url">點擊</a>
</div>
</div>
data(){
return{
//請求的返回參數，必須和 json 字元串一樣
info:{
name: null,
address: {
street: null,
city: null,
country: null
},
url: null
}
}
},
點擊 a 標籤，就會進入你在 data.json ，設置好的 url
個人部落格為：
MoYu’s Github Blog
MoYu’s Gitee Blog
