一、vue-source【全局】配置需要注意的問題
Vue.http.options.emulateJSON = true; Vue.http.options.emulateHTTP = true;
1. emulateHTTP
emulateHTTP(布爾值)。默認值為:false,設置值為true時,PUT, PATCH和DELETE等請求會以普通的POST方法發出,並且HTTP頭信息的X-HTTP-Method-Override屬性會設置為實際的HTTP方法。。
2. emulateJSON
emulateJSON(布爾值)。默認值為:false,設置值為true時,數據(無論是get還是post)都會以formdata(表單提交方式)的形式發送數據。所以我們在給后台傳遞參數的時候需要加JSON.stringify(參數)
處理一下。
如果服務器無法處理編碼為application/json的請求,可以啟用emulateJSON選項。啟用之后,請求會以application/x-www-form-urlencoded為MIME type,就像普通的HTML表單一樣。
二、正則轉義
Ps:需求在使用富文本編輯器(我使用的是Ueditor)時,傳到后台數據需要對“雙引號”進行轉義
str.replace(/\"/g,'\\"');//進行轉義然后轉給后台 str.replace(/\\"/g,'"');//從后台拿到的數據進行反轉義
三、混合開發中的異步部請求處理
混合開發中我們會用到安卓或者ios同事提供的jsBridge,來調用原生事件。但我們在請求后台的接口中需要把“這個參數”傳遞過去,所以我們就需要用異步處理。
import jsBridge from 'common/js/jsbridge'; // 引入jsBridge jsBridge.getHeader().then((data)=>{//成功處理函數},(err)=>{//失敗處理函數});//注意此處的“getHeader()”函數不一定和我的一樣名稱。這個是別小伙伴(安卓或IOS)定的
四、vue腳手架(vue-cli)生成項目渲染注意點
在用vue生成的項目中,,針對index.html、app.vue、main.js三者之間關系
項目目錄
|----src |--App.vue |--main.js |----index.html
簡要說明
mian.js將項目的依賴關系(包括vue,vue-router,axios,mintui等等插件)引入,其中也包括App.vue(主要展示區)文件,渲染到index.html中。這其中有幾種配合方案千萬不要混淆,否則效果會出不來。
第一種寫法
index.html中:
<div id="app" style="width:100%;height: 100%;"></div>
main.js中:
new Vue({ template:<App/>, components: {App} }).$mount('#app');
第二種寫法
index.html中:
<div id="app" style="width:100%;height: 100%;"> <router-view></router-view> </div>
main.js中:
new Vue({
components: {App}
}).$mount('#app');
第三種寫法
index.html中:
<div id="app" style="width:100%;height: 100%;"> <App></App> </div>
main.js中:
new Vue({
components: {App}
}).$mount('#app');
第二種寫法文件內容
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>h5</title> </head> <body> <div id="app" style="width:100%;height: 100%;"> <router-view></router-view> </div> </body> </html>
mian.js
import Vue from 'vue'; import App from './App'; new Vue({ components: {App} }).$mount('#app');
App.vue
<template> <div class="app-wrapper"> <router-view></router-view> </div> </template> <script> export default {}; </script> <style lang='scss' rel="stylesheet/scss" type="text/css" scoped> .app-wrapper{ width:100%; height:100%; } </style>