Vue 是什么?

更新时间 2023-11-28 18:45:17

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书活动

目前, 星球 内第一个项目:全栈前后端分离博客项目,演示地址:http://116.62.199.48/, 1.0 版本已经更新完毕,正在更新 2.0 版本。采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 187 小节,累计 29w+ 字,讲解图:1263 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 720+ 小伙伴加入,欢迎点击围观

Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 渐进式框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、响应式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以轻松搞定。

下面是一段示例代码,其功能用于实现一个简单的计数器:

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')
<div id="app">
  <!-- 点击按钮对 count 变量执行加一操作, 并实时渲染到按钮上 -->
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

上面的示例展示了 Vue 两个核心的功能点:

  • 声明式:Vue 基于标准的 HTML 语法上做了一层拓展,我们可以通过声明式的描述 HTML 与 JavaScript 状态之间的关系,如示例中的插值语句 {{ count }}、点击事件 @click="count++"
  • 响应式渲染 : Vue 会自动跟踪 JavaScript 状态,并实时更新 Dom 元素。无需再像 JQuery 那样手动更新 Dom 元素。

渐进式框架

Vue 是一个功能强大框架,也是一个生态。你可以用不同的方式来使用它:

  • 无需构建步骤,渐进式增强静态的 HTML
  • 在任何页面中作为 Web Components 嵌入
  • 单页应用 (SPA)
  • 全栈 / 服务端渲染 (SSR)
  • Jamstack / 静态站点生成 (SSG)
  • 开发桌面端、移动端、WebGL,甚至是命令行终端中的界面

怎么理解渐进式这个词?

你可以这样理解它: Vue 非常灵活,可以渐近式的适配不同的开发场景。举个栗子,比如老项目使用的 JQuery,而我又想使用 Vue, 新建页面时,仅需引入 Vue 的库,就可以通过它来开发了,无需构建步骤。由此可见,Vue 在设计上非常注重灵活性,我们 “可以逐步来集成” 它,从单独某个页面使用它,先尝个鲜,到后续慢慢迭代,最终完全替换成 Vue 框架。

组件化

当我们通过构建工具来创建项目时,会看到工程目录中有以 .vue 为后缀的类似 HTML 的文件,它们就是 Vue 组件,文件内部会将一个组件的逻辑(JavaScript), 模板(HTML) 和样式 (CSS)封装在一起。现在大致看一眼,后面小节会详细学习。