1. 程式人生 > >Vuejs 使用官網上面的例子

Vuejs 使用官網上面的例子

 

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