实例化Vue时的两种挂载方式el与$mount
el 与mount 都是挂载。选项 / DOMel类型：string | Element限制：只在用 new 创建实例时生效。详细：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。在实例挂载之后，元素可以用 vm.$el 访问。如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显...
el 与mount 都是挂载。
选项 / DOM
- el
类型：string | Element
限制：只在用 new 创建实例时生效。
详细：
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
在实例挂载之后，元素可以用 vm.$el 访问。
如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。
提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被
Vue生成的DOM替换。因此不推荐挂载root实例到
<html>或者<body>上。
如果
render函数和template属性都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板，此时，必须使用
Runtime + Compiler构建的 Vue 库。
- 参考：
实例方法 / 生命周期
- vm.$mount( [elementOrSelector] )
参数：
{Element | string} [elementOrSelector]{boolean} [hydrating]
返回值：vm - 实例自身
用法：
如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。
这个方法返回实例自身，因而可以链式调用其它实例方法。
示例：
var MyComponent = Vue.extend({
template: '<div>Hello!</div>'
})
// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app')
// 同上
new MyComponent({ el: '#app' })
// 或者，在文档之外渲染并且随后挂载
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)
- 参考：
官网如下（以上整理自官网）：
el:https://cn.vuejs.org/v2/api/#el
mount: https://cn.vuejs.org/v2/api/#vm-mount
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献7条内容
所有评论(0)