通过 CDN 使用 Vue 组合式 API

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>通过 CDN 使用 Vue 组合式 API</title>
8
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
9
    <style>
10
        body {
11
            font-family: Arial, Helvetica, sans-serif;
12
        }
13

14
        #app {
15
            color: #222;
16
            padding: 10px;
17
        }
18
    </style>
19
</head>
20

21
<body>
22
    <div id="app">
23
        <span>Message：{{ msg}}</span>
24
        <button @click="increment">Click Me</button>
25
    </div>
26

27
    <script>
28
        const { createApp, ref } = Vue
29

30
        const msg = ref('Hello Vue!')
31

32
        function increment() {
33
            msg.value = '你好 Vue！'
34
        }
35
        // 创建Vue应用
36
        const app = createApp({
37
            setup() {
38
                return {
39
                    msg, increment
40
                };
41
            }
42
        }).mount('#app');
43
    </script>
44
</body>
45

46
</html>