vue.extend(),自己的小理解

1、Vue.extend()官网的解释

使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。

2、个人理解认识

 var myextend=Vue.extend({
 	template:'<h1>......</h1>',
 	data(){}
  })

通过他构建出来的类似与一个模板对象,也可以说,他返回的是一个更像是一个构造函数,在需要使用的地方借助于·Vue.component() 生成一个组件,然后使用。就像是我们在JS中使用的构造函数,先定义好,然后在需要使用的地方new一下。
ps: 实例化extend构造器时,传入属性需要使用propsData,而不是props

<div id="todoItem"></div>
<script>
   var todoItem = Vue.extend({
  data() {//这里必须使用方法
        return {
            todoData: [
              { id: 0, text: '张三' },
              { id: 1, text: '李四' },
              { id: 2, text: '王五' }
            ]
        }
  },
  props:['todoData'],
  template: `
        <ul>
            <li v-for='(item, i) in todoData' :key="i">
                {{ item.text }}
            </li>
        </ul>
  `
});
 new todoItem({
  propsData: {//这里必须使用propsData
      todoData: [
          { id: 0, text: '花花' },
           { id: 1, text: '花花' },
           { id: 2, text: '花花' }
 
      ]
  }
}).$mount('#todoItem')
</script>

在这里插入图片描述

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值