课程回顾
课程主要内容
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');
以上就是第二季第二课的学习内容,今天的内容比较少,所以花费的时间比较少,明天再见!