Vue 是什么?
一则或许对你有用的小广告
最近,小哈正在带小伙伴们做前后端分离博客项目,采用技术栈 Spring Boot + Mybatis Plus + Vue 3.2 + Vite 4
,手把手,前端 + 后端,全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已进入第七章 《文章分类模块开发》中,截止到目前,已更新 105150 字,69 篇内容,讲解图:521 张,还在持续爆肝中,后续还会上新更多项目,已有 200+ 小伙伴加入,欢迎点击围观。
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
为后缀的类似 HTML 的文件,它们就是 Vue 组件,文件内部会将一个组件的逻辑(JavaScript), 模板(HTML) 和样式 (CSS)封装在一起。现在大致看一眼,后面小节会详细学习。