談談Vue.js——vue | vue save data
概述上一篇我們介紹瞭如何將$.ajax和Vue.js結合在一起使用,並實現了一個簡單的跨域CURD示例。Vue.js是資料驅動的,這使得我們並不需要直接操作DOM,如果我們不需要使用jQuery的DOM選擇器,就沒有必要引入jQuery。vue-resource是Vue.js的一款外掛,它可以通過XMLHttpRequest或JSONP發起請求並處理響應。也就是說,$.ajax能做的事情,vue-resource外掛一樣也能做到,而且vue-resource的API更為簡潔。另外,vue-resource還提供了非常有用的inteceptor功能,使用inteceptor可以在請求前和請求後附加一些行為,比如使用inteceptor在ajax請...
概述
上一篇我們介紹瞭如何將$.ajax和Vue.js結合在一起使用,並實現了一個簡單的跨域CURD示例。Vue.js是資料驅動的,這使得我們並不需要直接操作DOM,如果我們不需要使用jQuery的DOM選擇器,就沒有必要引入jQuery。vue-resource是Vue.js的一款外掛,它可以通過XMLHttpRequest或JSONP發起請求並處理響應。也就是說,$.ajax能做的事情,vue-resource外掛一樣也能做到,而且vue-resource的API更為簡潔。另外,vue-resource還提供了非常有用的inteceptor功能,使用inteceptor可以在請求前和請求後附加一些行為,比如使用inteceptor在ajax請求時顯示loading介面。
本文的主要內容如下:
介紹vue-resource的特點介紹vue-resource的基本使用方法基於this.$http的增刪查改示例基於this.$resource的增刪查改示例基於inteceptor實現請求等待時的loading畫面基於inteceptor實現請求錯誤時的提示畫面
本文11個示例的原始碼:http://xiazai.jb51.net/201701/yuanma/vue-resource_jb51.rar[1]
vue-resource特點
vue-resource外掛具有以下特點:
1. 體積小
vue-resource非常小巧,在壓縮以後只有大約12KB,服務端啟用gzip壓縮後只有4.5KB大小,這遠比jQuery的體積要小得多。
2. 支援主流的瀏覽器
和Vue.js一樣,vue-resource除了不支援IE 9以下的瀏覽器,其他主流的瀏覽器都支援。
3. 支援Promise API和URI Templates
Promise是ES6的特性,Promise的中文含義為“先知”,Promise物件用於非同步計算。
URI Templates表示URI模板,有些類似於ASP.NET MVC的路由模板。
4. 支援攔截器
攔截器是全域性的,攔截器可以在請求傳送前和傳送請求後做一些處理。...