快速使用 · vue3.x -- 系列學習

>[success] # 快速使用通過 `CDN ` 的方式使用引入`https://unpkg.com/vue@next` ~~~ <!DOCTYPE html> <html lang="en"> <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>Document</title> </head> <body> <div id="app"></div>  <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({ template: ` <h2> {{ title }}</h2> <div>{{count}} </div> <button @click="add">+</button> <button @click="sub">-<span> `, data() { return { title: '測試數據', count: 1, } }, methods: { add() { this.count++ }, sub() { this.count-- }, }, }) app.mount('#app') </script> </body> </html> ~~~ * 直接綁定節點 ~~~ <html lang="en"> <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>Document</title> </head> <body> <div id="app"> <h2>當前計數: {{counter}}</h2> <button @click="increment">+1</button> <button @click="decrement">-1</button> </div> <script src="./lib/vue.js"></script> <script> const app = Vue.createApp({ data: function() { return { counter: 0 } }, methods: { increment: function() { this.counter++ }, decrement: function() { this.counter-- } } }) app.mount("#app") </script> </body> </html> ~~~