一，概述

1，定义

1.1，Vue.extend返回的是一个扩展实例构造器，也就是预设了部分选项的Vue实例构造器。

1.2，其主要用来服务于Vue.component，用来生成组件

可以简单的理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用扩展实例构造器来生产组件实例，并挂载到自定义元素上。

1.3，vue构造器生命周期

 

2，栗子
我们希望在html中只需要写<baidu></baidu>就可以显示百度，并添加百度链接 ，这和自定义组件很像，但是他没有传递任何参数，只是个静态标签。

<html>
<head>
    <title>Vue.extend扩展实例构造器</title>
</head>
<body>
    <baidu></baidu>
    <!-- <span id='baidu'>跳转</span> -->
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <script type="text/javascript">

        //使用Vue.extend，用它来编写一个扩展实例构造器。
        var baiduExtend=Vue.extend({
            template:"<p><a :href='bdurl'>{{bdname}}</a></p>",
            data:function(){
                return {
                    bdname:'百度',
                    bdurl:'https://www.baidu.com'
                }
            }
        })
        //扩展实例构造器是需要挂载的，我们再进行一次挂载
        new baiduExtend().$mount('baidu');
        //还可以通过HTML标签上的id或者class来生成扩展实例构造器，Vue.extend里的代码是一样的
        // new baiduExtend().$mount('#baidu');
    </script>
</body>
</html>

3，效果

二，分析

1，官方api地址

https://cn.vuejs.org/v2/api/#Vue-extend

1.1 页面

 

2，实验

2.1 html元素

<div id="mount-point"></div>

2.2 js写法

构造

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')

 2.3 html全文

<html>
<head>
    <title>Vue.extend扩展实例构造器</title>
</head>
<body>
    <div id="mount-point"></div>
    <!-- <span id='baidu'>跳转</span> -->
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <script type="text/javascript">
		// 创建构造器
		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')
    </script>
</body>
</html>

2.4 效果

三，总结

vue.extend就是一个扩展构造器。可以对自定义标签进行更容易的数据绑定

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue