Vue.js的坑


參考網址:http://cn.vuejs.org/v2/guide/components.html

1.camelCase vs. kebab-case

HTML 特性不區分大小寫。當使用非字符串模版時,prop的名字形式會從 camelCase 轉為 kebab-case(短橫線隔開):

//子組件

Vue.component( 'child', {
  // camelCase in JavaScript
  props: [ 'myMessage'],
  template: '<span>{{ myMessage }}</span>'
})
 
//父組件
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

再次說明,如果你使用字符串模版,不用在意這些限制。

2.data 必須是函數

使用組件時,大多數可以傳入到 Vue 構造器中的選項可以在注冊組件時使用,有一個例外: data 必須是函數。

錯誤的寫法:

Vue.component( 'my-component', {
  template: '<span>{{ message }}</span>',
  data: {
    message: 'hello'
  }
})
而應該是:
data: function () {
  return {
  counter: 0
  }
}
或者
data(){
  return{
    message:0
  }
}

3.Component template should contain exactly one root element. 

<template>

  <div>

    //最外層的div只能有一個

  </div>

</template>

4.//使用 v-on 綁定時,父組件不需要定義到 events 中,而是 methods。

5.Vue.js 不支持 IE8 及其以下 IE 版本。

  Vue.js 不支持 IE8 及其以下版本,因為 Vue.js 使用了 IE8 不能模擬的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的瀏覽器


 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM