4.1.3　模板

選項中主要影響模板或DOM的有el和template，屬性replace和template需要一起使用。下面對el和template進行介紹。

（1）el（類型為字符串、DOM元素或函數）：為實例提供掛載元素，通過使用CSS選擇語法來選擇綁定的元素，如el:'#app'。

（2）template（類型為字符串）：默認會將其值替換掛載元素，并合并掛載元素和模板根節點的屬性，除非模板的內容有分發slot。如果值以“#”開始，則它用作選項符，將使用匹配元素的innerHTML作為模板。常用的技巧是用<script type="x-template"></script>包含模板。例如：

    template : '<div class="template"><h2>模板</h2></div>,

上述代碼需要和replace一起使用，會用template的值替換并合并綁定的元素（el指定的元素）。詳細代碼如下：

運行的效果如圖4-5所示。

圖4-5　模板運行效果圖（一）

另外，還可以通過在script元素中寫入template的內容來進行調用，這樣會使HTML代碼和JS代碼分離，更利于閱讀和維護。代碼如下：

運行的效果如圖4-6所示。

圖4-6　模板運行效果圖（二）

提示：replace參數決定是否用模板替換掛載元素。如果設置為true（這是默認值），模板將覆蓋掛載元素，并合并掛載元素和模板根節點的attributes。如果設置為false，模板將覆蓋掛載元素的內容，不會替換掛載元素自身。

在Vue.js 2.0中則廢除了replace參數，并且強制要求Vue實例中必須要有一個根元素包圍。代碼如下：

    <script id='template' type="x-template">
       <div class='wrap'>
         <div class='div1'></div>
         <div class='div2'></div>
       </div>
    </script>

而不是：

    <script id='template' type="x-template">
       <div class='div1'></div>
       <div class='div2'></div>
    </script>