为什么模板改的是outerHTML而不是innerHTML?-慕课网

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

来源：2-3 Vue实例中的数据,事件和方法

慕侠0346289

2020-03-19 18:02

<!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>

写回答关注

2回答

阿里0111

2021-01-17 21:02:41

现在解决了吗？没有解决的话我的回答是：
template : "<h1>Hello {{msg}}",
造成改变元素标签原因在于你自行增添的<h1>标签样式覆盖引起。
data:{msg : "Hello world 2!"},

0 0

慕侠0346289: 2020-03-19 18:04:32

<!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>

1 0

慕雪7077...

这个就是这样的 template内容只能有且一个根元素也是为了这样考虑的使用模板即用模板的根元素代替掉原来的根元素; 一般根实例中不用template 而是Vue组件中多用到

2021-07-10 11:13:48

共 1 条回复 >

vue2.5入门

快速理解Vue编程理念上手Vue2.0开发。

146742 学习 · 657 问题

查看课程

相似问题

请问快速写一个html模板的快捷键是什么？

回答 6