vue.js使用注意事项

一、当页面使用滚动组件时，在移动端触发点击事件，需单独设置

 this.meunScroll = new Bscroll(this.$els.menuWrapper, {
          click: true
});

其中Bscroll页面引入的滚动组件

但导致pc端和移动端点击不一致，pc端触发两次点击事件，通过以下设置保持一致。

addCart(event) {
        if (!event._constructed) {
          return;
        }
}

如果不是用户派发的点击事件，则直接返回，不进行任何操作。

二、当在一个组件中使用 未定义对象属性 时，首次使用需通过set方法声明。

import Vue from 'vue';
Vue.set(this.food, 'count', 1);

三、当设置动画时，注意书写单位，勿漏掉px

inner.style.webkitTransform = `translate3d(${x}px,0,0)`;

四、操作对象不要搞错，比如if中为ball.show，而不是ball

if (ball.show) {
        ball.show = false;
        el.style.display = 'none'; 
 }

五、1.display: inline-block  float: left
两者作用一样，将元素一行排列。 元素紧挨时，用前者；  元素左右两端排列时，即左右布局时，用后者。
2.一行元素垂直居中时，在父元素中设置height=line-height。避免在多个子元素中重复写
当一行元素左右间距时，可在父元素中设置padding，不用子元素中设置左右margin
3.background-color: #f3f5f7;不会对margin生效
4.写动画时，老忘记加单位：px
transform: translate3d(0,-100%px,0);
5..shopcart的position没有设置为relative，子元素shopcart-list的绝对定位不是应该相对于浏览器左上角吗？z-index：-1也没明白怎么回事？
因为父元素shopcart 的 position 是 fixed 的喔~，子元素会相对最近的父元素不是static的元素进行定位。
6.有个问题：
当把元素设位position:fixed相对于视口定位时，再设置偏移，发现transform: translate3d(0,-100%,0);发现不是相对于宽度来偏移，下面有很多空白。
而设置为position:absolute时，ransform: translate3d(0,-100%,0);不会有空白，真的相对高度来偏移。
7.使用better-scroll组件时，注意需要滚动的元素外层需设置一个固定高度，否则不起作用
8.当设置max-height时，元素内容会溢出，需设置overflow:hidden隐藏溢出内容
9.根据数据变化，使用v-show指令，需要设置组件显示与否，
10.当组件层级较多时，注意设置z-index
11.注意fixed和absolute的区别

12.使用绝对定位时，搞清楚定位元素是谁。

2017/5/31 总结

1.在vue组件中，父组件可以调用子组件方法，子组件不能调用父组件方法。
父组件调用子组件方法的步骤：
  在父组件中
   第一步： <food :food="selectedFood" v-ref:food></food>
父组件中引用子组件food，通过关键代码v-ref:food可引用子组件的方法。
   第二步：this.$refs.food.show();//父组件引用子组件food中的show方法
2.组件中私有方法一般带下划线，可被外部调用方法不加下划线。
3.vue中使用v-show指令控制元素显示与否，比如：v-show="showFlag"，showFlag为布尔值。
:class="showFlag",它的作用：给元素添加类。不要两种用法混淆。
4.图片加载是异步过程
5.技巧：当需要将图片宽高设为一致时，width: 100%,padding-top: 100%;
w3c规定：padding-top的值相对于自身宽度的100%。
6.技巧：当按钮为引入图标样式时，图标大小固定，当我们希望点击区域变大时，可给按钮添加padding值。优化用户体验。
7.单词拼错，将rgb写成rbg，导致无颜色显示。
10.当给一个元素设置如下样式时，如果不设置box-sizing，width会超过屏幕宽度。遵循w3c盒子标准。
width: 100%；
      background: #ffffff
      padding:0 18px
      box-sizing: border-box
11.调用betterScroll组件时，注意：（1）在this.$nextTick（）回调函数中调用，即DOM渲染完调用。
this.$nextTick(() => {
          this.foodScroll = new Bscroll(this.$els.food, {
            click: true
          });
});
（2）避免反复调用该组件，进行条件判断。
if(!this.foodScroll){
            this.foodScroll = new Bscroll(this.$els.food, {
              click: true
            });
          }else{
            this.foodScroll.refresh();
          }
(3)调用该组件的元素必须显示设置固定高度。
12.写购物车图标时，宽度不用写死，增加左右padding，内容撑开。
13.有个问题：height=line-height时，不居中，因为：
height: 24px
box-sizing: border-box
line-height: 24px
box-sizing: border-box
增加了border，由于box-sizing的作用，content的宽度为22px，而line-height针对的是content的宽度，不是width.


