Simple Vue example not working only producing the brackets-CodePudding

Can someone help me with this.

I have looked at other eksampels inkluding: Simple Vue slot example not working

and

Here's the HTML code:

<!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/[email protected]/dist/vue.global.js"></script>
    <script src="/js/main.js"></script>
</body>

</html>

And the main.js

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

I have tried in Valet and on live server

CodePudding user response：

You have mixed vue 2 code with vue 3 that's why

if you want to use vue 3 you need to use Vue.createApp function

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

if you want to use vue 2 then you need to change your unpkg script src