為什么模板改的是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",//加上模板這句，發(fā)現(xiàn)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

關(guān)注問題我要回答

859

操作

收起

2 回答

阿里0111
2021-01-17

現(xiàn)在解決了嗎？沒有解決的話我的回答是：

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

造成改變元素標(biāo)簽原因在于你自行增添的<h1>標(biāo)簽樣式覆蓋引起。

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

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

慕俠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",
//加上模板這句，發(fā)現(xiàn)id為root的outHTML被替換為<h1>了，不是innerHTML
//為什么和老師講的不一樣？
template?:?"<h1>Hello?{{msg}}",??
data:{msg?:?"Hello?world?2!"},
methods:{handleClick?:?function(){this.msg?=?"world5";
}}});
</script>
</body></html>