Vue2手动挂载组件$mount()学习

已于 2023-02-08 20:35:59 修改
阅读量1k 收藏
点赞数
文章标签： 前端 vue.js Powered by 金山文档
于 2023-02-08 20:30:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Amtai/article/details/128942927
版权
说实话，我自己在开发过程中，几乎没有使用过这个方法。是面试的时候，被问到的。所以特地学习，并记录分享一下。

官方介绍

首先我们先来看一下官方文档。

在官方文档中，定义了挂载方法 vm.$mount([elementOrSelector])

接受的参数为

  • {Element | string} [elementOrSelector]

  • {boolean} [hydrating]

用法

如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 D
最低0.47元/天 解锁文章
Amtai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue之浅析extend与手动挂载$mount
奇舞周刊
10-27 994
本文作者为奇舞团前端工程开发师vue 组件的实现方式有很多种，本文所说的是其中较少使用的一种，即由 vue 内置的 API extend 与 $mount 配合使用实现的。一、为什么使用1、典型使用场景的例子渲染组件前渲染组件后可以看到组件是在 body 标签添加进去的。关闭弹窗，组件会从 body 移除。2、普通组件的局限性2.1、普通组件的引用方式ButtonCounter.vue<t...
Vue2源码梳理：关于vm.$mount的实现
Wang的专栏
02-15 1389
1 ) 在含有 compiler 版本中，先对 el 做一些处理2 ) 在没有定义 render 函数的时候，尝试获取一下 render 函数也就是说，把整个template通过一系列的逻辑判断，也是因为它支持很多很多种写法可以直接写 template也可以直接 template 是个dom对象如果不写 templete 的话，通过 el 的 outHTML 来获取这个 templete把这个template 通过这个编译的手段也转化成这个render函数。
Vue $mount的用法
热门推荐
Judy1623
07-19 3万+
$mount的用法 1.$mount方法是用来挂载我们的扩展的 做一个扩展，然后用$mount的方法把扩展挂载到dom上 var judy = Vue.extend({ template:'&lt;p&gt;{{message}}&lt;/p&gt;', data: function () { return{ ...
手动挂载Vue3.0组件到DOM节点
最新发布
Cougars的博客
04-17 690
将vue组件手动生成dom节点，挂载到不支持vue的js库，如地图引擎js库等。
Vue笔记_挂载点(el+$mount)
qq_43260366的博客
09-17 1335
​ 在Vue中不再和HTML直接进行交互了，而是将其挂载到DOM元素上,当数据发生变化的时候 数据变化->操作DOM->更改数据，但是操作DOM->更改数据是通过Vue内部 虚拟DOM 完成的，表现是数据驱动视图改变！// [2]没有设置挂载点，vue不知道将数据渲染到哪个视图上，将插值语法按照普通文本显示。2）若是希望data中的数据能够对多个元素生效，可以将vue实例挂载到父元素上；// [1]此时由于挂载点选择多个HTML元素，则只会对第一个元素生效；
vue2学习篇一 $mount()手动挂载
bangxionger9224的博客
08-10 252
$mount()手动挂载 //当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中； //假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。例如： new Vue({ //el: '#app', router, render: h => h(App) // render: x => x(App) // 这里的render:...
vue中的.$mount(#app)手动挂载操作
01-21
在Vue构造函数时，需要配置一个el属性，如果没有没有el属性时，可以使用.$...补充知识：Vue手动挂载组件$mount()，实现js插入组件，替换组件 项目中有时候用到需要再页面中使用js插入一个vue组件，这时候就用到vue的
vue中的.$mount('#app')手动挂载操作
10-14
手动挂载的一个常见场景是在运行时动态地创建和挂载Vue组件。比如，你可能在用户交互后，或者在某个条件满足时，才需要插入Vue组件。在这种情况下，可以使用`.extend()`来创建一个新的Vue构造器，然后用这个构造器...
深入理解Vue生命周期、手动挂载及挂载子组件
12-28
本文介绍了Vue生命周期和手动挂载，分享给大家，具体如下：1、vue的生命周期： 2、$mount()手动挂载 当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中； 假如需要延迟挂载，可以在之后手动调用vm.$mount()方法...
vue $mount 和 el的区别说明
10-14
这时，你可以通过调用`$mount`方法手动挂载到特定的DOM元素。例如： ```javascript var MyComponent = Vue.extend({ template: '<div>Hello!</div>'}); // 创建并挂载到 #app (会替换 #app) new MyComponent().$...
Vue2笔记_01创建vdom并挂载到dom元素上
qq_43260366的博客
09-17 2009
render函数的作用是将 createElemet 函数创建的Node节点信息返回到Vue实例化对象的beforeMount生命周期函数中，让其将Node节点渲染在界面上(真实dom)；我们会将整个dom结构传入createElement函数中，通过render函数生成虚拟dom然后渲染到真实dom中；createElement函数，用于创建节点信息，其内有三个参数。createElement的第一个参数为html标签的字符串；可以添加第三个参数为其添加子元素。
VUE2安装初始化步骤（2022）
甘越的博客
05-06 1万+
1.安装node.js 下载安装node.js，win7使用node.js v12版的（为目前通用，建议都是用这个版本），win10可以使用最新版本的。CLI至少要求v12版本的。 node-v12.22.10-x64.msi 安装完成后开启cmd，检验版本： node -v 2.配置淘宝镜像 搜索npm淘宝镜像，加速后续包的下载，在cmd中配置： npm config set registry https://registry.npm.taobao.org 检验配置的淘宝镜像： n
Vue2与Vue3区别与新增
Jk200165的博客
03-01 607
一、main.js vue2 import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; Vue.config.productionTip = false; new Vue({ router, store, render: (h) => h(App), }).$mount("#app"); vue3 im
Vue独立组件开发：动态组件 Vue.extend及$mount
weixin_41952131的博客
04-18 444
在很多项目中我们需要使用动态组件，动态组件最大的区别是不能写死在模版中，而是在JS中调用，具有相当的灵活性。本文介绍了如何利用extend和mount方法创建动态组件，希望能帮到你。
vue组件添加全局方法_vue组件挂载到全局方法
weixin_39920397的博客
12-20 973
在最近的项目中，使用了bootstrap-vue来开发，然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果，像alert、modal等组件每个页面引入就得重复引入，并不像element那样可以通过this.$xxx来调用，那么问题来了，如何通过this.$xxx来调用起我们定义的组件或对我们所使用的UI框架的组件呢。以bootstrap-vue中的Alert组件为例，分一下几步...
$mount 解析
keepMeaningless的博客
03-04 1129
从runtime with compiler版本的入口开始 src/platforms/web/entry-runtime-with-compiler.js const mount = Vue.prototype.$mount Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean ) { ... return mount.call(this, el, hydrating) } 我们先来看这部分代码，
Vue2 生命周期
C_Goku
01-24 2800
最近使用Vue2做了一个项目，在使用的过程中对数据的请求发生在实例创建哪个阶段有点不清楚，在论坛查阅资料后，对Vue2实例创建生命周期做一个总结。  在最开始，想把数据放在created钩子上进行请求，发现请求的数据并不能挂载到data里面。因为data还没有进行初始化，数据的初始化是在created和beformount之间发生的。所以请求放在mounted钩子，然后将请求到的数据更新到已经初
手写vue2 - 实现$mount()和简单diff算法
qq_36782473的博客
10-22 468
手写vue2 - 实现$mount和简单diff算法前言一、明确思路1. Vue2的设计思路2. 改造思路二、手写Vue21. 定义数据响应式和通知依赖更新2. JVue类和更新渲染3. Watcher类收集依赖4. Dep类依赖管理和通知更新5. 测试案例三、总结1. Vue的挂载渲染流程2. Watcher3. reader()和\_\_patch\_\_() 前言 在我们之前的《手写vue - 实现数据响应式、数据双向绑定和事件监听》中，有些许不足： 直接模板 => dom，跳过了虚拟dom的
Vue挂载(mount)和继承(extend)
wucan111的博客
07-30 2612
Vue.extend && Vue.$mount Vue.$mount 挂载 //index.html文件 <body> <div id="app"></div> </body> //index.js文件 //1. 先看看普通的绑定 new Vue({ el: '#app', // el: document.getElementById('app') template: `<div id="app"> 如
vue中实现手动组件渲染
03-28
在Vue中，可以使用`$mount`方法手动渲染组件。具体步骤如下： 1. 创建一个组件实例 ```javascript import MyComponent from './MyComponent.vue' const vm = new Vue({ render: h => h(MyComponent), data: { // 组件需要的数据 } }) ``` 2. 手动挂载组件 ```javascript vm.$mount('#app') ``` 这里的`#app`是组件需要挂载到的DOM元素的选择器。如果不指定选择器，则可以将组件挂载到一个空的`div`元素中： ```javascript vm.$mount() document.body.appendChild(vm.$el) ``` 这样就可以手动渲染组件了。需要注意的是，手动渲染组件时，需要确保组件的依赖已经被解析并加载完成。如果组件依赖的其他组件还没有被加载，可能会导致组件渲染失败。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值