Vue易错点整理，长期的。。。

1、在写子组件名和监听自定义事件时，命名不能采用驼峰命名发，否则对应的组件不显示，对应的方法不执行，被坑到了，切记！！但在声明子组件的属性名时，可以用驼峰命名。

2、内联样式style三元表达式

 <span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >搜索</span>

此处还有个易错点，就是我们在绑定多个css样式时，分隔符应该是,而不是;,否则会报错，因为我们绑定样式时，使用但是js表达式而不是普通的css样式写法！！！

错误写法:

<div class="content-border"
       style="margin-left: 16px;border-left: 1px solid red;"
       :style="{'height': isShow? '50px' :'10px';}">
       
 </div>

正确写法:

<div class="content-border"
       style="margin-left: 16px;border-left: 1px solid red;"
       :style="{'height': isShow? '50px' :'10px',}">
       
 </div>

3、在使用v-show指令是表达式不需要 使用{}包括起来.

<div class="content-wrap">
   <div class="content-border" style="margin-left: 16px;border-left: 1px solid red;"
    :style="{'height': selectHeadIndex==contraIndex? 'auto' :'10px',}"
     v-show="selectHeadIndex==contraIndex"
     >
</div>

4、绑定背景图片

 <div  :style="{'background-image':'url(' +item + ')'}" class="image-item"> </div>

5、Vue使用Echarts注意事项，否则报错
就是我们在初始化Echarts实例的时候，一定要在mounted里面，created里面是获取不到元素id的，节点还没有加载，所以会报错。

6、解决vue-cli webpack打包后加载资源的路径问题
https://www.jianshu.com/writer#/notebooks/1470914/notes/53054239/preview