vue.js使用注意事项

时间:2022-12-18 18:06:29

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

 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
原理:将组件状态缓存到内存中,当切换组件时,当组件已经加载并保留在内存中时,从内存中恢复组件状态。