第四十五：创建一个vue 的程序

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 元素上