Vue extend的基本用法(实例详解)(IT技术) |
您所在的位置：网站首页 › extend的用法 › Vue extend的基本用法(实例详解)(IT技术) |
Vue extend的基本用法(实例详解)(IT技术)
|
Vue.extend 属于 Vue 的全局 API，在实际业务开发中我们很少使用，因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。 我们创建Vue实例时，都会有一个el选项，来指定实例的根节点，如果不写el选项，那组件就处于未挂载状态。Vue.extend 的作用，就是基于 Vue 构造器，创建一个‘ 子类 '，它的参数跟new Vue的基本一样，但data要跟组件一样，是个函数，再配合$mount，就可以渲染组件，并且挂载到任意指定的节点上，比如body（这是单文件组件做不到的） 下面我们就来看两个例子： 1.在单文件组件中使用 import Vue from 'vuehttp://199206888909329.oss.huaweicloud.52xs.com.cn/dist/vue.js' var Profile = Vue.extend({ template: '{{firstName}} {{lastName}} aka {{alias}} ', 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) } }这里需要注意几个点： 报错信息
如果有小伙伴遇到了这个问题，那么你导入的是 import Vue from 'vue' 这个时候只需要修改成即可解决问题 import Vue from 'vuehttp://199206888909329.oss.huaweicloud.52xs.com.cn/dist/vue.js' 在单文件组件中的挂载问题： 因为这里是通过获取节点的方式添加到某个元素内，所以一定要在钩子函数中挂载，确保当前页面的dom节点加载完成。 mounted(){ let divid=document.getElementById('about'); divid.appendChild(profile.$el) }2.单独构建js文件 //index.js import Vue from 'vuehttp://199206888909329.oss.huaweicloud.52xs.com.cn/dist/vue.js' export default function Create(node){ var notiful=Vue.extend({ template:`{{name}} `, data(){ return { name:"liuhuas" } } }) var noti=new notiful().$mount(); document.getElementById(node).appendChild(noti.$el); }创建完成后我们就可以在任何地方引入这个js文件 ，并执行Create方法，注意的是这里的Create方法里面也获取了dom，那么就需要在相应的钩子函数中去执行这个方法。 总结 以上所述是小编给大家介绍的Vue extend的基本用法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！ 相关文章vue基于v-charts封装双向条形图的实现代码vue如何使用async、await实现同步请求Vue替代marquee标签超出宽度文字横向滚动效果vue新建项目并配置标准路由过程解析使用vuex较为优雅的实现一个购物车功能的示例代码简述Vue中容易被忽视的知识点vue路由传参三种基本方式详解vue使用nprogress实现进度条vue基于v-charts封装双向条形图的实现代码微信小程序图片加载失败时替换为默认图片的方法 猜您喜欢
vue基于v-charts封装双向条形图的实现代码 这篇文章主要引见了vue基于v-charts封装双向条形图的完成代码，文中经过示例代码引见的十分细致，对大家的学习或者工作具有一定的参考学习价值，需求的朋友们下面随着小编来一同学习学习吧..
微信小程序图片加载失败时替换为默认图片的方法 这篇文章主要引见了微信小程序图片加载失败时交换为默许图片的办法,本文分状况经过实例代码给大家解说，需求的朋友能够参考下.. 05-17vue如何使用async、await实现同步请求 05-17Vue替代marquee标签超出宽度文字横向滚动效果 05-17vue新建项目并配置标准路由过程解析 05-17使用vuex较为优雅的实现一个购物车功能的示例代码 05-17简述Vue中容易被忽视的知识点 05-17vue路由传参三种基本方式详解 网友评论 推荐文章
细数软件工程各阶段必不可少的那些图 各种反弹shell方法总结 Mabitis Unable to preventDefault inside passive event listener due to target being treated as passive 各种反弹shell方法总结 Java中的循环语句 MySQL 索引 git recommend(alive) [白话解析] 深入浅出支持向量机(SVM)之核函数 html小工具——文章注释编辑器 最新文章 1vue使用nprogress实现进度条 2javascript数组元素删除方法delete和splice解析 3vue vant Area组件使用详解 4JS中的模糊查询功能 5详解一些适用于Node.js的命名约定 6微信域名检测接口调用演示步骤（含PHP、Python） 7vue实现数字动态翻牌的效果（开箱即用） 8详解小程序BackgroundAudioManager踩坑之旅 9vue 实现LED数字时钟效果（开箱即用） 10Vue学习笔记之计算属性与侦听器用法Copyright 2022 版权所有 软件发布 声明：所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们 |
【本文地址】
今日新闻 |
推荐新闻 |