1. 样式绑定
<div id="id1" :style="style1">演示 v-bind</div>
<div class="c" :style="[cls?'a':'b']">演示 v-bind</div>
const style1 = {
color: 'red',
border: '1px solid #ccc'
}
<style scoped lang="less">
.a {
color: red;
}
.b {
border: 1px solid #ccc;
}
.c {
background-color: aqua;
}
</style>
2. VUE 表单input 框使用@blur事件
<el-input
v-model="formData.certificateNumber"
placeholder="请输入XXX"
clearable
@blur="haveCertificateNumber($event)"
/>
async haveCertificateNumber(val) {
val = val.target.value;
},
@blur(失焦)
输入框失去焦点时触发
输入框在输入完成、移到其他地方时进行验证时,需要用到该事件,用此事件进行绑定验证方法即可
@change先于@blur@change (改变)
@change=“((val)=>{change(val, index)})”
输入框里面内容发生改变且失去焦点时触发
@click (点击)
@click:可清空的单选模式下用户点击清空按钮时触发
3. 定义类型时的命名规范
规范:大写I开头,每个单词首字母都大写,如果类型是数组,后面加上Item,如:
export interface IOperateInfoItem {
action: string
name: string
createTime: string
type: string
docnumber: number
}
4. 注释 /** */ 如果其他地方用到这个变量鼠标放上去有注释提示
5. 关于px与rem之间的自动转化(使用postcss-pxtorem)
6. 下划线模式和命名约定
通常变量前加下划线表示私有变量
函数名前加下划线表示私有函数。
- 单前导下划线:_var
- 单末尾下划线:var_
- 双前导下划线:__var
- 双前导和末尾下划线:var
- 单下划线:_