vue中el属性,template属性,render函数的优先级,el属性,template属性,render函数分别都做了什么事情
//1、el,template,render(渲染函数)都是vue对象对应的HTML元素(DOM对象)//2、优先级顺序:el < template < render//3、el对应的HTML元素是写在网页上的。 HTML代码:<!DOCTYPE html><html><head>&a
·
//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函数的返回值。
如果有不懂的部分,请留言!
更多推荐
已为社区贡献18条内容
所有评论(0)