为什么模板改的是outerHTML而不是innerHTML?

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Vue入门</title><script src="./vue.js">{{msg}}</script></head><body><div id="root" v-on:click="handleClick">Hello world 1!{{msg}}</div><script>var dom111= document.getElementById("root");dom111.innerHTML = "Hello World3";dom111.innerHTML = "{{msg}}";new Vue({el:"#root",//加上模板这句，发现id为root的outHTML被替换为<h1>了，不是innerHTML//为什么和老师讲的不一样？//template : "<h1>Hello {{msg}}",  data:{msg : "Hello world 2!"},methods:{handleClick : function(){this.msg = "world5";}}});</script></body></html>

慕侠0346289

2020-03-19

源自：vue2.5入门 2-3

关注问题我要回答

817

操作

收起

2 回答

阿里0111
2021-01-17

现在解决了吗？没有解决的话我的回答是：

template : "<h1>Hello {{msg}}",

造成改变元素标签原因在于你自行增添的<h1>标签样式覆盖引起。

data:{msg : "Hello world 2!"},

0 回复有任何疑惑可以回复我~

收起回答

慕侠0346289 提问者
2020-03-19

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Vue入门</title>
<script src="./vue.js">{{msg}}</script>
</head>
<body>
<div id="root" v-on:click="handleClick">Hello world 1!{{msg}}</div>
<script>
var dom111= document.getElementById("root");
dom111.innerHTML = "Hello World3";
dom111.innerHTML = "{{msg}}";
new Vue({
el:"#root",
//加上模板这句，发现id为root的outHTML被替换为<h1>了，不是innerHTML
//为什么和老师讲的不一样？
template : "<h1>Hello {{msg}}",  
data:{msg : "Hello world 2!"},
methods:{handleClick : function(){this.msg = "world5";
}}});
</script>
</body></html>