V记录2(文档)Vue.extend构造器

1.简单介绍

Vue.extend(options)

参数：对象

用法：使用Vue构造器，创建一个“子类”，参数是一个包含组件选项的对象，其中,data选项中必须是函数

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

2.简单举例

自定义无参数标签

下面的代码中的author就是返回的“扩展实例构造器”

var author = Vue.extend({template: "<p><a :href='url'>{{author}}</a></p>",data : function() {return {author : 'vamous',url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'}}
});

对应的html如下：

<author></author>

此时的页面必然是没有任何效果的，因为扩展实例构造器还需要挂载，如下

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

使用propsData

var author = Vue.extend({template: "<p><a :href='url'>{{author}} & {{name}}</a></p>",data : function() {return {author : 'vamous',url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'}},props : ['name']
});new author({propsData: {name : 'dear_mr'}}).$mount('#author');

可以利用propsData传递参数

挂载在普通标签上

返回的扩展实例构造器的方式和上面还是一样的，只是html里不再是自定义标签，而是一个普通标签，比如div

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

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

其实对于同一个扩展构造器而言，它的每一个实例其实是可以挂载到不同的标签上的，比如我可以这样

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

这两个标签的内容会一同显示，结果一样

V记录2(文档)Vue.extend构造器相关推荐

权限管理系统项目文档——Vue前端
文章目录第二篇前端实现篇 1. 搭建开发环境 1.1 技术基础 1.2 开发环境 1.3 创建项目 2. 前端项目案例 2.1 安装Element 2.2 页面路由 2.3 安装SCSS 2.4 ...
Vue.extend构造器
1.简单介绍 Vue.extend(options) 参数:对象用法:使用Vue构造器,创建一个"子类",参数是一个包含组件选项的对象,其中,data选项中必须是函数描述:Vu ...
无法关闭microsoft word_仅记录word文档损坏后的挣扎(亲历)
对于word文档损坏,每个人都不希望遇到,但是谁又能确保这样的事情一定不发生在自己身上.本文章写在尝试网上通用方法不可行之后,仅做最后的挣扎. 昨天我就遭遇到了这样的事情,毕业论文遭到损坏,顿时心如死 ...
计算机的文件打开记录怎么删,怎样删除最近使用的文档记录,电脑文档文件怎么删除...
隐私,一直都是人们所注重的. 在电脑的使用上,很多人也很注重隐私. 自己的私人电脑,不允许其他人擅自使用. 同时对于隐私的保护,很多人在使用完电脑后悔清除相关的记录. 大家一般都会在电脑上使用文档,那 ...
激光打印机，保留打印记录的文档
一.Server 2003 Enterprise x64 SP2 1.鼠标移到需要设置的打印机,点击右键,选择打印机属性 2.选择高级,勾选保留打印的文档 3.查看记录 4.因为是通过域用户连接共享打 ...
MathType MTEF v.5学习文档
前言 MathType是一款公式工具,可以作为插件安装到office等软件,其将公式存储两部分wmf文件和二进制objectOle对象,其中公式存储是以MTEF语言内嵌在这两部分中,这是一款MathT ...
下载并预览pdf，提示未能加载PDF文档 - vue
后端传一个字符串,前端创建了new Blob,Chrome提示无法加载PDF文档? 后面尝试使用a标签下载,提示无法打开: 控制台窗口blob和url,有显示数据,但是但不开,是什么原因呢??? 网上 ...
详细记录Word文档(包含doc文件和docx文件的上传图片会回显)转Html实现前端预览
实现了两种格式Word文档转Html的需求优点:可以实现多图的doc文档和docx文档转HTML代码,图片也会完美展示,图片不需要保存到本地服务器,直接上传到文件服务器即可,文档格式也会保留缺点: ...
随笔备忘记录-Appium_Python_Api文档
随便写点东西,有的是网上借鉴,有的是自己体会,总之都是根据自己的需求进行优化的一些东西,随笔备忘 APP功能测试: 1.业务逻辑正确性测试:产品文档.隐形需求----编写测试用例 2.兼容性测试: ( ...