4.1.3　模板

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

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

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

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

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

運(yùn)行的效果如圖4-5所示。

圖4-5　模板運(yùn)行效果圖（一）

另外，還可以通過在script元素中寫入template的內(nèi)容來進(jìn)行調(diào)用，這樣會(huì)使HTML代碼和JS代碼分離，更利于閱讀和維護(hù)。代碼如下：

運(yùn)行的效果如圖4-6所示。

圖4-6　模板運(yùn)行效果圖（二）

提示：replace參數(shù)決定是否用模板替換掛載元素。如果設(shè)置為true（這是默認(rèn)值），模板將覆蓋掛載元素，并合并掛載元素和模板根節(jié)點(diǎn)的attributes。如果設(shè)置為false，模板將覆蓋掛載元素的內(nèi)容，不會(huì)替換掛載元素自身。

在Vue.js 2.0中則廢除了replace參數(shù)，并且強(qiáng)制要求Vue實(shí)例中必須要有一個(gè)根元素包圍。代碼如下：

    <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>