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 相关文章推荐
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
jsonp跨域请求详解
Jul 13 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
Vue.js仿Select下拉框效果
Feb 18 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
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
document.write的几点使用心得
2014/05/14 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
jQuery plugin animsition使用小结
2017/09/14 jQuery
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
一篇文章搞定Python操作文件与目录
2019/08/13 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
python实现图像外边界跟踪操作
2020/07/13 Python
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
销售类个人求职信范文
2013/09/25 职场文书
模具专业自荐信
2014/05/29 职场文书
民主评议党员个人总结
2015/02/13 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
同意报考证明
2015/06/17 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
Fluentd搭建日志收集服务
2022/09/23 Servers
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers