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延时重复执行函数 lLoopRun.js
Jun 29 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
JS中如何设置readOnly的值
Dec 25 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
angular.js分页代码的实例
Jul 27 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
vue中动态绑定表单元素的属性方法
Feb 23 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 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 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
React中的refs的使用教程
2018/02/13 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
Python 文件和输入输出小结
2013/10/09 Python
Python中实现对list做减法操作介绍
2015/01/09 Python
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
Python OpenCV获取视频的方法
2018/02/28 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
一名女生的自荐信
2013/12/08 职场文书
实习自我鉴定
2013/12/15 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
检讨书范文1000字
2015/01/28 职场文书
Python 内置函数速查表一览
2021/06/02 Python