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. 堆优DIJ模板

    Dij:贪心思想的单源最短路,时间复杂度O(n^2). Dij算法流程: d数组记录源点s到每个点的距离,若无边则设为inf,标记源点: 选出d数组中未标记的最小值,该节点记为k,并标记k为已求出最短 ...

  2. bug宝典linux篇 LC_CTYPE: cannot change locale (en_US.UTF-8): No such file or directory（转）

    升级glibc库后,使用xShell登录linux,提示: Connecting to ... Connection established. To escape to local shell, pr ...

  3. JAVA数据结构——单链表

    链表:一. 顺序存储结构虽然是一种很有用的存储结构,但是他有如下几点局限性:1. 因为创造线性表的时候已经固定了空间,所以当需要扩充空间时,就需要重新创建一个地址连续的更大的存储空间.并把原有的数据元 ...

  4. 浏览器证书问题，chorm,ie,edge,safari都会去读系统证书，firefox例外

    坑爹 没想过浏览器兼容的问题. 为系统安装用户证书后, firefox一直无法连接 提示 连接 www.httpsserver.com:8985 时发生错误. SSL 对等端无法协商出一个可接受的安全 ...

  5. 使用junit测试springMVC项目提示ServletContext找不到定义错误

    原文链接:https://blog.csdn.net/liu_gan/article/details/78400627 @RunWith(SpringJUnit4ClassRunner.class) ...

  6. jquery mobile AJAX特性的陷阱

    简单情况是 MVC 重定向,URL不变 试了N种方式,跳来跳去,无解,服务端跳,写JS跳,生成跳转中间页跳.失败 后来一看,明明已经跳到新页了,样式什么还是原页的,有点火大了. 出去溜一圈,喝杯水,和 ...

  7. Nginx笔记总结八:ngx_http_core_module模块中的变量

    $arg_patameter HTTP请求中某个参数的值,如/index.php?site=www.ttlsa.com,可以用$arg_site取得www.ttlsa.com这个值 $args HTT ...

  8. 吴裕雄--天生自然 R语言开发学习：时间序列（续三）

    #-----------------------------------------# # R in Action (2nd ed): Chapter 15 # # Time series # # r ...

  9. java MVC 自定义类型转换器(Formatter、AnnotationFormatterFactory)

    下面一个事例,是将传入的一个身份证号,转换成一个对象(提取身份证号的地址.出身日期.性别等) 实体类 Person 有三个字段如下: String province; //地址 Date birthd ...

  10. 阿里凭啥比腾讯更会和Groupon相处好？

    提起Groupon,大部分人对其第一反应就是那个"过气"的团购网鼻祖和与腾讯合作推出的国内团购网站"高朋网",死相极惨!虽然马化腾表示是双方准备不足的原因,但却 ...