在html页面中直接引用Vue

在html页面中直接引用Vue但这不是主流。两种 API 风格都能完全覆盖常见使用场景。它们是基于同一底层系统实现的不同接口。事实上选项式 APIOptions API正是构建在组合式 APIComposition API之上的采用组合式API的写法!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/title!-- 本地引入 Vue 3 的全局版本文件 --scriptsrcjs/vue.global.js/script/headbody!-- Vue 应用的挂载容器后续 Vue 实例会把渲染的内容注入到这个 div 里 --dividapp!-- v-model 是 Vue 的双向绑定指令会把输入框的 value 和 Vue 里的 message 变量绑定 --!-- 输入框内容变 → message 变message 变 → 输入框内容变 --inputtypetextv-modelmessage!-- Vue 的插值表达式作用是把 Vue 里的 message 变量值渲染到页面这个位置和输入框实时同步 --{{message}}/divscript// 从全局 Vue 对象中解构出 createApp创建应用和 ref创建响应式变量const{createApp,ref}Vue// 创建 Vue 应用实例createApp({// setup 是 Vue 3 Composition API 的核心入口所有响应式逻辑写在这里setup(){// 创建响应式变量 message初始值为 Hello world!// ref 用于创建基本类型字符串、数字等的响应式变量constmessageref(Hello world!)// 返回变量让模板页面里的 {{message}}、v-model能访问到return{message}}// 将 Vue 应用挂载到 id 为 app 的 div 上完成渲染}).mount(#app)/script/body/html在页面中展示在输入框中输入内容输入框外的内容同步变化采用选项式API的写法!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/title!-- 本地引入 Vue 3 的全局版本文件 --scriptsrcjs/vue.global.js/script/headbody!-- Vue 应用的挂载容器后续 Vue 实例会把渲染的内容注入到这个 div 里 --dividapp!-- v-model 是 Vue 的双向绑定指令会把输入框的 value 和 Vue 里的 message 变量绑定 --!-- 输入框内容变 → message 变message 变 → 输入框内容变 --inputtypetextv-modelmessage!-- Vue 的插值表达式作用是把 Vue 里的 message 变量值渲染到页面这个位置和输入框实时同步 --{{message}}/divscript// 从全局 Vue 对象中解构出 createApp创建应用和 ref创建响应式变量const{createApp}Vue// 创建 Vue 应用实例createApp({data(){return{message:hello world}}// 将 Vue 应用挂载到 id 为 app 的 div 上完成渲染}).mount(#app)/script/body/html运行的效果是相同的