Vue.js--X-Templates、手动挂载Vue实例_vue docx-templates-CSDN博客

本文链接：https://blog.csdn.net/cold___play/article/details/102564698

X-Templates

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>X-Template</title>
</head>
<body>
    <div id="app">
        <my-component></my-component>
        <script type="text/x-template" id="my-component">
            <div>这是组件的内容</div>
        </script>
    </div>
    <script>
        Vue.component('my-component',{
            template: '#my-component'
        });

        var app = new Vue({
            el: '#app'
        });
    </script>
</body>
</html>

手动挂载Vue实例

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>手动挂载实例</title>
</head>
<body>
    <div id="mount-div">

    </div>
    <script>
        var MyComponent = Vue.extend({
            template: '<div>Hello:{{name}}</div>',
            data: function () {
                return {
                    name: 'Aresn'
                }
            }
        });

        new MyComponent().$mount('#mount-div');
    </script>
</body>
</html>

运行后，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);

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