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 相关文章推荐
非常不错的一个javascript 类
Nov 07 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
javascript中的void运算符语法及使用介绍
Mar 10 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 Javascript
js实现自定义滚动条的示例
Oct 27 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
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
php实现的用户查询类实例
2015/06/18 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
Python实现队列的方法
2015/05/26 Python
Python函数式编程指南(二):从函数开始
2015/06/24 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
详解Python3 基本数据类型
2019/04/19 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
Python笔记之代理模式
2019/11/20 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
教师实习期自我鉴定
2013/10/06 职场文书
2014年母亲节寄语
2014/05/07 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
小学生作文评语集锦
2014/12/25 职场文书
租赁协议书
2015/01/27 职场文书
2015年维修工作总结
2015/04/25 职场文书
python解析json数据
2022/04/29 Python