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的时候写的学习笔记
Dec 30 Javascript
JS定时器实例
Apr 17 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
vue--vuex详解
Apr 15 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
vue分页插件的使用方法
Dec 25 Javascript
谈谈node.js中的模块系统
Sep 01 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
如何使用PHP中的字符串函数
2006/10/09 PHP
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
python验证码识别实例代码
2018/02/03 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
计算机学生的自我评价分享
2014/02/18 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
小学见习报告
2015/06/23 职场文书
运动会主持词大全
2015/07/02 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
教你快速开启Apache SkyWalking的自监控
2021/04/25 Servers
详解OpenCV曝光融合
2022/04/29 Python