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 相关文章推荐
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
AngularJS实现表单验证
Jan 28 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 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
根德YB400的电路分析
2021/03/02 无线电
php中文件上传的安全问题
2006/10/09 PHP
什么是MVC,好东西啊
2007/05/03 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
javascript数组的使用
2013/03/28 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
py2exe 编译ico图标的代码
2013/03/08 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
python实现数字炸弹游戏程序
2020/07/17 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
智能钱包:Ekster
2019/11/21 全球购物
留学自荐信写作方法
2014/01/27 职场文书
委托书样本
2014/04/02 职场文书
学生操行评语大全
2014/04/24 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
python pyhs2 的安装操作
2021/04/07 Python
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS