【vue笔记系列第三篇】Vue.extend使用

最新推荐文章于 2024-04-17 15:33:35 发布

伯爵大人

最新推荐文章于 2024-04-17 15:33:35 发布

阅读量1.7w

点赞数 14

分类专栏： vue

本文链接：https://blog.csdn.net/lixianghai2010/article/details/89005723

版权

vue 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

一，概述

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就是一个扩展构造器。可以对自定义标签进行更容易的数据绑定

伯爵大人

关注

14
点赞
踩
41

收藏

觉得还不错? 一键收藏
3
评论
【vue笔记系列第三篇】Vue.extend使用

一，概述1，定义1.1，Vue.extend返回的是一个扩展实例构造器，也就是预设了部分选项的Vue实例构造器。1.2，其主要用来服务于Vue.component，用来生成组件可以简单的理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用扩展实例构造器来生产组件实例，并挂载到自定义元素上。1.3，vue构造器生命周期2，栗子我们希望在html中只需要...
复制链接

扫一扫