Vue.js的坑

时间:2023-03-09 01:55:28
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 的浏览器