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判断操作系统与浏览器代码分享
Jan 09 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
vue自定义指令directive实例详解
Jan 17 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 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 getsiteurl()函数
2009/09/05 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
PHP _construct()函数讲解
2019/02/03 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
Python写的贪吃蛇游戏例子
2014/06/16 Python
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
Python import自定义模块方法
2015/02/12 Python
详细介绍Python中的偏函数
2015/04/27 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
python 动态加载的实现方法
2017/12/22 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
Python post请求实现代码实例
2020/02/28 Python
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
医学专业职业生涯规划范文
2014/02/05 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
优秀护士获奖感言
2014/02/20 职场文书
个人授权委托书样本
2014/09/13 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
Python List remove()实例用法详解
2021/08/02 Python
Linux磁盘管理方法介绍
2022/06/01 Servers