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

11. p文本换行

• display: block; word-wrap: break-word;

12. 样式中加变量：

• :style是对象，里面属性是键值对
  :style="{‘background-image’:‘url(’+item.img+’)’,background:‘red’}"

12. 第一个元素与父容器之间的间距用padding而不用margin，margin会撑开

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

14. 样式里数值计算

• height: calc(100% - 60px);

15. 设置div背景颜色透明度，内部元素不透明：

• .demo{ 　background-color:rgba(255,255,255,0.15) }

16. 商品列表布局换行
    display: flex; flex-wrap: wrap;

17. class三元表达式

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

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

2018.11.26
18. 占位符

• == 普通的英文半角空格   ==   ==   == no-break space （普通的英文半角空格但不换行） 　 == 中文全角空格 （一个中文宽度）   ==   == en空格 （半个中文宽度）   ==   == em空格 （一个中文宽度）   == 四分之一em空格 （四分之一中文宽度） 相比平时的空格（ ），nbsp拥有不间断（non-breaking）特性。即连续的nbsp会在同一行内显示。即使有100个连续的nbsp，浏览器也不会把它们拆成两行。

19. 水平垂直居中
    display: flex; align-items: center;//垂直居中
    justify-content: center;//水平居中
    or
    display: flex; flex-direction: column; text-align: center;//水平居中
    justify-content: center//垂直居中;
20. 不换行

• li、a、span行内强制不换行；white-space:nowrap;

21. ctrl+alt+左右键 代码位置定位

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

23. 代码保持同步:

• _this.$nextTick(()=>{
  _this.addShortcutsKey(‘enter’, () => {
  _this.closeMyMessageBox()
  })

24. 解构赋值为浅拷贝

• let obj = { }; let { …x } = obj;
  深拷贝：JSON.parse(JSON.stringify(origin));

25. v-model

• v-model.trim 将用户输入的前后的空格去掉
• v-model.number 将用户输入的字符串转换成number

26. radio双向绑定用

• :checked而不用v-model

27. mixin得声明在调用之前
28. 一个列表删除另一个列表中的同一项，先找到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返回到外面接受 });

29. 弹框代码模板

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

30. 数组复制：
    let aa=[1,2,3]
    Let bb=[…] 会覆盖bb