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>