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. python学习笔记（0）python基础概念

    一.字符集 说字符集之前,先说下2进制的故事,计算机比较傻只认识2进制,什么是2进制,就是0,1,计算机只认识这俩数字,其他的都不认识,这样的0或1为一"位",规定8位为一个字节, ...

  2. 升级mongodb数据库2.6.6到3.0.3，切换引擎，主从同步数据

    只升级mongodb的版本极为简单,更新/替换 bin/目录下的可执行文件即可. debian和osx上的升级,按步骤来,没什么好说的. http://docs.mongodb.org/manual/ ...

  3. Mac下通过FFMpeg实现Android手机推流和播放

    一.Mac下搭建推流服务器(Nginx+RTMP+FFMpeg) 安装x264 git clone git://git.videolan.org/x264.git cd x264 ./configur ...

  4. node 环境下简单web服务器搭建代码

    零.前置 已经安装 node 环境. 一.代码片段 var http = require('http'); var path = require('path'); var fs = require(' ...

  5. java异常分析；剖析printStackTrace和fillInStackTrace

    Java异常的栈轨迹(Stack Trace) 捕获到异常时,往往需要进行一些处理.比较简单直接的方式就是打印异常栈轨迹Stack Trace.说起栈轨迹,可能很多人和我一样,第一反应就是printS ...

  6. UAC table

    CREATE TABLE `sys_dept` ( `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '编号', `name` varchar(50) D ...

  7. 快速搭建本地Nuget服务

    一  创建Nuget 服务项目 1.创建一个空白的asp.net web项目,需要.net 4.6以上 2.在Nuget中搜索 nuget.server ,可以看到是由 .Net 基金再维护的,几乎傻 ...

  8. 吴裕雄--天生自然HTML学习笔记：HTML 元素

    HTML 文档由 HTML 元素定义. HTML 元素 开始标签 * 元素内容 结束标签 * <p> 这是一个段落 </p> <a href="default. ...

  9. 吴裕雄--天生自然python编程：pycharm常用快捷键问题

    最近在使用pycharm的时候发现不能正常使用ctrl+c/v进行复制粘贴,也无法使用tab键对大段代码进行整体缩进.后来发现是因为安装了vim插件的问题,在setting里找到vim插件,取消勾选即 ...

  10. OpenGL ES 学习笔记 - Overview - 小旋的博客

    移动端图形标准中,目前 OpenGL ES 仍然是比较通用的标准(Vulkan 则是新一代),这里新开一个系列用于记录学习 OpenGL ES 的历程,以便查阅理解. OverView OpenGL ...