VueJS----[全局API-2.2]----Vue.extend构造器的延伸

最新推荐文章于 2024-10-04 08:53:03 发布

_cheny

最新推荐文章于 2024-10-04 08:53:03 发布

阅读量591

点赞数

分类专栏： VueJS 文章标签： VueJS Vue.extend

本文链接：https://blog.csdn.net/u010996565/article/details/81211949

版权

VueJS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Vue.extend构造器的延伸

1.什么是Vue.extend?

Vue.extend返回的是一个扩展实例构造器，也就是预防了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用扩展实例构造器来生产组件实例，并挂载到自定义元素上。
由于我们还没学习vue的自定义组件，所以我们先看跟组件无关的用途

2.自定义无参数标签

我们拟定一个需求，要在博客页面多出显示作者的名字，并点击名字会跳转到指定网页，当然，有同学说这很简单，一个超连接就可以搞定，那么我们如果不用超链接这个标签，想用自定义的标签怎么来做呢，那么我们就需要用到Vue.extend这个api了，我们先用它来编写一个扩展实例构造器，代码如下：

var author = Vue.extend({
    template:"<p><a :href='authorUrl'>{{authorName}}<a/></p>",
    data:function(){
        return{
            authorName:'cheny',
            authorUrl:'http://www.baidu.com'
        }
    }
});

这个时候直接在html中写这个标签是没有效果的，因为扩展实例构造器是需要挂载的，我们对它进行挂载

 new author().$mount('author');

这个时候我们在html中写author这个标签是可以用的，
new author().$mount(”);这个挂载的方法里面可以像jQuery一样，可以对id进行绑定(#xxx),对类样式进行绑定(“.xxx”)等，

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.extend 扩展实例构造器</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>vue.extend 扩展实例构造器</h1>
    <hr>
    <author></author>
    <div id="cheny"></div>

    <script type="text/javascript">
        var author = Vue.extend({
            template:"<p><a :href='authorUrl'>{{authorName}}<a/></p>",
            data:function(){
                return{
                    authorName:'cheny',
                    authorUrl:'http://www.baidu.com'
                }
            }
        });
        new author().$mount('author');
        new author().$mount('#cheny');
    </script>

</body>
</html>