Vue 学习中碰到的问题

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' }
}
 }
    

 

官方文档解释:当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

 

---

 

错误提示:- 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中根目录下只能包含一个,应该全部写入根目录(<div>)里