瀏覽器解析

創建Vue實例時，el的HTML元素會經過瀏覽器接解析在傳回給Vue實例使用，格式不合法的話瀏覽器會直接把他移除掉，如selec tag裡不是放option、ul tag裡不是放li...等等，解析結果會因瀏覽器而有所差異，下面範例就無法成功render出組件：

<div id="app">
  <select>
    <my-component></my-component>
  </select>  
</div>

<script>
Vue.component('my-component',{
  template:"<option>test</option>"
});
new Vue({
   el:"#app"
});
</script>

解法可以使用template來輸出HTML，就不會經過瀏覽器解析刪除不合格式的元素，便可以成功render出來：

<div id="app"> </div>

Vue.component('my-component',{
  template: '<option>Hello</option>',
});

new Vue({
  el: "#app",
  template: 
  `<select>
    <my-component></my-component>
  </select>
  `
})

tag寫法

使用html tag時，如果tag內沒有內容的話，可以直接寫簡短的self-closing，假如是一個空的div就會寫成<div />，利用HTML模板時使用組件的時候必須要寫完整的tag與close tag，不能用self-closing來使用組件，但Vue實例裡可以使用self-closing。

<!-- --用HTML模板使用組件--- -->

<!--正確-->
<div id="#app">
    <my-component></my-component>
</div>

<!--錯誤-->
<div id="#app">
    <my-component />
</div>

<!-- --用Vue實例使用組件--- -->

<!-- 正確 -->
new Vue({
    el:"#app",
    template:"<my-compnent />"
});

data必須是函數

Vue實例的data是物件，但Vue組件的data必須是函數，原因是Vue組件是可以重複利用的，而且在正常的情況下會使用不同的資料，若data是函數的話，每次註冊組件的話都會return一個新的物件。

Vue.component('my-component',{
  data(){
    return{
      msg:"wellcome!"
    }
}
template: '<div>{{msg}}</div>',
});

以上Vue組件須注意的幾點，倒數六天