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
}

JS修改Rem

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

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

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

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

CSS Sticky footers布局

两中方案：

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) } }
 父组件bmethods: { 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) {
   // 手动触发浏览器重绘
   
   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%;
}

  阻止链接的默认行为，防止页面调转

**** $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)进行继承, ，

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

Vue.js相关栏目本月热门文章