14.实现圆角边框： border-radius: 12px
15.元素设置position: absolute，一般都要设置z-index属性，防止被其他绝对定位层覆盖。
16.注意margin和padding的区分使用，box-sizing可以把padding算入width中，但是margin不行。
17.样式和布局一致时，可以抽象为一个组件。代码一样的可以拷过来，不用再写。
18.原则：用尽量少的属性达到所需的样式。
19.一般设置line-height，都要设置height，才有效
20.span标签不设置宽高时，不需要display:inline-block
21.宽和高不需要设置，定死，内容自动撑开。
22.一般不要轻易设margin，当相对于它定位时，只相对于width定位，出现问题
23.引用用单引号
24.this.$dispatch('cart.add', event.target); // 派发事件，传递dom
这句话作用？
25.有时候数据并没有在组件之间传送过去，导致错误。
26.当子元素点击时，会向父元素冒泡，触发父组件的点击事件。此时应该阻止冒泡事件和默认事件。
27.写动画时，如果水平和竖直方向都有位移，则需要两层，外层控制一个方向，内层控制一个方向。比如购物车小球动画轨迹为抛物线，我们设置动画函数。
购物车小球动画只有一半：enter过程，无leave过程。
28.购物车小球动画传递+ dom元素的技巧：cartcontrol和shopcart为goods的子组件。cartcontrol组件派发一个事件，goods组件通过events属性接受该事件。
在父组件中定义一个方法，该方法的参数为事件。在该方法中调用cartcontrol组件中的方法，将事件传递给子组件shopcart。完成了cartcontrol将事件传递给
父组件，父组件再传递给子组件shopcart。
29.组件中的方法有时并没有在自己组件中调用，有可能在父组件中调用。
30.商品描述部分文字大小不定，该部分高度自适应，不用写死。一般元素的宽度和高度都尽量不要写死。
31.在开发中，通过console.log打印元素对象来调试。
32.通过return;直接让函数结束。
33.动画的触发：transition 特性可以与下面资源一起用：


v-if
v-show
v-for （只在插入和删除时触发，使用 vue-animated-list 插件）
动态组件 （介绍见组件）
在组件的根节点上，并且被 Vue 实例 DOM 方法（如 vm.$appendTo(el)）触发。


疑问：那在原生js中，是如何触发动画的？
34.ball.el.getBoundingClientRect();通过该函数获取元素相对视口的位置。问题：
getBoundingClientRect()会引起重绘吗？会引起。通过left值获得相对左边偏移，通过top获得相对上边偏移。
偏移的正值和负值朝哪个方向。
35.回流和重绘研究？
36.类名为inner-hook，表示只是被选择的，没有真实的含义。编程规范。
37.getElementsByClassName获取到为类数组集合。通过[0]获取第一个类名为..的元素。
38.对vue动画设置中三个状态理解，beforeEnter：表示动画开始状态。enter:表示动画结束状态。afterEnter：表示完成后进行的操作。
疑问：在vue动画中，有时需要强制重绘，设置的属性才有作用。？？？
39.解决动画频繁触发较卡的问题：
将调动动画的函数放在this.$nextTick()回调函数中
40.使用浮动实现三列布局出现问题：父盒子设置margin，而父盒子宽度为100%,所以浮动元素出去。所以尽量使用padding。
三列布局可以用absolute实现。准确定位控制布局。
41.background-color只会渲染自己盒子的padding，不会渲染父盒子的padding。
42.在父组件中引入子组件时，书写样式考虑子组件本身的样式。
43.考虑组件内是否有内容，不是所有food中都有Info字段，所以用v-show指令判断
44.样式层级关系弄清楚
45.如果元素宽度与父亲相同，不用设置宽度，减少重复代码。
46.不用完全依照设计稿，不合理地方改掉。
47.学会将公共部分抽象为组件。
48.组件之间通信，父组件中传值属性名用下划线连接。子组件该属性名使用驼峰命名方式。
比如父组件引用组件ratingselect，传值如下:select-type='selectType'，注意：初学者可能会忘记冒号
49.使用const定义常量，常量标识符要大写。
50.vue指令：
51.周五前赶紧写完。
52.技巧：对于display:inline-block元素设置font-size: 0，保证元素之间无默认距离
53.对于含有文字块级元素，不需要设置特定宽高，由内容撑开。设置一些padding，margin。
54.padding和margin使用区别：当内容下有边框线时，边框线左右两边有间距时，用margin，使用padding不会影响border的长度。
55.当元素有公共样式时，设置一个相同类名。
56.组件抽取技巧：只抽取相同地方，其他不同的单独写
57.取类名时，有意义的名字。
58.div标签和span标签使用场合：span标签在所有元素在一行时使用。有两点注意：（1）将两个标签如下书写：目的：取消标签间的默认行距。
<span class="all block">{{desc.all}}<span
          class="count">{{ratings.length}}</span>
        </span>


