$mount方法是用来挂载我们的Vue.extend扩展的

最新推荐文章于 2024-11-09 21:27:08 发布

转载最新推荐文章于 2024-11-09 21:27:08 发布 · 505 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Model-Zachary/p/6947659.html

文章标签：

#javascript #ViewUI

本文介绍如何使用Vue.js的extend方法创建组件，并通过实例的$mount方法将其挂载到DOM元素上。示例代码展示了如何定义一个简单的Vue组件，并指定其模板，最后将该组件挂载到页面中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<body>
        <div id="app">
           <diy></diy>
        </div>
</body>
    <template id="tmp">
        <div>用Vue.extend构造器生成一个组件,并用实例$mount挂载上去</div>
    </template>

js

 var demo = Vue.extend({
             template:`#tmp`   
        })
        new demo().$mount('diy')

转载于:https://www.cnblogs.com/Model-Zachary/p/6947659.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34347651

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue2.x将Vue文件编写的组件使用API方式动态创建

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

10-03

1624

Vue.js的核心设计思想之一是组件化，通过将页面拆分成多个独立的、可复用的组件来提高代码的可维护性和扩展性。然而，在某些场景下，我们可能需要在运行时动态地创建组件实例，而不是在一开始就定义好所有的组件。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。Vue允许创建异步组件，这种方式非常适合动态创建组件，并且只在真正需要的时候加载组件。，虽然Vue 2.x没有这个API，但我们可以通过模拟的方式实现类似的效果。专栏系列（点击解锁）

《Vue2 进阶知识》动态挂载组件之Vue.extend + vm.$mount

前端技术

01-11

1202

《Vue2 进阶知识》动态挂载组件之Vue.extend + vm.$mount

参与评论您还未登录，请先登录后发表或查看评论

vue之浅谈extend与$mount

梦想成为全栈的切图仔

10-14

494

使用场景：在写vue时，不管是cdn的方法还是在webpack里用npm 引入vue，我们都会有一个根节点。并创建一个实例。类似于 webpack 。也有一个入口文件。在main.js里，最后会创建一个实例。因为webpack 基本都是前端路由的，它的html里一般都只有一个根节点其余都是通过JavaScript来进行完成的，也就是说许多的vue组件，每一个页面也是一个组件。比如，我们要使用一个组件渲染时，这个自定义标签就会被替换为组件的内容，而且在哪写的自定义标签，就在哪里被替换。换句话说，

vue extend $mount

qq_42451776的博客

08-19

418

文章目录案例jsvue 案例 js import Vue from "vue" const createMessage = (component, props) => { // 组件构造函数 const Ctor = Vue.extend(component) // 创建组件实例 const comp = new Ctor({ propsData: props }); // console.log(comp.$el); // undefined

Vue独立组件开发：动态组件 Vue.extend及$mount

weixin_41952131的博客

04-18

698

在很多项目中我们需要使用动态组件，动态组件最大的区别是不能写死在模版中，而是在JS中调用，具有相当的灵活性。本文介绍了如何利用extend和mount方法创建动态组件，希望能帮到你。

Vue挂载(mount)和继承(extend)

m0_49515138的博客

11-22

3967

可以看到，extend 创建的是 Vue 构造器，而不是我们平时常写的组件实例，所以不可以通过 new Vue({ components: testExtend }) 来直接使用，需要通过 new Profile().$mount(’#mount-point’) 来挂载到指定的元素上。我个人的理解来看，extend提供了一个能够构造组件的函数（也就是构造器）。在一些特定的应用场景（如自己构建一个复杂弹窗）下，我们使用这种函数式的构造组件的方法，会更灵活一些。使用基础Vue构造器，创建一个"子类"。

Vue中通过Vue.extend动态创建实例的方法

10-16

vue.extend与vue.component的区别和联系

10-17

`Vue.extend`是一个方法，用于创建Vue实例的子类。它接收一个包含组件选项的对象，然后返回一个新的构造函数。这个构造函数可以用来创建具有预设选项的Vue实例。例如： ```javascript var MyComponent = Vue.extend...

Vue.extend实现挂载到实例上的方法

12-29

本文实例讲述了Vue.extend实现挂载到实例上的方法。分享给大家供大家参考，具体如下：这里主要是做个笔记根据官网的说法，Vue.extend：是使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 ...

Vue之深入理解extend与手动挂载$mount

梦想成为全栈的切图仔

10-14

1316

这样既可以使用 .vue 来写复杂的组件（毕竟在 template 里堆字符串很痛苦），还可以根据需要传入适当的 props。上一章节我们说到，创建一个vue实例的时候，都会有一个选项el，来指定实例的根节点，如果不写el选项，那组件就处于未挂载状态。方法对组件进行了手动渲染，但它仅仅是被渲染好了，并没有挂载到节点上，也就显示不了组件。的作用，就是基于 Vue 构造器，创建一个“子类”，它的参数跟。，就可以让组件渲染，并且挂载到任意指定的节点上，比如 body。手动渲染的组件，如果要销毁，也要用。

vue之浅析extend与手动挂载$mount

奇舞周刊

10-27

1087

本文作者为奇舞团前端工程开发师vue 组件的实现方式有很多种，本文所说的是其中较少使用的一种，即由 vue 内置的 API extend 与 $mount 配合使用实现的。一、为什么使用1、典型使用场景的例子渲染组件前渲染组件后可以看到组件是在 body 标签添加进去的。关闭弹窗，组件会从 body 移除。2、普通组件的局限性2.1、普通组件的引用方式ButtonCounter.vue<t...

Vue原理解析(十一) 之 extend 和$mount 原理及示例

绿足博客

09-29

1638

上一篇： Vue 原理解析（十）:之事件API 原理及组件库的使用之前在网上看到一个精美的确认弹框组件。不过使用起来并不是很方便，如果每个使用的地方需要引入该组件，需要注册，需要给组件加ref 引用，需要调用事件来控制状态。其实这个组件相对来说比较独立的，我们在使用组件库的时候，相信都有调用过命令式弹框组件的经历，今天我们来搞懂命令式组件的实现原理，以及将这个精美的弹窗组...

extend()、 $mount() 、$el用法整理，Toast的实现原理及实例