Vue X-Template 与 手动挂载实例

前面的话

这篇文章将介绍两个Vue中高级用法，虽在开发中很少用到，但了解一下也是好的。

X-Template

如果没有使用webpack、gulp等工具，当我们使用组件template拼接HTML代码时，效率很低。Vue提供了一种定义模板的方式，在< script>标签里使用text/x-template类型，并且指定一个id，将这个id赋给template。

<div id="app1">
        <my-component></my-component>
        <script type="text/x-template" id="myComponent">
        <div>这里是模板内容</div> 
        </script>
    </div>
    <script>
     Vue.component('my-component',{
        template: '#myComponent'
    })
    var app1 = new Vue({
        el: '#app1'
    })
     </script>

[template]
也可以使用元素来写HTML代码，不需要type属性，还是要指定id

    <div id="app2">
        <m-component></m-component>
    </div>
    <template id="mComponent">
            <div>这是模板内容</div>
    </template>
   <script>
 var app2 = new Vue({
        el: '#app2',
        components: {
            'm-component': {
                template: '#mComponent'
            }
        }
    })
</script>

这两种模板分离可以满足一般的小型产品的开发。在后面会介绍使用webpack来编译.vue的单文件，更好的解决HTML书写问题 .

手动挂载实例

我们现在创建的实例都是通过new Vue()的形式创建出来的。在一些特殊的情况在，我们需要动态地去创建Vue实例。

Vue提供了Vue.extend和$ mount两个方法来手动挂载一个实例。

Vue.extend是基础Vue构造器，创建一个子类，参数是一个包含组件选项的对象。

如果Vue实例在实例化时没有收到el选项，它就处于"未挂载"状态，没有关联的DOM元素。可以使用$mount()手动挂载一个为挂载的实例。这个方法返回实例自身，因而可以链式调用其他实例方法。

  <div id="mount-div"></div>
  <script>
// 创建一个子类组件,参数是一个包含template选项的对象
    var app3 = Vue.extend({
        template:`
        <div>hello:{{name}}</div>
        `,
        data() {
            return {
                name: 'Arean'
            }
        }
    });
    // $mount 手动挂载一个未挂载的实例
    new app3().$mount("#mount-div");  
</script>

运行后，id为mount-div的div元素会被替换为组件app3的template的内容:

除了这种写法，还有两种写法：

第一种：

new app3({
        el: '#mount-div'
   })

第二种： 在文档之外渲染并且随后挂载

    var component = new app3().$mount();
    document.getElementById('mount-div').appendChild(component.$el);