VUE学习之路（二）全局API 之Vue.extend

一。Vue.extend定义

Vue.extend返回的是一个“拓展实例构造器”，也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用“拓展实例构造器”来生产组件实例，并挂载到自定义元素上。

<!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">
    <title>vue.extend 扩展实例构造器</title>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js" ></script>
</head>
<body>
    <h1>vue.extend 扩展实例构造器</h1>
    <hr>
    <author></author>

    <!-- 一般不推荐使用扩展实例构造器，推荐使用下面的div方式。别忘记还得修改js -->
    <div id="author"></div>

    <script>
        var authorURL = Vue.extend({
            template : "<p><a :href='authorURL'>{{ authorName }}</a></p>",
            data : function(){
                return{
                    authorName : 'JSPang',
                    authorURL : "http://baidu.com"
                }
            }
        });
        //所有的扩展器都需要一个另外的操作：绑定/加载。操作如下：
        new authorURL().$mount("author");
        //Vue 的$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。
        //当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。
        
        //这种扩展常用于：写一个全局扩展

        //使用diiv需要把JS进行如下修改
        new authorURL().$mount("author");
    </script>
</body>
</html>

PS::如果在编程中真的需要使用扩展的方式，不建议用上述代码的形式，建议使用id的形式。

VUE学习之路（二）全局API 之Vue.extend

猜你喜欢