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.注
4000
意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.
c7cc
先写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

原理：将组件状态缓存到内存中，当切换组件时，当组件已经加载并保留在内存中时，从内存中恢复组件状态。