Vue 學習中碰到的問題
阿新 • • 發佈:2017-05-18
finish 對象 them lin 提示 function efault func 頁面
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‘ } } }
錯誤提示:- 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>)裏
Vue 學習中碰到的問題