Vue全局API之Vue.extend(extend构造器)

使用步骤:
1.在全局中使用Vue.extend()方法,里面参数是一个对象,写法跟组件类似;
2.把构造器挂载在dom元素上;(使用标签选择器挂载在dom元素上)

    <div id="app">
        <h3>构造器的使用</h3>
        <auther id="author"></auther>
    </div>

    <script>
    // 比如:我有一个需求:像a标签一样点击跳转,那我们就可以使用构造器来实现(实际开发多用在组件上)
    // 1.使用extend方法
        let authorExtend=Vue.extend({
            template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",
            data:function(){
                return {
                    authorName:'jsPang',
                    authorUrl:"https://www.baidu.com/"
                }
            }
        }) 
        // 2.把构造器挂载在dom元素上
        // new authorExtend().$mount('author')//这里以author标签命名
        // 也可以挂载在普通标签上
        new authorExtend().$mount('#author')//只要找到这个id的标签即可
    </script>

实现效果: