欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 维修 > 第四十五:创建一个vue 的程序

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

2025/3/11 3:54:16 来源:https://blog.csdn.net/liuxiaojun828/article/details/146020331  浏览:    关键词:第四十五:创建一个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 元素上

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词