Vue2.0 【第二季】第2节 Vue.extend构造器的延伸

一、什么是Vue.extend

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

由于我们还没有学习Vue的自定义组件，所以我们先看跟组件无关的用途。

二、自定义无参数标签

我们想象一个需求，需求是这样的，要在博客页面多处显示作者的网名，并在网名上直接有链接地址。我们希望在html中只需要写，这和自定义组件很像，但是他没有传递任何参数，只是个静态标签。

html代码：

<author></author>

js代码：我们的Vue.extend该登场了，我们先用它来编写一个扩展实例构造器。代码如下：

var authorURL = Vue.extend({

	template:"<p><a :href='authorURL'>{{authorName}}</a></p>",

	data:function(){

		return{

			authorName:'da0sy',

			authorURL:"https://www.cnblogs.com/Elva3zora/"

		}

	}

});

//这时html中的标签还是不起作用的，因为扩展实例构造器是需要挂载的，我们再进行一次挂载。

new authorURL().$mount("author");

//这时我们在html写<author></author>就是管用的。

我们看一下全部代码：

<!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的选择器的方法，来进行挂载就可以了。

html代码：

<div id="author"></div>

相应的js代码改为：

new authorURL().$mount("#author");

PS：今天学到的快捷键：SHIFT+WINDOE键+下 可以快速小化窗口至任务栏

Vue2.0 【第二季】第2节 Vue.extend构造器的延伸的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础：JS面向对象&字面量& this字

    缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战：Vuex 其实很简单

    前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础：ES6初体验 & 模块化编程

    缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...

  4. Vue.extend构造器和$mount实例构造组件后可以用$destroy()进行卸载,$forceUpdate()进行更新,$nextTick()数据修改

    html <div id="app"> </div> <p><button onclick="destroy()"&g ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  6. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  7. 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...

  8. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  9. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史

    ---新内容开始--- 番外 大家周一好呀,又是元气满满的一个周一呀!感谢大家在周一这个着急改Bug的黄金时期,抽出时间来看我的博文哈哈哈,时间真快,已经到第十四篇博文了,也很顺顺(跌跌)利利 (撞撞 ...

随机推荐

  1. fiddler导出请求返回的响应数据

    或者右键 选择response导出

  2. Servlet与JSP概念理解

    Servlet是用Java编写的服务端程序.需要部署到servlet容器上才能运行,tomcat 就是一个servlet容器. 1.Servlet的生命周期 客户端请求该 Servlet --> ...

  3. 流量全球第4的Reddit到底是一个怎样的网站？

    对于喜欢NBA的我来说,Reddit是经常接触的一个网站.或者说,很多关于NBA的最新消息都是从Reddit上传出来的.值得一提的是,NBA版块在Reddit所有版块中用户活跃程度排名第三,也是体育版 ...

  4. js怎么获取动态链式属性呢？

    动态链式属性?我自己起的名字,样子就是 var data={ list:{ name:'zxf' } }var prop="list.name";console.log(data[ ...

  5. let和const区别

    let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. const命令 const声明一个只读的常量.一旦声明,常量的值就不能改变.

  6. TableViewComponent v2

    Unity UGUI 自带的 ScrollView 控件不支持复用滚动内容,在数量大的情况下,界面容易卡顿 借鉴其他游戏控件,写了个可复用的滚动组件,扩展.优化了ScrollView TableVie ...

  7. 安卓注解处理器-processor

    最近在学习安卓开源框架发现,很多的开源框架都使用到了注解处理器,例如EventBus3.0.本文通过一个简单的Demo来介绍如何使用注解处理器.Demo链接为https://github.com/cu ...

  8. 你会选永生吗？NASA实验为火星宇航员提供年龄逆转药

    ​​宇宙辐射不仅是宇航员面临的问题.在乘坐飞机的过程中,我们所有人都会暴露在宇宙辐射中.一趟从伦敦到新加坡再到墨尔本的飞行中,人体受到的辐射量就相当于进行一次胸部X射线透视. ​在去年12月NASA举 ...

  9. IPFS初窥

    虽然区块链有很多令人兴奋的特性,但是也有其固有的缺点.比如,文件或者长度较长的文本信息就不适合存储在链上.那么如何解决这个缺点呢?一个解决方案就是IPFS(Interplanetary File Sy ...

  10. OO第四单元总结暨学期总结

    一.第四单元作业架构设计 我们第四单元围绕UML图展开,在第四单元开始之前,本来以为我们的工作是学习如何使用UML工具,开始后才意识到我们要做的是解析UML类图.顺序图和状态图.当然,让我们解析的只是 ...