Vue.extend构造器的延伸

每天学一点，自己总结一下。记录一个萌新的爬坑之路，如果有错欢迎各位大佬指正O(∩_∩)O

Vue.extend

Vue.extend返回一个扩展实例构造器。经常用于自定义组件，今天看下基本和组件无关的用法，和组件配合使用的用法等组件学习的时候再用。

首先是定义在vue实例外部，然后我们定义一个自定义标签，可以跳转到技术胖大佬的官网页面。话不多说直接上代码。

    <div id="peoplename"> </div>
    <peoplename></peoplename>

    <script type="text/javascript">
        var peoplename = Vue.extend({
            template: "<p><a v-bind:href='peoplenameUrl'>{{peoplenameText}}</a></p>",
            data: function() {
                return {
                    peoplenameUrl: 'http://www.jspang.com',
                    peoplenameText: "技术胖"
                }
            }
        })
        new peoplename().$mount('peoplename')
        new peoplename().$mount('#peoplename')
    </script>

这里需要注意的几点有： 第一点:data不能直接定义成对象，需要定义成函数，通过return返回值， 第二点:Vue.extend()创建的是一个Vue构造器，需要通过mount('xxx')与jquery的用法类似，你可以用id、class、元素直接操作。

结语

每天记录一下学了什么，希望有所进步。萌新有说不清楚或者说错的地方欢迎大佬们吊打。??