（2）设置所有标签的font-size:0，再单独设置字体大小。
59.vue指令之v-bind:例子一：<div :class="{ red: isRed }"></div>
通过vue指令给元素添加类，切换样式。
60.两个span按钮对齐技巧：
  display: inline-block;
  vertical-align: top;

2017/6/7 总结

1.子组件向父组件传递数据方法：子组件数据变化，通知父组件更新对应值的方法：
派发事件   this.$dispatch('ratingtype.select', type);//事件名，数据
3.子组件的数据是基础类型，它的改变不会影响父组件。引用类型可能会。
4.数组迭代的几个方法有意识的使用。评价组件时用到了filter方法。
5.在img标签内写宽和高样式的好处：width=12,height=12.未写样式前，图片为指定的大小。
6.用户名和头像在一行对齐必须设置：1.父元素的font-size:0；line-height: 12px 2.display: inline-block  vertical-align: top（只给一个元素指定即可）
7.写样式有个规范：先写定位，再写margin，padding，line-height，再写字体颜色等。
8.不懂样式文件的引用，为啥有的需要引用，有的用到不需要引用。比如：food组件中1px的border实现，引用了minin，没引用base.
10.v-show可以绑定一个函数的返回值。
11.vue的dom更新是异步的，放在更新队列中，$nextTick触发后dom才会更新。
比如：this.$nextTick(() => {
          this.foodScroll.refresh();
        });
需求：当评价页中高度发生变化时，dom更新后，触发BetterScroll组件更新。
12.引入文件格式：
import ratingselect from 'components/ratingselect/ratingselect'; 当export default{},不用加{}
import {formatDate} from '../../common/js/date'   当export导出，需加{}
13.技巧：通过+ ''将obj[k]转为字符串
let str = obj[k] + '';
14.vue中有filter对象，可对数据进行格式化处理
15.js的模块化思想，将公共方法抽象到js文件中，其他文件通过引入模块调用。

2017/6/7 总结
1.flex布局项目常用的几个属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

注意：分清是容器还是项目的属性

以下6个属性设置在容器上。
flex-direction
flex-wrap
flex-flow（以上两项的简写）
justify-content
align-items
align-content

以下6个属性设置在项目上。
order
flex-grow
flex-shrink
flex-basis
flex
align-self
2.谁向rating组件传数据？在app.vue中routeview传递数据seller，rating组件通过props属性接收数据seller
模块之间依赖关系？app.vue所起作用？
3.易犯错误： order: 0，order后面冒号写成中文的，导致出错。
4.不同组件中也不能起相同的类名和变量名，否则会样式相互影响。
5.两部分样式完全一样，采取相同的结构和类名，样式统一，不写重复代码。
6.类名的命名可以采用驼峰：scoreWrapper，也可用短横线：score-wrapper
7.overflow：hidden属性使用：当内容超出父组件时，可隐藏;还可以清除浮动。
8.元素水平居中的两种方式：1.text-align:center 2.左右padding相同
9.使用标签时，考虑h1,div，span
10.padding经常用来定义上下左右空白
11.使用wrapper修饰css类名，容器包装层
12.注意：几个span标签并列一行时，设置font-size:0去除默认间距。
13.了解组件形式
14.line-height属性给文字设定，不一定和height一起用。
15.如果两个span内容都是文字，不用display:inline-block，vertical-align:center，文字默认是垂直对齐的。
如果一个为文字，一个为图片,则需对齐。
注意：当内容都为文字，且文字大小相同，设置相同的行高则整体行高一致。若有内容为图片，图片大小跟文字大小不一致时，设置相同行高则不一致。
16.有时候maigin重复设置,两个相邻元素，第一个元素设置margin-bottom，下面又设置margin-top，导致间距很大。
17.express和vue-resource的使用
18.后台数据某些字段可能没有，所以通过vue展示数据时，通过v-show属性设置显示与否。
19. 
./ 当前目录
../ 父级目录
/ 根目录
20.内容文本用p标签，用户名用h1标签
21.组织标签结构时，将一组标签用div框起来。
22.渲染一个数组中内容时，使用v-for指令。
23.使用v-el绑定dom，格式为：v-el:ratings
24.技巧： 
position: absolute;
    top: 174px;
    bottom: 0;(关键)
    left: 0;
header高度为174px，通过设置bottom: 0;(关键)，使得该区域的高度固定，高度=屏幕的高度-header高度。高度固定，可使用BetterScroll组件
25.将div标签改为p标签时，由于只改变起始标签为p，结束标签还是</p>，所以轻易不改结构，出现意外错误
26.如何确定BetterScroll组件在vue方法中什么位置加载？
27.BetterScroll组件定义需放在该方法中：this.$nextTick(），确保dom加载完毕，BetterScroll组件加载。
28.当每个列表项都有左右空白，并且border也有左右空白时。两种方法：1.列表项自身设置左右magin，2.父元素设置左右padding.
29.问题：
 1.better-scroll组件不起作用？
 因为没懂better-scroll滚动原理：首先外层div有个固定高度,内层div可以被内容自动撑高，当内层内容超过外层固定高  度时，就可以滚动。
 问题：内层内容并没有超过外层固定高度，所以不会滚动。
2.当选择显示所有评论，无内容评论不显示？ 因为相关函数参数不正确。

2017/6/9 总结
1.数据传递
在app.vue中，通过routeview将seller数据传递，
<router-view :seller="seller"></router-view>
2.使用组件时注意：(1)先导入 (2).再注册
3.html结构技巧：(1).标签使用h一类标签
(2).<div class="content">
               <span class="stress">{{seller.minPrice}}</span>元
</div>
类似以上结构，先设置父元素样式，再单独设置子元素span标签
4.当多项内容，可用列表组织结构。(ul,li)
5.:score是对v-bind:score指令的缩写
6.先写html结构，再写css样式
7.为啥引入min样式文件失败？
8.当几个span标签并列一行，勿要忘记设置font-size:0，去除默认间距。
9.能用padding，尽量用padding。观察padding是对父元素设置，还是子元素。
10.移动端经常使用flex布局。
11. &:last-child
            border: none
设置最后一个元素无border样式，其余均有。
&表示父元素
12.取类名时可以参考数据数组名，对象名
13.父元素设置line-height和子元素设置line-height区别。当子元素为图标和文字时，统一设置line-height,可能不对齐。只对文字单独设置line-height
14.为什么classMap要写在created里，写在data()里就不行呢？？？？
15.根据border的宽度，决定父元素设置padding，还是子元素设置
16.created函数作用? 该函数生命周期来讲，不能保证dom渲染
17.BetterScroll组件引入时机？确保dom渲染完，才引入BetterScroll组件。dom渲染完后，ready才执行
18.对vue中钩子函数了解，哪个时间段执行。
19.BetterScroll组件起作用时机：(1)dom渲染；(2)内容被撑开。
20. &:last-child
      border-none()
学会css伪元素的使用
21.this.$nextTick 是一个异步方法看具体场景了, 通常初始化 better-scroll 需要，
否则刚开始better-scroll 不起作用。测试:移除this.$nextTick，观察页面变化。
22.vue中watch选项，监听数据的变化，当数据从无到有，触发相应的函数。
23.当dom替换，整个更新时，watch中的数据不会发生变化。
24.ready的执行时机优先于watch中方法执行。
25.对router.go('/goods');不了解，对vue-resource不了解
26.当组件中的数据是异步更新时，需在watch中监听数据变化再触发相应的dom操作
27.注意：给元素设置样式时：this.$els.picsList.style.width = width + 'px';
忘记（1）style (2)单位：px
28.计算属性的使用：computed
29.有时更新样式，还需手动刷新
30.区分 &.active和 &:last-child
例如
.icon-favorite
   display: block
   line-height: 24px
   font-size: 24px
   &.active
      rgb(240,20,20)
&.active表示：样式icon-favorite所在元素,.active表示类active.
&:last-child表示样式所在父元素的最后一个元素,:last-child表示伪类。
31.想让两个元素上下中心对齐。则给父元素设置固定宽度，属性text-align: center
32.不太理解
 if(!event._constructed){
          return;
}
33.[]是定义匹配的字符范围。比如 [a-zA-Z0-9] 表示相应位置的字符要匹配英文字符和数字。[\s*]表示空格或者*号。
+表示一个多多个
34.object.assign()用来将源对象的所有可枚举属性复制到目标对象。给对象扩展属性的方法。
35. 在JavaScript中，对象的属性分为可枚举和不可枚举之分，它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查找遍历到。
36.使用双下划线表明一个变量是私有的。__seller__
37.对于对象，定义属性时，如果属性为字符串，则使用如下形式：seller[id]，不能使用seller.id
38.注意：window.localStorage存储为字符串，如果使用对象，用json.parse()方法转换。
39.尽量将方法写的通用
40.decodeURIComponent方法作用？
decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
41.<router-view :seller="seller" keep-alive></router-view>
keep-alive作用：(1)保留组件的原始状态 (2)防止数据多次请求 (3)
问题：未加keep-alive时，对异步数据请求一直报错：length未定义。this.seller.pics.length
原理：将组件状态缓存到内存中，当切换组件时，当组件已经加载并保留在内存中时，从内存中恢复组件状态。