第十二章、实例方法与全局API的实现原理(3)

vm.$mount

使用方式:

vm.$mount([elementOrSelector])

参数:

{Element | string} [elementOrSelector]

返回值:

vm,即实例自身

用法:

  • 如果vue实例在实例化时没有收到el选项,则它处于“未挂载”状态,没有关联的DOM元素。
  • 此时可以使用vm.$mount手动挂在一个未挂载的实例。
  • 如果没有提供elementOrSelector参数,模板将被渲染为文档之外的元素,并且必须使用原生DOM的API将它插入到文档中。
  • 该方法返回实例本身,因此可以链式调用其他的实例方法。
var MyComponent= Vue.extend({
	template:'<div>hello!</div>'
})

// 方法1:创建并挂载到#app(会替换#app)
new MyComponent.$mount('#app')

// 方法2:创建并挂载到#app(会替换#app)
new MyComponent.$mount({el:'#app'})

// 方法3:不提供elementOrSelector参数
var component = new MyComponent().$mount()
document.getElementById('#app').appendChild(component.$el)
vm.$mount在不同的版本中的具体表现是不一样的,主要存在于 运行时版本 和 完整版本 之间

html>

猜你喜欢

转载自blog.csdn.net/LiyangBai/article/details/104442489