企业官网静态网站总结

这一周时间做了一个今天项目练习了用vue撘网站

1.根据熟练度选择的是vue框架,使用了iview的ui库,由于不会用bootstrap,所以自己手写响应式在其中也能发现很多问题,首先实时监听浏览器宽度应该放在mounted生命周期内,同时初始化页面时created生命周期内也要设置监听。

mounted() {

  window.onresize = () => {

  return (() => {

    let WIDTH = document.body.clientWidth;

    if (WIDTH > 963) {

  console.log(1)

    } else if (WIDTH < 768) {

    console.log(3)

    } else if (768 <= WIDTH <= 963) {

    console.log(2)

    }

  })();

  };

}

2.而且不能在每个路由去监听,应该是在app.vue完成监听,然后通过传递这个值给子组件使用,这样才不会冲突,也能优化性能,父子传值的方法slot插槽 也在这一次项目中练习了一下,很有作用。

3.这次项目也培养了组件化开发的思想,最开始应该去熟悉项目,想好要建立哪些组件备用,如何处理路由,哪些地方需要路由的参数。

this.$route用于监听当前路由

this.$router用于查看全体路由,可以拿来配置参数

4.写css文件注意配置是否需要配置scoped

5.class动态绑定,列表渲染,条件渲染非常有用,搭建项目离不开这些,这些东西也使vue更加容易上手,数据绑定比起dom操作更人性化,可以将更多的精力放在处理逻辑上而不是调整样式和获取dom节点上。

6.以后搭建项目首先要考虑浏览器兼容,是否响应式,引入数据传递,路由处理,组件配置,有必要时引入rem.js、reset.css、normalize.css可以简化代码

7.多做项目才能了解具体的流程和开发时间

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.css只在当前组件起作用答:在style标签中写入scoped即可 例如: 2.v-if 和 v-show 区...
    小棋子js阅读 571评论 0 0
  • 第一章 Vue概述 what? Vue是实现UI层的渐进式js框架,核心库关注视图层,简单的ui构建,复杂的路由控...
    fastwe阅读 769评论 0 0
  • 响应式布局的理解 响应式开发目的是一套代码可以在多种终端运行,适应不同屏幕的大小,其原理是运用媒体查询,在不同屏幕...
    懒猫_6500阅读 817评论 0 0
  • 计算属性 监听 methods 里面用来设置方法 在模板得表达式里使用这个方法 '{{}}' 双向数据绑定 v-m...
    web前端学习小白阅读 338评论 0 1
  • <meta charset="utf-8" 看看面试题,只是为了查漏补缺,看看自己那些方面还不懂。切记不要以为背了...
    hcySam阅读 1,300评论 0 9