Vue.js--X-Templates、手动挂载Vue实例-白红宇

Vue.js--X-Templates、手动挂载Vue实例

阅读量：2443 次

发布时间：2019-05-10

本文共 825 字，大约阅读时间需要 2 分钟。

Vue提供一种定义模板的方式，在<script>标签里使用text/x-template类型，并且指定一个id，将这个id赋给template。

    
       
       
           X-Template

大多数情况下，我们都是通过new Vue()的形式创建Vue实例。但是在一些非常特殊的情况下，我们需要动态地去创建Vue实例，Vue提供了Vue.extend和$mount两个方法来手动挂载一个实例。

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

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

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

<div>Hello:Aresn</div>

除了这种方法外，以下两种写法也是可以的：

new MyComponent().$mount('#mount-div');

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

或者在文档之外渲染并且随后挂载：

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

手动挂载实例是一种比较极端的高级用法，在业务中几乎用不到，只在开发一些复杂的独立组件时可能会使用。

转载地址：http://dxsqb.baihongyu.com/

你可能感兴趣的文章