跟着技术胖学Vue2.0—第二季第二课：Vue.extend扩展实例构造器

课程回顾

课程主要内容

1、使用Vue.extend实现一个自定义的无参数标签

课程展开

1、Vue.extend概念

简单地理解，这个API用于扩展构造器，实现更多功能，因此它的用法也是在Vue构造器外部独立使用。

2、实现一个无参数标签

Vue.extend的用法比较简单，要点就三个，其一先写tempale，其二写data，最后要在扩展构造器的外部暴露并绑定到html标签上。下面逐一来解释。

我们将自定义标签命名为为<author>，这个标签在网页中显示为一个名称，点击名称，跳转到对应的网页链接。

html中的写法就是一个空白的标签：

<author></author>

下面就是在script中的Vue.extend中写上具体的代码，注意今天的实例是不需要用到Vue构造器的。

var authorExtend = Vue.extend({
            template:"<p><a :href='authorURL'>{{authorName}}</a></p>",
            data:function(){
                return{
                    authorURL:'https://tripnoter.cn/',
                    authorName:'旅行荚'
                }
            }
})

上面的代码中，除了刚刚提到的两个要点，还要注意data后面是跟一个function，然后直接return一个对象，接着才在对象里面定义变量。另一个点是href要用v-bind绑定，上述写法是简写，我唯一的一次报错就是因为忘绑定了，也给自己提个醒。

最后是第三个要点，绑定html标签：

new authorExtend().$mount('author');

点击页面中的“旅行荚”，就可以跳转过去啦：

注意 

不建议将扩展构造器绑定在一个自定义的标签上，因为后面要学习的组件更加合适实现这个功能，建议使用id绑定的方式替换标签绑定。

其实id绑定就只需要改变两个地方，一个是html标签中用div标签加一个id名，第二个就是绑定的方式改变一下，代码如下：

html：

<div id="author"></div>

 script：

new authorExtend().$mount('#author');

---

以上就是第二季第二课的学习内容，今天的内容比较少，所以花费的时间比较少，明天再见！