Vuejs 使用官網上面的例子
阿新 • • 發佈:2018-11-07
vue.js報錯 vue.js:597 [Vue warn]: Cannot find element: #app
問題: vue.js:597 [Vue warn]: Cannot find element: #app-4
檢查了幾遍程式碼沒錯,最後發現是引入vue的script必須放在body的末尾行。
解決: 引入vue的script必須放在body的末尾行。
------------------------------------------------------------------------------
1.使用vuejs 官網上面的例子,在控制檯中發現了錯誤了,
VM2369 vue.js:2658 [Vue warn]: Unknown custom element: <todo-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in root instance)
此原因是需要先註冊元件,然後新建Vue
,順序不能顛倒
2.原始碼:
<div id="app-7"> <ol> <!-- Now we provide each todo-item with the todo object --> <!-- it's representing, so that its content can be dynamic --> <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item> </ol> </div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: 'Vegetables' },
{ text: 'Cheese' },
{ text: 'Whatever else humans are supposed to eat' }
]
}
})