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 的浏览器。