1.camelCase vs. kebab-case
HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)：
Vue.component('child', {
// 在 JavaScript 中使用 camelCase
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
<!-- 在 HTML 中使用 kebab-case --> <child my-message="hello!"></child>
如果你使用字符串模板，则没有这些限制(字符串模板就是，模板不含数据，为静态内容)。
2.把一个对象的所有属性作为 prop 进行传递
可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如，已知一个 todo 对象：
todo: {
text: 'Learn Vue',
isComplete: false
}
然后：
<todo-item v-bind="todo"></todo-item>
将等价于：
<todo-item v-bind:text="todo.text" v-bind:is-complete="todo.isComplete" ></todo-item>
3.字面量语法 vs 动态语法
初学者常犯的一个错误是使用字面量语法传递数值：
<!-- 传递了一个字符串 "1" --> <comp some-prop="1"></comp>
因为它是一个字面量 prop，它的值是字符串 “1” 而不是一个数值。如果想传递一个真正的 JavaScript 数值，则需要使用 v-bind，从而让它的值被当作 JavaScript 表达式计算：
<!-- 传递真正的数值 --> <comp v-bind:some-prop="1"></comp>
4.组件内return
component 中 数据为什么不能用
export default{
name:‘App‘,
data: {
message:‘Hello vue‘
}
}
因为组件会应用到很多地方,而 data:{}是对象,不用页面都共享了同一个对象,正确做法需要函数来实现:
export default{
name:‘App‘,
data: function(){
return { //大括号要与return同一行
message:‘Hello vue‘ }
}
}
或者简写:
export default{
name:‘App‘,
data(){
return { //大括号要与return同一行
message:‘Hello vue‘ }
}
}
5.错误提示:- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
<template>
<div class="hello">
<h1>{{msg}}</h1>
<h2>Essential Links</h2>
<input v-model="newItem" @keyup.enter="addNew"></input>
<span>{{newItem}}</span>
<ul>
<li v-for="item in items" :class="{finish:item.isFinished}" @click="taggleFinish(item)">{{item.workstyle}}</li>
</ul>
<h1>{{msg}}</h1>
</div>
<h1></h1>>
</template>
原因：template中根目录下只能包含一个,h1应该全部写入根目录div里
