Vue开发中遇到的问题与解决方案（一）

vue生命周期函数：http://www.zhimengzhe.com/Javascriptjiaocheng/236707.html
1、在watch或者created里面操作dom,用this.$nextTick(function(){
        xxxx

})

2、class动态绑定 三元写法：

:class="[isShowTab?'showTab':'noShowTab']"

3、vue获取后端数据应该在created还是mounted方法：
看情况了，一般放到created里面就可以了，这样可以及早发请求获取数据，如果有依赖dom必须存在的情况，就放到mounted(){this.$nextTick(() => { /* code */ })}里面
4、watch里面函数写法不同this指代不同
(1)

tabName: (newVal) => {
    console.
4000
log(this, 'this')

}



(2)

tabName: function (newVal)
{
console.log(this, 'this')



}

上面的方法（1）不能用this.$nextTick，会报错,方法（2）可以用this.$nextTick

5、

 window.addEventListener('scroll',function(){  在这个里面使用this.data 提示未定义，请问如何访问data(){return {}}的数据

试试 用 （）=> {}或者：
this.$data或者：

let vm =this ;window.addEventListener('scroll',function(vm ){}）这样 你就能 访问  vue 的  this 

6、render函数的使用

render:function(createElement){
            return createElement(  
              'h'+this.level,  
            {
 
                 'class':{
 
                
        show:true,  
                 
       hide:false,  
                 
},  
                 style:{
 
                 
      width:'200px',  
                 
      height:'400px',  
                 
      background:'red',  
                  },
 
                attrs:{
 
                 
      name:'h-ex',  
                 
      id:'h-id'  
                 },
 
                props:{  
                 
      myprops:true,  
                 },
  
                 on: {
 
                 
      click: function(event){  

                 
      alert(this.num)  

                  }
 
         },  
         nativeOn:{  

click:function(event) { 

 alert(1111)  

}  

}  

            },  
 [ 

this.$slots.myslot,  

createElement('div',{  

 domProps:{  

innerHTML:'holle render'  

}  

})  

 ] 

    ）

}