Vue踩坑总结：

1，v-show不能用在template里面,不支持template语法.改用v-if就好了.

组件标签使用v-if

上图中因为dialog是个组件,用了template的语法,所以不能使用v-show,应该用v-if.v-show可以用在某个template里面的div等标签上面.而且要记住的是，v-show只是把元素设置为display：none，none之后不占据布局空间，和visibility:hidden不一样。

2，箭头函数:如果只有一行 可以不用加 return ,函数会自动 return, 如果有两行以上,则需要通过 return 抛出结果.

3，vue-router: 如果是匹配'/',这种,则要在 router-link 组件加上 exact 进行严格匹配.否则会进行模糊匹配.或者在 router 配置里面加上

  linkExactActiveClass: "active-link",然后可以修改 active-link 的样式

本来 exact 是默认关闭的,加上linkExactActiveClass之后会自动打开,参考森林和铁路这两个项目的路由设置.

4，伪元素:顾名思义,其实这个也是一个元素 element;作为被附加元素的子元素.为什么需要伪元素,伪元素就是通过 css 的方式往 html 页面添加标签元素,最简单的是直接在 html 页面插入需要的标签元素.也可以通过 js 的方式创建标签.现在通过 css 也可以插入标签了.

关于伪元素相对完整的讲解.

5，关于 box-sizing:border-box;这个选项不单单会把 border 算进尺寸,也会把 padding 算进去.所有用了 width:100%;最好设置 box-sizing:border-box;这样就可以游刃有余的设置 padding 啦.

6,把一个函数定义在js文件,然后通过import的方法在.vue中引入之后,需要在methods:{}里面再注册一下才能在template里面用,要不会报错.在其他的方法里面使用则不需要.

7,在使用better-scroll的时候,需要加载一张图片然后滚动.图片比div框要大,刚开始的时候滚动很不稳,有时候能滚动有时候不能滚动.经过测试发现是因为刚开始scroll方法写在created钩子里面,获取到数据之后就设置滚动.但是根据官方文档,滚动产生的前提是需要父元素和子元素的高度都确定.所以刚才的写法,父元素的尺寸确定,但是子元素,即图片的宽高还是0,因为此时图片还没渲染上去.通过在img设置一个监听load的方法,然后在这个方法里面设置滚动,完美解决.

successLoadImg () {

let _this = this

this.$nextTick(() => { 

    console.log("获取图片的高度直接用height,设置div用clientHeight")

   _ this.imgscroll = new BS(_this.$refs.imgWrap, { startX: -100, click: true, scrollX: true, freeScroll: true }) })

}

8. 绝对定位的div 宽度会坍塌,本来默认是100%,会变成自适应宽度.