vue中的.$mount('#app')手动挂载操作


Posted in Javascript onSeptember 02, 2020

在Vue构造函数时,需要配置一个el属性,如果没有没有el属性时,可以使用.$mount('#app')进行挂载。

配置了el属性:

new Vue({
 el:"#app",
 router
});

如果没有配置el属性,可以使用手动挂载$mount("#app")

new Vue({
 router
}).$mount('#app');

var vm = new Vue({
 router
});
vm.$mount('#app');

补充知识:Vue手动挂载组件$mount(),实现js插入组件,替换组件

项目中有时候用到需要再页面中使用js插入一个vue组件,这时候就用到vue的手动挂载$mount,Vue官网$mount()

手动挂载限制:只在由 new 创建的实例中遵守。

一、首先引入你要插入的组件和Vue

import ShowBox from './show/ShowBox';

import Vue from "vue";

二、手动挂载,js插入组件

//手动挂载,必须使用这种方式才可用,showBoxInstance是手动挂载完后的组件实例
let myShowBox = Vue.extend(ShowBox)
let showBoxInstance = new myShowBox().$mount()
 
//setData是要插入的组件实例中的一个方法,方法内容就是给组件中的data数据赋值,用于组件的数据绑定显示
showBoxInstance .setData(this.index);
 
//调用插入相邻元素前面的方法,第一个参数是引入组件的dom对象,第二个参数是目标dom对象
this.insertBefore(showBoxInstance.$el, target.$el);

三、也可以直接替换目标元素,js替换组件

//也可以直接替换,target为要替换的dom对象,可以直接使用组件替换目标dom
let myShowBox = Vue.extend(ShowBox)
let showBoxInstance = new myShowBox ().$mount(target.$el);

以上这篇vue中的.$mount('#app')手动挂载操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
教你部署vue项目到docker
Apr 05 Vue.js
vue中提示$index is not defined错误的解决方式
Sep 02 #Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 #Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 #Javascript
JS继承实现方法及优缺点详解
Sep 02 #Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 #Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 #Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 #Javascript
You might like
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
img标签中onerror用法
2009/08/13 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
深入理解vue Render函数
2017/07/19 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
python查看微信好友是否删除自己
2016/12/19 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
Keras设置以及获取权重的实现
2020/06/19 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
环境工程大学生自荐信
2013/10/21 职场文书
村优秀党员事迹材料
2014/01/15 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python