前端小新手，記錄項目中不懂的問題

2017-11-9:

1.對於vue配置路由的時候，應該要想着性能，所以採用懶加載（做用:按需加載，提升性能）
例子：
舊的:
import index from '@/pages/index'
export default new Router ({
{ path: name: 'index',component: index,},
})
新的：（爲了方便管理，拆分開來寫）

const index = r => require.ensure([], () => r(require('../pages/index.vue')), 'index') //就至關因而 import index from '@/pages/index'

const routes = [{path:'/index',name:'index',component,meta:{XXX:'sss',uid:'0'}]

const router = new Routet({routes,linkActiveClass: "my-active"})

export default router

或者是另一種寫法：{path：‘/’,component:resolve =>require(['@components/index.vue'],resolve)

2.對於vue搭建好了環境以後，
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-touch-fullscreen" content="yes">
<meta name=full-screen content=yes>
<meta name=browsermode content=application>
<meta name=x5-orientation content=portrait>
<meta name=x5-fullscreen content=true>
<meta name=x5-page-mode content=app>
<meta name="format-detection" content="telephone=no, email=no">
<!--清除緩存-->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

若想使100px = 1rem ;
則須要加上
<script type="text/javascript"></script>
<script>
(function(d, c, e) {
var f = d.documentElement,
b = "orientationchange" in c ? "orientationchange" : "resize",
a = function() {
var g = f.clientWidth;
if (g >= 750) {
g = 750
}
if (g === e) {
return
}
f.style.fontSize = 200 * (g / 750) + "px"
};
if (d.addEventListener === e) {
return
}
c.addEventListener(b, a, false);
d.addEventListener("DOMContentLoaded", a, false)
})(document, window);
</script>

2017-11-10

1.對於公共組件的使用------如使用公共的彈出選擇框

父組件使用子組件： <all-select ref="auditor" :selectDate="auditor" :parameter="'auditor'" :content="dateSlots3" @select="selectAuditor"></all-select>
子組件：<mt-picker value-key="name" :slots="slots" @change="onValChange"></mt-picker>

父組件傳給子組件的值，子組件用props接收
//content爲選項內容 selectDate爲已經選好的值 parameter爲賦予給上層的值
props:['content','selectDate','parameter'],

子組件經過$emit事件去觸發父組件，向父組件傳值
this.$emit('select',{value:this.value,type:this.parameter})

父組件經過@select="selectAuditor" selectAuditor（）{} 這個方法去接收子組件傳遞給父組件的值

2017-11-14

//判斷是否爲安卓或者蘋果
isiOS(){
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
return isiOS;
},
//處理聚焦 軟鍵盤遮擋input 注意 此處的id 是可顯示區域
fouces(e,id){
if(!this.isiOS()){
setTimeout(function(){
document.getElementById(id).scrollIntoView();
document.getElementById(id).scrollIntoViewIfNeeded();
},200)
}
},

2017-11-17

給與點擊事件添加事件，讓它不可點擊

// .noEdit_binding.msgs{
// .my_jdsearch,.entrance_fist{
// pointer-events: none;
// }
// }

總結 css 樣式的綁定 :class="{noEdit_binding:apimsg.name=='未綁定'}"
事件的綁定 @click="apimsg.name=='未綁定'?prompt($event):enterSearch(true)" placeholder="項目名稱、項目編號、甲方全稱" ref="MainsearchVal" id="MainsearchVal" class="mint-searchbar-core" @keyup.enter="apimsg.name=='未綁定'?'':_searchDate()"

判斷選擇的圖片是什麼類型
if (fileObj[i].type != 'image/png' && fileObj[i].type != 'image/gif' && fileObj[i].type != 'image/jpeg') {
isUpdate =false;
break;
}else{
Indicator.open({
text: '加載中...',
spinnerType: 'fading-circle'
});

事件 @blur="contenteditable($event,index)"
contenteditable(event,index){
if(event.target.innerHTML!=""){
// this.project_payment_line_ids[index].remark="<div>"+event.target.innerHTML+"</div>";
this.project_payment_line_ids[index].remark=event.target.innerText;
}
},

正則表達式的領悟：
例子：^\d\w+@[a-z]+[.]\D{2} => /^\d\w+@[a-z]+[.]\D{2}\d？$/ 意思是 以數字開頭中間是至少一個任意字符@a-z之間至少一個 . 非數字字符至少兩個,以數字結尾

？ 最多一位 + 最少一位 * 不限位數