简单的 Vue 示例不能只生成括号

Question

谁能帮我解决这个问题。

我看过其他 eksampels inkluding:

和

Vue not working in a simple example

这是 HTML 代码：

<!DOCTYPE html>
<html lang="dk">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue app</title>
    <link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="number in numbers">{{ number }}</li>
        </ul>
    </div>
    <script src="https://unpkg.com/vue@3.2.33/dist/vue.global.js"></script>
    <script src="/js/main.js"></script>
</body>

</html>

还有 main.js

new Vue({
    el: '#app',
    data: {
        numbers: [1, 10, 100, 1000, 10000],
    },
});

我已经在 Valet 和在线服务器上试过了

Answer 1

您将 vue 2 代码与 vue 3 混合，这就是原因

如果你想使用 vue 3 你需要使用 Vue.createApp 函数

const app = Vue.createApp({
    data() {
        return {
            numbers: [1, 10, 100, 1000, 10000]
        }
    })
app.mount('#app')

如果你想使用 vue 2 那么你需要更改你的 unpkg 脚本 src

简单的 Vue 示例不能只生成括号

Simple Vue example not working only producing the brackets

html

vue.js