vue Vue实例绑定DOM元素

╰+哭是因爲堅強的太久メ 2022-12-22 11:12 26阅读 0赞

> 总结
> 
> 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.  挂载实例后，`template` 或 `render` 将会替换以 `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.  当 `template` 与 `render` 共存时，`render` 优先级大于 `template`  
    （1）还是刚刚那个例子

new Vue({ 
    	el: '#app',
    	template: '<div>template</div>',
    	render: (createElement) => { 
    		return createElement('div', 'render')
    	}
    })

DOM变为

<body>
    	<div>render</div>
    </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，26人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 绑定事件，获取元素对象

vue 绑定事件，获取元素对象例如： <img v-bind:src="item.fmguid" v-on:error="imgerror($event)" >

分手后的思念是犯贱/ 2023年01月03日 14:15/ 0 赞/ 261 阅读

相关 vue Vue实例绑定DOM元素

> 总结 > > 1. el 与 $mount 共用时，el 优先级高于 $mount > 2. template 与 render 共用时，render 的优先级高于

╰+哭是因爲堅強的太久メ/ 2022年12月22日 11:12/ 0 赞/ 27 阅读

相关 vue 事件绑定

<!DOCTYPE html> <html> <head> <meta charset="utf-8" />

末蓝、/ 2022年05月31日 09:57/ 0 赞/ 303 阅读

相关 VUE双向绑定

转自：http://www.cnblogs.com/qiuchuanji/p/8819697.html Vue是一个提供了MVVM风格的双向数据绑定的Javascr

小鱼儿/ 2022年05月23日 08:17/ 0 赞/ 343 阅读

相关 Vue-值绑定

vue 值绑定（1）:v-bind用于绑定属性和数据其缩写为“ : ” 也就是v-bind:id === :id （2）v-model用在表单控件上的，用于实

喜欢ヅ旅行/ 2022年05月17日 03:41/ 0 赞/ 168 阅读

相关 VUE 样式绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接

蔚落/ 2022年03月27日 13:19/ 0 赞/ 369 阅读

相关 Vue绑定属性绑定Class 绑定style

vue是如何绑定属性和class以及style的下面我将会插入一段代码，本人在代码里做了相当详细的注释。 <template> <!-- v

待我称王封你为后i/ 2022年03月25日 09:36/ 0 赞/ 444 阅读

相关 Vue-样式绑定

绑定class属性 v-bind:class="{样式名称：变量}" <!DOCTYPE html> <html> <head>

水深无声/ 2021年09月09日 08:08/ 0 赞/ 451 阅读

相关 Vue.js--实例与数据绑定

Vue实例 Vue.js应用的创建很简单，通过构造函数Vue就可以创建一个Vue的根实例，并启动Vue应用： var app = new Vue({

忘是亡心i/ 2021年08月14日 00:55/ 0 赞/ 294 阅读

相关 Vue - 样式绑定

实现功能：点击一次字体变颜色，再点一次字体恢复默认颜色一. class 选择器的对象绑定 1. 对象方式 2. 数组方式

た入场券/ 2021年07月25日 15:00/ 0 赞/ 503 阅读