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里

作者 铁血 汉子 21 天前
2017/11/17/10:56:40pm 2017/10/28/2:57:46
0 55