html

<div id="app">{{ msg }}<h2>{{ web.title }}</h2><h3>{{ web.url }}</h3>
</div>

js

/*<div id="app"></div> 指定一個 id 為 app 的 div 元素{{ }} 插值表達式, 可以將 Vue 實例中定義的數據在視圖中進行渲染如: Vue 實例中定義一個 msg 變量, 值為 "Hello world", 在模板中若使用插值表達式 {{ msg }} 則會被渲染成 "Hello world"響應式數據是指當數據發生變化時, 模板中依賴于該數據的部分會自動更新
*//*//創建一個 Vue 應用程序Vue.createApp({//Composition API(組合式 API) 的 setup選項 用于設置響應式數據和方法等setup() {//Composition API 的 reactive()函數 用于創建響應式數據const web = Vue.reactive({ //Vue.reactive 創建一個響應式數據對象 web, 其中包含 title 和 url 屬性title: "鄧瑞編程",url: "dengruicode.com"})//返回數據return {msg: "success",web}}}).mount("#app") //將 Vue 應用程序掛載(mount) 到 app 元素上
*///將 Vue 對象中的 createApp、reactive 屬性賦值給 createApp、reactive 變量
const { createApp, reactive } = Vue //解構賦值語法createApp({setup() {const web = reactive({title: "鄧瑞編程",url: "dengruicode.com"})return {msg: "success",web}}
}).mount("#app")　將 Vue 應用程序掛載(mount) 到 app 元素上