本节知识点
Vue.extend 概述
Vue.extend 使用
Vue.extend 概述
- Vue.extend 返回的是一个"扩展实例构造器",也就是预设了部分选项的Vue实例构造器,经常服务于Vue.component用来生成组件,也可以简单理解为在模板中遇到该组件名称作为标签的自定义元素，会自动调用"扩展实例构造器"来生产组件实例，并挂载到自定义元素上面.
自定义无参数标签
- 我们又一个需求。要在博客页面多处显示作者的网名，并在网名上面有链接地址。我们希望在HTML标签里面用
<hello></hello>这个和自定义组件很像但是他没有传递任何参数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<hello> </hello>
</body>
<script>
var hello = Vue.extend({
template:"<p><a :href='url'>{{name}}</a></p>",
data:function(){
return {
url:"http://www.baidu.com",
name:"瘾君子"
}
}
});
//挂载到元素上
new hello().$mount('hello');
</script>
</html>
