菜鸟遇到vue小坑

其实菜鸟说的就是我，哈哈：）  一边自学一边收录一些遇到的坑，无论大小都写下来分享给大家。

 

1 template里面的元素必须以一个根元素包裹，否则只会显示第一个元素。

2 v-on:事件名和v-bind属性名 会自动转为小写。2019-08-16更新：由于看到V2.6.0新增的动态参数便明白了，其实这些都是DOM属性，因此可以理解不能大写和特殊字符规定的含义。

3 实例化Vue的data是对象，组件的data是函数返回对象。  

//实例
new Vue({
   data:{
       ...
   } 
});

//组件
Vue.component({
   data(){
       return {
           ...
       }
   }
})

　　

4   不要在选项属性或回调上使用箭头函数。

let vm = new Vue({
    created()=>{
          //Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 。
    }
})

or

vm.$watch('a', newValue => this.myMethod())。// Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function。

因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止。

 

5 Mustache表达式虽然支持js语法，但只能是单个的表达式，包括流控制和语句无效

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

　

2019-08-16更新 

6 如果某种开发情况下把组件和VUE实例写到一个JS文件下时，组件代码请放在实例上面。

修改第2条！

7 计算属性和一般方法之间的区别和使用不太明确。

//方法
methods: {
   ... 模板中使用安装一般函数使用
   ... 依赖渲染，所以只要需要VDOM需要重新渲染，该方法就需要重新执行
}

//计算属性
computed: {
  ... 模板中使用不能加括号
  ... 依赖属性，所以每次只有当该属性发生变化是执行
}

　　

补充中~~~