vue Vue实例绑定DOM元素

总结

  1. el 与 $mount 共用时,el 优先级高于 $mount
  2. template 与 render 共用时,render 的优先级高于 template
  3. render未定义 && (template未定义 || template为空串),显示原DOM结点;否则将会替换以el绑定的节点为根节点的整棵DOM子树
一、el 与 $mount

el 的优先级高于 $mount

let vm = new Vue({
   el: '#testApp',
   template: '<div>vue</div>'
 })
 vm.$mount('#testApp2')
 // 最终是绑定到 #testApp 上
二、有template或render
  1. 挂载实例后,templaterender 将会替换以 el 为根节点的整棵DOM子树
  2. template 未定义或 template 为空字符串(只有空格也不行),且没有定义 render 函数时,Vue实例绑定的DOM子树不会被替换
<body>
	<div id='app'>
		<span>domDiv</span>
	</div>
</body>

(1)替换
执行下边代码后

new Vue({
	el: '#app',
	template: '<div>vue</div>'
})

将被替换为

<body>
	<div>vue</div>
</body>

(2)未替换
执行下边代码

new Vue({
	el: '#app'
})
// 或
new Vue({
	el: '#app',
	template: ''
})

DOM保持不变

<body>
	<div id='app'>
		<span>domDiv</span>
	</div>
</body>
  1. templaterender 共存时,render 优先级大于 template
    (1)还是刚刚那个例子
new Vue({
	el: '#app',
	template: '<div>template</div>',
	render: (createElement) => {
		return createElement('div', 'render')
	}
})

DOM变为

<body>
	<div>render</div>
</body>
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页