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 相关文章推荐
解决 FireFox 下[使用event很麻烦] 的问题.
Aug 22 Javascript
js中有关IE版本检测
Jan 04 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 Javascript
深入详解JS函数的柯里化
Jun 09 Javascript
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 !function_exists("T7FC56270E7A70FA81A5935B72EACBE29"))代码解密
2011/01/07 PHP
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
php操作SVN版本服务器类代码
2011/11/27 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
js实现进度条的方法
2015/02/13 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
vue.js的提示组件
2017/03/02 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
Python实现股市信息下载的方法
2015/06/15 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
解释一下钝化(Swap out)
2016/12/26 面试题
计算机专业自荐信
2013/10/14 职场文书
护士自荐信
2013/10/25 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
《检阅》教学反思
2016/02/22 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
Nginx 匹配方式
2022/05/15 Servers