今天看了VUE預設例項化的這段程式碼：

new Vue({

  el: '#app',

  components:{App},

  template: '<App/>'

})

首先el這樣的引數意義比較明顯，就是要被替換的index.html中的元素

template網上查了很久，都說是用<app></app>替換index.html裡面的<div id="app"></div>，但實驗結果並不是這樣，太坑了。

實際上<App/>寫法表示要選擇的元件，因為components引數裡其實可以放多個元件物件，比如：components:{App，App2，App3},如果想用App2，則需要設定template: '<App2/>',這是template引數最常見的用法。

第二種用法是以#開頭，表示選擇器，他會獲取頁面上的元素來替換el引數裡的元素。例如：

大家疑惑的可能是<script type="text/x-template" id="myComponent"> 這段js

實際上它的作用只是為了讓它內部的內容隱藏，這樣我們可以實際需要使用的時候再通過template替換的方式使用。我們也可以這樣：

<template id="myComponent"> <div>This is a component!</div> </template> 通過template標籤達到同樣效果。

這段程式碼也反映了一個情況，就是通過#獲取的元素不一定是index.html裡的，因為元件的渲染是隨處可有的，template並不是只是根例項化裡用。

第三種就是直接的文字，例如

var vm = new Vue({
  el: '#app',
  template: '<div>第三種寫法</div>',
})

這裡要注意的是文字外面必須有個html標籤，例如div或span這種，不然無效，原因不知。