vue-resource(Ajax)
<div id="app"> <input type="button" value="get請求" @click="getInfo"> <input type="button" value="post請求" @click="postInfo"> <input type="button" value="jsonp請求" @click="jsonpInfo"> </div> <script> // 建立 Vue 例項,得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: { getInfo() { // 發起get請求 // 當發起get請求之後, 通過 .then 來設定成功的回撥函式 this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) { // 通過 result.body 拿到伺服器返回的成功的資料 console.log(result) }) }, postInfo() { // 發起 post 請求 application/x-wwww-form-urlencoded // 手動發起的 Post 請求,預設沒有表單格式,所以,有的伺服器處理不了 // 通過 post 方法的第三個引數, { emulateJSON: true } 設定 提交的內容型別 為 普通表單資料格式 this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => { console.log(result.body) }) }, jsonpInfo() { // 發起JSONP 請求 this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => { console.log(result.body) }) } } }); </script>
也可以在js的最初來定義基於全域性的http:
Vue.http.get('地址',[options(其他選項開關)]).then(設定回撥)(成功函式,失敗函式);
Vue.http.post('地址',[body],[options]).then(function(){...},function(){....})
相關推薦
vue-resource(Ajax)
<div id="app"> <input type="button" value="get請求" @click="getInfo"> <input type="button" value="post請求" @click="pos
從零開始學 Web 之 Vue.js(四)Vue的Ajax請求和跨域
在線安裝 配置 name php文件 splay .json alert 參考 1.0 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端
Vue第十三天(AJAX)
準備步驟如同第一天 程式碼:(測試注意事項:js中的程式碼依次開啟測試,不可全部開啟,會報錯) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g
用vue構建專案筆記5(在vue-cli專案中引用公用方法)(vue resource統一處理)
之前用cli腳手架構建的專案廢了,又讓我改成jq了,悲劇,這次這個專案用純vue實現了,哈哈。下面介紹如何引入全域性方法供每個元件都能呼叫。 1.建立一個js檔案,我起的名字叫做“common.js”,放在assets>js下。 2.在common.js檔案中寫入公用
vue系列(一)子組件和父組件
top parent sage too msg pro 工具 light java 父組件傳遞數據到子組件props 父組件 <template> <div class="main"> <div class="top">
阿賈克斯(AJAX)
doc lean .get extend man sta 不為 cut manage AJAX :Asynchronous JavaScript and XML 異步的javascript 和xml 優點 : 在不重新加載整個頁面的情況下,可以與服務器交換
Vue.js(一)了解Vue
code 視圖 模式 data img app 了解 eight 整合 什麽是Vue? 1.Vue.js是一個構建數據驅動的web界面的庫。類似於Angularjs,在技術上,他重點集中在MVVM模式的View層,非常容易學習,非常容易和其他的庫或已有的項目整合。 2.Vu
Python自動化開發學習24-Django中(AJAX)
python django 講師的博客地址:http://www.cnblogs.com/wupeiqi/articles/5703697.html 。號稱是AJAX全套 原生Ajax Ajax主要就是使用 XmlHttpRequest 對象來完成請求的操作,該對象在主流瀏覽器中均存在(除了早期的IE
vue入門(一)
通過 這樣的 裏的 nbsp 基本 版本 技術分享 表示 之前 通過JS引用vue就不說了,重點說一下使用npm搭建vue腳手架. (以下是windows系統下的操作,win7+) npm是個命令行工具,在搭建vue腳手架之前首先要安裝nodeJS,
Vue.js(五)列表渲染 v-for
但是 todo dex length ref 循環 模式 ssa 默認 v-for="item in items " // 數組更新檢測 // 對象更改檢測註意事項 // 顯示過濾 / 排序結果 // 一段取值範圍的 v-for // v-for
vue-router(2)
efault title name blank === color direct class 獲取 1. 動態路由匹配 /home/123456 ---> resFul ---> params /home?room_id=123456 ---> quer
從零開始學 Web 之 Vue.js(三)Vue實例的生命周期
報錯 web 前端 cnblogs 前端 eth code vue 公眾 des 大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公眾號:Web前端之巔
Vue原理(一)——初始化data屬性
插入 一個 date pda 屬性 data屬性 bject 個數 [] let app = new Vue({ data: { text: "text", text2: "text2" } }) 第一步: 使用observe
Vue系列(1):單頁面應用程序
str from logs 引擎 每次 應用 跳轉方式 新手上路 為什麽 前言:關於頁面上的知識點,如有侵權,請看 這裏 。 關鍵詞:SPA、單個 HTML 文件、全靠 JS 操作、Virtual DOM、hash/history api 路由跳轉、ajax 響應、按需
Vue基礎(ES6)
ima als 3.1 多少 查看 當下 通過 tail fin 起步 1.紮實的HTML/CSS/Javascript基本功,這是前置條件。 2.不要用任何的構建項目工具,只用最簡單的<script>,把教程裏的例子模仿一遍,理解用法。不推薦上來
vue.js路由vue-router(一)——簡單路由基礎
styles mounted num 前言 vue.js ren main.c -s col 前言 vue.js除了擁有組件開發體系之外,還有自己的路由vue-router。在沒有使用路由之前,我們頁面的跳轉要麽是後臺進行管控,要麽是用a標簽寫鏈接。使用vue-rout
Vue.js(1)- 指令和修飾符
<template> <div v-click v-text="msg" v-html="msg" :class="['box1',flag ? 'box2': '']">{{msg}}</div> <p @click="Func(arg)"
vue--過濾器(filter)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-
Vue錯誤(1)
錯誤提示: Failed to compile. 部分程式碼等等 Component template should contain exactly one root element. If you are using v-if on multiple element
Vue.js(2)- 過濾器
概念:過濾器本質上就是一個函式,可被用作一些常見的文字格式化。 過濾器只可以用在兩個地方:mustache 插值表示式和 v-bind 表示式。 過濾器應該被新增在 JavaScript 表示式的尾部,由“管道”符指示; 全域性過濾器 <div id=