Vue 开发经验(已更新)

web项目结构

image.png

2. 常用技巧

  1. 页面不需要的字段,全部在 data 的 return 上面定义 this.xxx
  2. 页面没有立即需要的字段,数据保存到中间值,待需要的时候再给 data 中数据赋值 (data中值会被一直监控)
  3. 组件库按需引入,减少项目代码体积
  4. 全局样式前面加 g-xxx
  5. 页面看情况拆成组件式开发,并不只是复用,可以减少一个页面的逻辑,可维护性提高 注意:同一个数据通用一个变量维护

3. 代码技巧

  1. 写页面样式,可以在谷歌中调试,元素样式边写边看,待到确认可以的时候,直接将样式复制回代码中
  2. @click.stop="onResumeProgress" 阻止事件冒泡
  3. 父组件传值
    1. 在子组件使用父组件传入的值时,最好复制出一份props的值,通过data或者computed进行赋值。
    2. data赋值:data:{return {aaa: this.aaa}如果是在data中进行赋值,当父组件的aaa值发生改变时,不会在重新赋给子组件中的aaa。
    3. computed赋值:如果想让子组件跟着父组件修改,需要将赋值操作写在computed中。computed:{aaa(){return this.aaa}
  4. 定时器创建和清除
onStartTimer() {
  const timer = setInterval( () => {
      // 执行一些操作
  }, 1000)
  this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
  })
}

3. 文件上传格式

(doc)-> application/msword
(docx)-> application/vnd.openxmlformats-officedocument.wordprocessingml.document
(eml)-> message/rfc822
(gif)-> image/gif
(htm)-> text/html
(html)-> text/html
(jpeg)-> image/jpeg
(jpg)-> image/jpeg
(mht)-> multipart/related
(msg)-> 
(pdf)-> application/pdf
(png)-> image/png
(rtf)-> text/rtf
(txt)-> text/plain
(wml)-> 
(wps)-> 
(xhtml)-> application/xhtml+xml
(xls)-> 
(xlsx)-> application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
(xml)-> text/xml

web 前端群招人,有梦想的一群小青年 https://www.jianshu.com/p/33eee1c26b8a

推荐阅读更多精彩内容