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学习笔记（1）python数据类型

    一.数据类型计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.视频.网页等各种各样的数据,不同的数据,需要 ...

  2. perf4j+logback配置 非spring 可使用注解

    最近项目打算使用perf4j进行性能监控,由于项目没有使用spring,而又不想对代码入侵过高,打算使用注解的方式进行接入.perf4j采用AspectJ库实现AOP. 具体接入方法如下: logba ...

  3. nodejs 模块变量 应用

    exports.allcodeandname=(function(){ var fs = require('fs'); var data = fs.readFileSync(__dirname+'/a ...

  4. .net core && python

    最近.net core的发展,确实值得激动,强力推荐传教文章<.NET:持续进化的统一开发平台>http://www.cnblogs.com/wer-ltm/p/8776846.html ...

  5. Java IO: System.in, System.out, System.err

    原文链接 作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) System.in, System.out, System.err这3个流同样是常见的数据来 ...

  6. Yii2创建管理员登录

    1. 创建管理员表 进入项目根目录,在根目录执行命令: 1 $ ./yii migrate 2. 创建管理的控制器 1 $ cd console/controllers/ 编写代码如下: 123456 ...

  7. [USACO5.1] Musical Themes

    后缀数组求最长重复且不重叠子串. poj 1743 传送门 洛谷 P2743 传送门 1.子串可以“变调”(即1 3 6和3 5 8视作相同).解决办法:求字符串相邻元素的差形成新串.用新字符串求解最 ...

  8. 利用Load命令将本地文本里面的数据导入到MySQL数据库

    摘要:在使用MySQL是我们可能会遇到要向我们的表中插入大量的数据如果都使用以下的语句在命令行输入有点不太切实际,幸好MySQL为我们提供了LOAD命令可以批量的从本地文件向MySQL表中导入数据! ...

  9. –IDEA+Maven+JavaWeb+tomcat项目搭建（图文并茂，详细）

    一.创建Maven项目 1:如果刚打开IDEA,显示的是这个页面,我们直接单击 Create New Project(创建项目) 或者 File-> New-> Project 2:选中左 ...

  10. 日志框架之2 slf4j+logback实现日志架构 · 远观钱途

    如何从缤纷复杂的日志系统世界筛选出适合自己的日志框架以及slf4j+logback的组合美妙之处?此文可能有帮助 logback介绍 Logback是由log4j创始人设计的另一个开源日志组件,官方网 ...