vue踩坑记录

1、绑值

绑定值
{{message}}
绑定属性值
v-bind:title=""
注意：如果绑定的值是字符串，记得再加'',如"'vue'"

2、数组生成生表格，每隔七列换行显示
VUE一般使用template来创建HTML，查了下template没有语法可以实现这种情况。查看了element的源码，它先把数组先处理成行，再循环行中的列。这个写法还是觉得复杂了。可以使用javascript来创建html，这时候我们需要使用render函数，采用jsx来实现：

render(h) {
   const { list, defaultValue } = this;
   let tdDom = [], thisDom = [];
   return (
      <div class="calendar-item">
          <div class="calendar-item-header">{defaultValue.y}年{defaultValue.m + 1}月</div>
          <table class = "calendar-table">
             <thead>
                 <tr>
                     <th>日</th>
                     <th>一</th>
                     <th>二</th>
                     <th>三</th>
                     <th>四</th>
                     <th>五</th>
                     <th>六</th>
                 </tr>
           </thead>
           <tbody>
                {
                     list.map(function(item, index){
                          tdDom.push(<td><span class={item.class} data-value={item.value}>{item.text}</span></td>)
                          if(index !== 0 && (index + 1) % 7 === 0){
                              thisDom = tdDom;
                              tdDom = [];
                              return(
                                   <tr>
                                        {thisDom}
                                   </tr>
                               )
                            }
                      })
                }
           </tbody>
         </table>
     </div>
   )
}

其中无论是props传下来的属性，还是data中自带的属性值，统一通过this获取，不需要像react区分this.props,this.state

 

3、scoped属性

在vue组件中，在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的，这是一个非常好的机制。但是为什么要慎用呢？在实际业务中我们往往会对公共组件样式做细微的调整，如果添加了scoped属性，那么样式将会变得不易修改。

 

查看dom渲染了几次

在react中养成的习惯，代码写完后，需查看dom渲染了几次，是否有多余的渲染。在vue中想找对应的生命周期来实现，结果发现vue中多数用的template渲染模板，很少用render函数，不能在render中输出语句来判断是否渲染了DOM，可在mounted和updated中输出查看。

 

vue router打开新窗口

const {href} = this.$router.resolve({
  name: 'foo',
  query: {
      bar
   }
})
window.open(href, '_blank')
2.1.0版本后，使用路由对象的resolve方法解析路由，可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了。

关于打开新标签页遇到的问题:
1. 新标签页每打开一次，cookie更新一次，在FF中有效，在Chrome中无效
2. 打开新标签页，新标签页中的请求，在原标签页中会执行一次

4、事件调用

父调子事件：

 

 感悟

学习vue的各种用法，再来看react的用法，其实他们的不同，很多来自dom实现的不同。甚至vue中也可以像react一样使用jsx模板语言实现，他们的事件触发后的处理语句写的位置是一样的。

两者都了解后，考虑问题的方式也逐渐开始跳出框架。像移动端的上滑下滑事件，这个无论是在哪个框架中，这个事情都需要由原生来处理。

原来接触vue的时候，觉得这玩艺耦合性低，入侵性也比较强，和react的思想相比，模块化不是很清晰，一度不想深入了解。最近参与了一些项目，让我认识到，无论哪个技术栈，只要能快速解决问题的都是好的。