Question

对于导致此问题的原因非常迷茫，因为它甚至无法从官方网站文档中复制/粘贴！

仅尝试“hello world”（app.js 和 index.html 在同一文件夹中）

index.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 }} ”。谢谢。

Answer 1

该示例似乎有效，只需注意在这种情况下，“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>

你可以玩一点：https://jsfiddle.net/ldonis/g31Lstde/3/

Html 模板未在屏幕上呈现 Vue 内容

1 个答案: