關於報錯"Templates should only be responsible for mapping the state to the UI"的原因整理

1.vue中實例掛載的元素節點名稱不明確導致的

下面還原下過程:

①在index.html中引入頭部信息top.html

②top.html引入top.js

**top.html,其最外層div的id取名爲top(加入id是爲了vue進行掛載)

**top.js,通過"#top"進行掛載

結果頁面會報錯,其報錯信息如下(精簡過):

[Vue warn]: Error compiling template:

<div id="top"><script type="text/javascript" src="./page-js/top.js"></script>
<div id="top">
	<div class="header">
	.........
</div>
</div>

- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

(found in <Root>)

最後發現原因,在index.html中也定義了id="top",導致了這個問題

所以,解決方式就是要麼重命名index.html中id="top",要麼重名vue掛載點id名稱