Vue.js組件開發：從一個簡單的例子說起

標籤：com   logs   bind   標籤   html   簡單   ora   name   blog   

      <ol>        <!-- <li v-for="thing in someThings" >          {{ thing.name }}        </li> -->        <thing-liv-for="thing in someThings" v-bind:something="thing"></thing-li>      </ol>

li列表的功能是顯示一件事情的名字，我們以它作為例子來介紹最簡單的一個Vue組件：
組件定義：

Vue.component(‘thing-li‘, {  props: [‘something‘],  template: ‘<li>{{ something.name }}</li>‘});var app = new Vue({  el: ‘#app‘,  data: {    message: ‘Hello‘,    someThings: [      { name: ‘oral‘ },      { name: ‘peanuts‘ }    ]  }});

文法上需要注意的是組件的名字會被當做html標籤一樣寫html檔案中，而組件中定義的props的值則需要綁定（v-bind:prop="..."）

Vue.js組件開發：從一個簡單的例子說起