參考網址: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 的瀏覽器。