Javascript Html模板未在屏幕上呈现Vue内容_Javascript_Vue.js

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

javascript vue.js

Javascript Html模板未在屏幕上呈现Vue内容,javascript,vue.js,Javascript,Vue.js,我完全不知道是什么导致了这个问题，因为它甚至不能从官方网站文档中复制/粘贴仅尝试“hello world”（app.js和index.html位于同一文件夹中） index.html <!DOCTYPE html> <html lang="en"> <html lang="en"> <head> <title>Document</title> </head>

我完全不知道是什么导致了这个问题，因为它甚至不能从官方网站文档中复制/粘贴

仅尝试“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>

从一个教程中尝试了这种方法，但也不起作用

const app = Vue.createApp({
    template: '<h1>Hello World</h1>',
})

app.mount('#app')

const-app=Vue.createApp({
模板：“你好，世界”，
})
app.mount（“#app”）

当我用第二个方法重新加载页面时，我会不断得到“{message}}”，或者根本没有得到任何结果。谢谢。

这个例子似乎有效，只需注意“name”和“age”必须在应用程序容器中，在这种情况下

尝试以下基本示例：

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


文件
{{message}}

{{name}{{age}

var app=新的Vue（{
el:“#应用程序”，
数据：{
消息：“你好，Vue！”，
名称：“ldonis”，
年龄：“30”
}});

你可以玩一下：

我想你需要在

数据中使用return语句：{…}

谢谢，我可以让它工作，但是当我把内容放在app.js文件中时，它会停止工作，并显示{{{message}{name}{{age}}字符串。记得在html末尾加载javascript代码

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