vue項目中需注意的點(一)


一、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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM