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

以你之姓@ 2022-05-10 17:26 174阅读 0赞

## **//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：** ##

## **![70][]**   发现 id为app的div没有了 ##

## 5、既有el又有template，又有render函数。就会使用render函数的内容，因为它的优先级高。   //   但是此时，“Mustache”语法 (双大括号)没法使用，   //   因为，vue只是把render函数的返回值放在HTML里，而不进行再次的绑定   //   render函数就是让你发挥 JavaScript 最大的编程能力。 ##

## **查看elements：** ##

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

如果有不懂的部分，请留言！

[70]: /images/20220505/60d43fbc0b6b471a94b4b902458d60b3.png
[70 1]: /images/20220505/3826055080cb44e2baa42d78219ebfd5.png