Vue extend的基本用法(实例详解)


Posted in Javascript onDecember 09, 2019

Vue.extend 属于 Vue 的全局 API,在实际业务开发中我们很少使用,因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。

我们创建Vue实例时,都会有一个el选项,来指定实例的根节点,如果不写el选项,那组件就处于未挂载状态。Vue.extend 的作用,就是基于 Vue 构造器,创建一个‘ 子类 ',它的参数跟new Vue的基本一样,但data要跟组件一样,是个函数,再配合$mount,就可以渲染组件,并且挂载到任意指定的节点上,比如body(这是单文件组件做不到的)

下面我们就来看两个例子:

1.在单文件组件中使用

<template>
 <div id="about"></div>
</template>
<script>
import Vue from 'vue/dist/vue.js'
var Profile = Vue.extend({
 template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
 data: function () {
  return {
   firstName: 'Walter',
   lastName: 'White',
   alias: 'Heisenberg'
  }
 }
})
// 创建 Profile 实例,并挂载到一个元素上。
let profile=new Profile().$mount();
 
export default {
 mounted(){
  let divid=document.getElementById('about');
  divid.appendChild(profile.$el)
 }
}
</script>

这里需要注意几个点:

报错信息

Vue extend的基本用法(实例详解)

如果有小伙伴遇到了这个问题,那么你导入的是

import Vue from 'vue'

这个时候只需要修改成即可解决问题

import Vue from 'vue/dist/vue.js'

在单文件组件中的挂载问题:

因为这里是通过获取节点的方式添加到某个元素内,所以一定要在钩子函数中挂载,确保当前页面的dom节点加载完成。

mounted(){
  let divid=document.getElementById('about');
  divid.appendChild(profile.$el)
 }

2.单独构建js文件

//index.js
 
import Vue from 'vue/dist/vue.js'
 
export default function Create(node){
  var notiful=Vue.extend({
    template:`<p>{{name}}</p>`,
    data(){
      return {
        name:"liuhuas"
      }
    }
  })
  
  var noti=new notiful().$mount();
  document.getElementById(node).appendChild(noti.$el);
}

创建完成后我们就可以在任何地方引入这个js文件 ,并执行Create方法,注意的是这里的Create方法里面也获取了dom,那么就需要在相应的钩子函数中去执行这个方法。

总结

以上所述是小编给大家介绍的Vue extend的基本用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
简单的js计算器实现
Oct 26 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
微信小程序实现聊天室
Aug 21 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 #Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 #Javascript
vue如何使用async、await实现同步请求
Dec 09 #Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 #Javascript
vue新建项目并配置标准路由过程解析
Dec 09 #Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 #Javascript
简述Vue中容易被忽视的知识点
Dec 09 #Javascript
You might like
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
学校安全工作制度
2014/01/19 职场文书
高二物理教学反思
2014/02/08 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
担保书怎么写
2014/04/01 职场文书
中职生求职信
2014/07/01 职场文书
真诚的求职信
2014/07/04 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
2016年寒假见闻
2015/10/10 职场文书