菜鸟遇到vue小坑

Posted 2022-07-16 strayhunter

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

2 v-on:事件名 必须小写

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