Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用“扩展实例构造器”来生产组件实例，并挂载到自定义元素上。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>vue.extend-扩展实例构造器</title>
</head>
<body>
    <h1>vue.extend-扩展实例构造器</h1>
    <hr>
    <author></author>
 
    <script type="text/javascript">
       var authorExtend = Vue.extend({
           template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",
           data:function(){
               return{
                   authorName:'JSPang',
                   authorUrl:'http://www.jspang.com'
               }
           }
       });
       new authorExtend().$mount('author');
    </script>
</body>
</html>
 
还可以通过HTML标签上的id或者class来生成扩展实例构造器，Vue.extend里的代码是一样的，只是在挂载的时候，我们用类似jquery的选择器的方法，来进行挂载就可以了。

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


Vue2.0 - 构造器的延伸 Vue.extend的更多相关文章

  1. vue2.0 项目搭建 和vue 2.0 electron 项目搭建

    1.关于electron vue 项目的搭建 全局或者局部安装项目vue: 脚手架指令生成: npm install -g vue-cli vue init simulatedgreg/electro ...

  2. Vue2.0学习笔记：Vue事件修饰符的使用

    事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...

  3. Vue.extend动态注册子组件

    写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,使用起来也蛮不错的. is 预期:string | Object (组件的选项对象) ...

  4. Vue2.0组件的继承与扩展

    如果有需要源代码,请猛戳源代码 希望文章给大家些许帮助和启发,麻烦大家在GitHub上面点个赞!!!十分感谢 前言 本文将介绍vue2.0中的组件的继承与扩展,主要分享slot.mixins/exte ...

  5. vue2.0与实战开发

    慕课网实战 百度云 web前端实战: Node.js入门到企业Web开发中的应用 Web前端性能优化 让你的页面飞起来 前端跳槽面试必备技巧 前端JavaScript面试技巧全套 node.JS 线上 ...

  6. vue2.0自学教程(一)：走进vue2.0大观园

    人狠话不多,咱直入主题吧! 开发软件: Visual Studio Code 支持环境: nodejs+windows 版本: vue2.0 1.初识vuevue是一个前端框架,使用MVVM(Mode ...

  7. Vue vue.extend 和vue.component 两则之间的区别

    Vue.extend 返回的是一个 扩展实例构造器, 也就是一个预设了部分选项的Vue实例构造器 Var myExtend = Vue.extend({ //预设选项 })//返回一个 扩展实例构造器 ...

  8. vue 之 Vue.extend()

    Vue.extend( options ) 参数: {Object} options 用法: 使用基础 Vue 构造器,创建一个“子类”.参数是一个包含组件选项的对象. data 选项是特例,需要注意 ...

  9. vue2.0的虚拟DOM渲染

    1.为什么需要虚拟DOM 前面我们从零开始写了一个简单的类Vue框架(文章链接),其中的模板解析和渲染是通过Compile函数来完成的,采用了文档碎片代替了直接对页面中DOM元素的操作,在完成数据的更 ...

随机推荐

  1. 判断一个字符串是否为GUID的方法

    在.net4.0后出现的TryParse方法可以完成这件事情,至于4.0之前的话,也只能是guid.parse()这个方法加上异常去判断了. 方法具体如下: Guid newGuid = Guid.E ...

  2. 【洛谷5390】[Cnoi2019] 数学作业（位运算）

    点此看题面 大致题意: 给你一个集合,求所有子集异或和之和. 大致思路 首先,我们很容易想到去对二进制下每一位分别讨论. 枚举当前位,并设共有\(x\)个数当前位上为\(1\),则有\((n-x)\) ...

  3. 【BZOJ4001】[TJOI2015] 概率论（卡特兰数）

    点此看题面 大致题意: 问你一棵\(n\)个节点的有根二叉树叶节点的期望个数. 大致思路 看到期望,比较显然可以想到设\(num_i\)为\(i\)个节点的二叉树个数,\(tot_i\)为所有\(i\ ...

  4. iOS Dispatch_sync 阻塞线程的原因

    大家的知道在主队列上使用dispatch_sync(), - (void)testSyncMainThread { dispatch_queue_t main = dispatch_get_main_ ...

  5. python实现二叉树的镜像

    题目描述 操作给定的二叉树,将其变换为源二叉树的镜像. 输入描述: 二叉树的镜像定义:源二叉树 8 / \ 6 10 / \ / \ 5 7 9 11 镜像二叉树 8 / \ 10 6 / \ / \ ...

  6. Feign + Hystrix 服务熔断和服务降级

    本机IP为  192.168.1.102 1.    新建 Maven 项目   feign 2.   pom.xml <project xmlns="http://maven.apa ...

  7. 如何更改VirtualBox虚拟电脑内存大小

  8. js打印div指定区域内容

    <script> function myPrint(obj){ var newWindow=window.open("打印窗口","_blank") ...

  9. AJAX Control Toolkit的AsynFileUpload控件资料收集

    基于AJAX的文件上传显示进度条实现 http://plkong.iteye.com/blog/238159 asp.net ajax AjaxFileUpload使用 多文件上传 http://bl ...

  10. nodejs fs路径

    引用:https://www.cnblogs.com/guangzhou11/p/7705257.html require()别的js文件的时候,将执行那个js文件. 注意: require()中的路 ...