当前位置：首页 > news >正文

在html页面中直接引用Vue

news 2026/7/14 23:07:08

在html页面中直接引用Vue，但这不是主流。

两种 API 风格都能完全覆盖常见使用场景。它们是基于同一底层系统实现的不同接口。事实上，选项式 API（Options API）正是构建在组合式 API（Composition API）之上的！

采用组合式API的写法

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 本地引入 Vue 3 的全局版本文件 --><scriptsrc="js/vue.global.js"></script></head><body><!-- Vue 应用的挂载容器，后续 Vue 实例会把渲染的内容注入到这个 div 里 --><divid="app"><!-- v-model 是 Vue 的双向绑定指令，会把输入框的 value 和 Vue 里的 message 变量绑定： --><!-- 输入框内容变 → message 变；message 变 → 输入框内容变 --><inputtype="text"v-model="message"><!-- Vue 的插值表达式，作用是把 Vue 里的 message 变量值渲染到页面这个位置，和输入框实时同步 -->{{message}}</div><script>// 从全局 Vue 对象中解构出 createApp（创建应用）和 ref（创建响应式变量）const{createApp,ref}=Vue// 创建 Vue 应用实例createApp({// setup 是 Vue 3 Composition API 的核心入口，所有响应式逻辑写在这里setup(){// 创建响应式变量 message，初始值为 'Hello world!'// ref 用于创建基本类型（字符串、数字等）的响应式变量constmessage=ref('Hello world!')// 返回变量，让模板（页面里的 {{message}}、v-model）能访问到return{message}}// 将 Vue 应用挂载到 id 为 app 的 div 上，完成渲染}).mount('#app')</script></body></html>

在页面中展示：

在输入框中输入内容，输入框外的内容同步变化：

采用选项式API的写法

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 本地引入 Vue 3 的全局版本文件 --><scriptsrc="js/vue.global.js"></script></head><body><!-- Vue 应用的挂载容器，后续 Vue 实例会把渲染的内容注入到这个 div 里 --><divid="app"><!-- v-model 是 Vue 的双向绑定指令，会把输入框的 value 和 Vue 里的 message 变量绑定： --><!-- 输入框内容变 → message 变；message 变 → 输入框内容变 --><inputtype="text"v-model="message"><!-- Vue 的插值表达式，作用是把 Vue 里的 message 变量值渲染到页面这个位置，和输入框实时同步 -->{{message}}</div><script>// 从全局 Vue 对象中解构出 createApp（创建应用）和 ref（创建响应式变量）const{createApp}=Vue// 创建 Vue 应用实例createApp({data(){return{message:'hello world'}}// 将 Vue 应用挂载到 id 为 app 的 div 上，完成渲染}).mount('#app')</script></body></html>