Html 模板未在屏幕上呈現 Vue 內容
[英]Html template not rendering Vue content on screen
問題描述
對可能導致此問題的原因非常迷茫，因為它甚至不適用於官方網站文檔中的復制/粘貼..
只嘗試“hello world”（app.js 和 index.html 在同一個文件夾中）
索引.html
<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="my_view">
{{ name }} {{ age }}
</div>
<div id="app">
{{ message }}
</div>
</body>
</html>
app.js 的內容是：
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}});
並從教程中嘗試過這種方式，但也沒有工作......
const app = Vue.createApp({
template: '<h1>Hello World</h1>',
})
app.mount('#app')
當我重新加載頁面時，我不斷收到“{{ message }}”，或者使用第二種方法根本沒有收到任何內容。 謝謝。
1 個解決方案
解決方案1
2 2021-03-12 05:12:20
該示例似乎有效，只需注意在這種情況下，“name”和“age”必須在應用容器<div id="app"></div>內
試試這個基本的例子：
<!DOCTYPE html>
<html lang="en">
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
{{ message }}
<p>
{{ name }} {{ age }}
</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
name: "ldonis",
age: "30"
}});
</script>
</body>
</html>
HTML 模板未在屏幕上呈現
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.