Vue.extend构造器的延伸(10)

一、Vue.extend
  Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时,会自动调用“扩展实例构造器”来生产组件实例,并挂载到自定义元素上。
  使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。
  data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数
二、自定义无参数标签
如果在需求中,有多个地方用同一个东西就可以使用Vue.extend来编写一个扩展实例构造器。这和自定义组件很像,但是他没有传递任何参数,只是个静态标签。

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#mount-point')

创建了构造器之后还不会生效,要挂在到元素上才可以生效

<div id="mount-point"></div>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,758评论 0 6
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 13,814评论 4 129
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,497评论 0 29
  • 三人行,必有我师焉!团队的力量终究是最强大的,感恩在养森的事业道路上一直有你们![拥抱][拥抱][拥抱] 自从参加...
    瘦瘦塑身阅读 1,702评论 0 0
  • 王安忆说:“个人的外貌,就是他的一切。” 杨澜说:“没有人会愿意透过糟糕的外表,看到你美丽的本质。” 契诃夫说:“...
    悦半阅读 1,733评论 0 0

友情链接更多精彩内容