vue学习笔记---饿了么仿写实战项目

1、https://icomoon.io/ 图表字体生成网站

chrome插件 jsonview格式化json数据

eslint配置
rules{
'semi':['error','always'], //分号配置
'indent':0 // 缩进配置
}

/ eslint-disable no-new / new实例写法前加上，可以忽视eslint检查

重定向： {path: '*', redirect: '/goods'}

PC端开发，手机端调试，通过草料生成二维码https://cli.im/，手机访问。必须在同个局域网下。

1像素border

::after伪类，根据DPR缩放伪类
.border-1px{
position: relative;
&:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-top: 1px solid rgba(7, 17, 27, 0.1);
content: '';
}
}

  @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
    .border-1px:after {
      -webkit-transform: scaleY(0.7);
      ransform: scaleY(0.7);
    }
  }

css消除空白技巧：1、两个span之间不换行，2、设置父元素的font-size:0；

// 内容水平居中
.box-container{
display: flex;
justify-cintent: center;
align-item: center
}

<link rel='stylesheet' type='test/css' href='' media='screen and (max-width: 320px)'>

JS修改Rem

<script>
let htmlWidth = document.documentElement.clentWidth || document.body.client;
let htmlDom = document.getElemnetByTagname('html')[0];
htmpDom.style.fontSize = htmlWidth / 10 +'px;
</script>

***less字符串拼接
.bg-img(@url) {
background-image: url( '@{url}@2x.png');
}

***注意mixin中的路径，是相对于mixin文件的路径

文字超出部分隐藏css代码：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

背景模糊：filter:blur(10px);

两中方案：

1、flex布局

          body{min-height:100vh;  display:flex;  flex-direction:cloum;}
          main{flex:1;}

2、CSS解决

          main{min-height:100vh; padding-bottom:50px;}
          footer{height:50px; margin-top:50px}

背景图片模糊CSS：filter: blur(10px);
背景模糊 IOS下： backdrop-filter: blur(10px)

垂直居中最好的方法： dispaly:table dispaly:table-cell vertical-align:middel

上下margin会重合

img元素 直接用属性甚至width height

vue this.$nextTick()

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
div:ref='targetName' this.$refs.targetName取得DOM元素

class="xx-xx-hook" hook仅仅表示将会被JS选择，没有和实际的样式

Vue.set(this.food, 'count', 1); 设置监听对象没有的属性，将会响应式更新

vue2.0组件间事件派发与接收 https://segmentfault.com/a/1190000008018314

        通过new Vue对象，专门管理事件，可以非父子组件通信
    1、 mian.js  eventHub : new Vue()
          组件a     this.$root.$emit('eName',)
          组件b     this.$root.$on('eName', () => {});

    2、 父子组件通信，使用自定义事件, 子组件通过this.$emit出发事件， 在父组件的子组件元素中，通过@自定义事件名  接受事件
          子组件a     @click='addCart'    methods: {addCart(event){ this.$emit('add', event.target) } }
        父组件b    <a @add='addFood'></a>   methods: { addFood(){ ... } }

    3、 使用Vuex

el.getBoundingClentRect(); 获得元素距离视口的坐标

vue 使用JS钩子函数实现过渡效果

  beforeDrop(el) {
          // 从后往前判断，新运动小球是PUSH
          let count = this.balls.length;
          while (count--) {
            let ball = this.balls[count];
            if (ball.show) {
              // 获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置
              let rect = ball.el.getBoundingClientRect();
              // 小球初始 left:32  bottom:22
              let x = rect.left - 32;
              let y = -(window.innerHeight - rect.top - 22);
              el.style.display = '';
              el.style.webkitTransform = `translate3d(0,${y}px,0)`;
              el.style.transform = `translate3d(0,${y}px,0)`;
              let inner = el.getElementsByClassName('inner-hook')[0];
              inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
              inner.style.transform = `translate3d(${x}px,0,0)`;
            }
          }
        },
        dropping(el, done) {
          // 手动触发浏览器重绘
          /* eslint-disable no-unused-vars */
          let rf = el.offsetHeight;  //触发重绘html
          this.$nextTick(() => {
            // 重置偏移位置，即左下角
            el.style.webkitTransform = 'translate3d(0,0,0)';
            el.style.transform = 'translate3d(0,0,0)';
            let inner = el.getElementsByClassName('inner-hook')[0];
            inner.style.webkitTransform = 'translate3d(0,0,0)';
            inner.style.transform = 'translate3d(0,0,0)';
            // 等待过渡效果执行完毕， 触发动画完成事件afterDrop, 缺失将无法实现小球消失
            el.addEventListener('transitionend', done);
          });
        },
        afterDrop(el) {
          console.log('---');
          let ball = this.drops.shift();
          if (ball) {
            ball.show = false;
            el.style.display = 'none';
          }
        }

CSS高度自适应图片技巧（图片加载时，在view中预留位置）

.img-wrapper{
  position: raletive;
  width:100;
  hieght:0;
  padding-top:100%  //技巧，当没有设置高度时，padding值相对与宽度进行计算
}
img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  hieght: 100%;
}

<a href='javascript:;'></a>  阻止链接的默认行为，防止页面调转

**** $http.get('./package.json',{}).then() 可以直接获得package.json的内容，即读取本地json的数据

vue-resourse使用技巧：

   拦截器Vue.http.interscptors.push( function(request,next){....});
   vue实例下面有个http方法,resourse插件做的封装
   http:{
    root: '全局地址'
   }

axios

  失败的请求通过catch捕获
  全局拦截器
     axios.interscptors.request.use(function(config){
       console.log('request init...')
       return config;
     })
     axios.interscptors.response.use(function(response){
        console.log('response init...')
        return response;
      })

AMD、CMD、CommonJS和ES6差异

  AMD、CMD、CommonJS 是模块化开发的标准和方案
  1、AMD(异步模块定义)是RequireJS在推广过程中对模块化定义的规范化产出
     依赖前置
  2、CMD(同步模块定义)是SeaJS(淘宝团队)在推广过程中对模块化定义的规范化产出
     即用即返回，
  3、CommonJS规范--module exports  node端推荐使用

  4、ES6特性 export/import

vue组件中的data是一个函数，通过 return {...}。  目的：组件的数据不应该时贡献的，通过函数返回，可以保证每次引用组件时的data数据对象不是一个。

通过import 可以在组件的script标签内直接导入样式 。

import '../style/myStyle.less'

webpack 代理设置：

conig/index.js 中，设置dev:{ proxyTable: { '/goods/*': { target: 'targetUrl:port' } } }
通过代理，可以解决跨域问题

webpack深入与实战
 在页面中想使用自定义的插件： 定义一个 新的类，使用 let Toast = Vue.extend(ToastComponent)进行继承, ，