前端小新手,记录项目中不懂的问题

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;
}
},

正则表达式的领悟:
例子:^dw+@[a-z]+[.]D{2} => /^dw+@[a-z]+[.]D{2}d?$/ 意思是 以数字开头中间是至少一个任意字符@a-z之间至少一个 . 非数字字符至少两个,以数字结尾

? 最多一位 + 最少一位 * 不限位数

原文地址:https://www.cnblogs.com/shejuan/p/7878754.html