web前端学习/工作笔记(二)

  1. p文本换行
  • display: block; word-wrap: break-word;
  1. 样式中加变量:
  • :style是对象,里面属性是键值对
    :style="{‘background-image’:‘url(’+item.img+’)’,background:‘red’}"
  1. 第一个元素与父容器之间的间距用padding而不用margin,margin会撑开

  2. 当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度

  3. 样式里数值计算

  • height: calc(100% - 60px);
  1. 设置div背景颜色透明度,内部元素不透明:
  • .demo{  background-color:rgba(255,255,255,0.15) }
  1. 商品列表布局换行
    display: flex; flex-wrap: wrap;

  2. class三元表达式

  • :class="item.state1 ? ‘note’:‘note-no’"
    非三元::class=’{bg:index
    BoxSelectedIndex}’

  • 条件判断,:class="[right_con_left,{‘fold’:!showItemTree}]

2018.11.26
18. 占位符

  • == 普通的英文半角空格   ==   ==   == no-break space (普通的英文半角空格但不换行)   == 中文全角空格 (一个中文宽度)   ==   == en空格 (半个中文宽度)   ==   == em空格 (一个中文宽度)   == 四分之一em空格 (四分之一中文宽度) 相比平时的空格( ),nbsp拥有不间断(non-breaking)特性。即连续的nbsp会在同一行内显示。即使有100个连续的nbsp,浏览器也不会把它们拆成两行。
  1. 水平垂直居中
    display: flex; align-items: center;//垂直居中
    justify-content: center;//水平居中
    or
    display: flex; flex-direction: column; text-align: center;//水平居中
    justify-content: center//垂直居中;
  2. 不换行
  • li、a、span行内强制不换行;white-space:nowrap;
  1. ctrl+alt+左右键 代码位置定位

  2. 判断对象为空
    Object.keys(对象).length==0

  3. 代码保持同步:

  • _this.$nextTick(()=>{
    _this.addShortcutsKey(‘enter’, () => {
    _this.closeMyMessageBox()
    })
  1. 解构赋值为浅拷贝
  • let obj = { }; let { …x } = obj;
    深拷贝:JSON.parse(JSON.stringify(origin));
  1. v-model
  • v-model.trim 将用户输入的前后的空格去掉
  • v-model.number 将用户输入的字符串转换成number
  1. radio双向绑定用
  • :checked而不用v-model
  1. mixin得声明在调用之前
  2. 一个列表删除另一个列表中的同一项,先找到index,再用splice(index,1)
  • var index = this.list.findIndex(function(item){ //根据item中的id属性来判断这个item是否是上面id中 //对应的数据,如果是返回一个true ,否返回false,继续下面的一条数据的遍历,以此类推 return item.id ==id; //如果返回true,那么findIndex方法会将这个item对应的id返回到外面接受 });
  1. 弹框代码模板
  • showCombinedMedicationFun(){
    //todo
    let _this=this
    _this.showCombinedMedication=true
    _this.$nextTick(()=>{
    _this.addShortcutsKey(‘enter’, () => {
    _this.confirmCombinedMedication()
    })
    })
    },
  • confirmCombinedMedication(){
    let _this=this
    _this.closeCombinedMedication()
    },
  • closeCombinedMedication(){
    let _this=this
    _this.showCombinedMedication=false
    },
  1. 数组复制:
    let aa=[1,2,3]
    Let bb=[…] 会覆盖bb
发布了57 篇原创文章 · 获赞 47 · 访问量 9万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章