vue中el属性，template属性，render函数的优先级，el属性，template属性，render函数分别都做了什么事情

最新推荐文章于 2024-06-12 12:19:55 发布

小小怪将军！

最新推荐文章于 2024-06-12 12:19:55 发布

阅读量778

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/qq_45753147/article/details/123889272

版权

//1、el，template，render(渲染函数)都是vue对象对应的HTML元素（DOM对象）
//2、优先级顺序：el < template < render
//3、el对应的HTML元素是写在网页上的。

//1、el，template，render(渲染函数)都是vue对象对应的HTML元素（DOM对象）
//2、优先级顺序：el < template < render
//3、el对应的HTML元素是写在网页上的。
 

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<span>我今年{{age}}岁了</span>
		</div>
	</body>
</html>
<script type="text/javascript" src="js/vue.min.js" ></script>
//1、只有el
let vm = new Vue({
	el:"#app",
	data:{
		age:12
	}
});
2、只有template，是不行的，因为，vue对象不知道把template放在何处；
3、只有render（渲染）函数,也是不行的，因为，vue对象不知道把render后的结果放在何处；
4、既有el又有template，就会用template里的内容替换el的outHTML。
 
let vm = new Vue({
	el:"#app",
	template:"<div><p>我template出来的，年龄{{age}}</p></div>",
	data:{
		age:12
	}
});
查看elements：

发现 id为app的div没有了
 

5、既有el又有template，又有render函数。就会使用render函数的内容，因为它的优先级高。
//   但是此时，“Mustache”语法 (双大括号)没法使用，
//   因为，vue只是把render函数的返回值放在HTML里，而不进行再次的绑定
//   render函数就是让你发挥 JavaScript 最大的编程能力。
 
let vm = new Vue({
	el:"#app",
	template:"<div><p>我template出来的，年龄{{age}}</p></div>",
	data:{
		age:12
	},
	render:function(createElement){
	  // return createElement('h1', '我是render出来的HTML，年龄{{age}}');//不能使用“Mustache”语法 (双大括号)
	   return createElement('h1', '我是render出来的HTML，年龄'+this.age);
	}
});
查看elements：

发现 id为app的div没有了，template属性的值也没有起作用，只显示了render函数的返回值。

小小怪将军！

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中el属性，template属性，render函数的优先级，el属性，template属性，render函数分别都做了什么事情

//1、el，template，render(渲染函数)都是vue对象对应的HTML元素（DOM对象）//2、优先级顺序：el < template < render//3、el对应的HTML元素是写在网页上的。//1、el，template，render(渲染函数)都是vue对象对应的HTML元素（DOM对象）//2、优先级顺序：el < template < render//3、el对应的HTML元素是写在网页上的。 HTML代码：<!DOCTY.
复制链接

扫一扫