第一章什么是vue.js
1.1 vue.js的概念
Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。 Vue3是一个现代的渐进式JavaScript框架,渐进式的意思就是你可以在现有项目中使用vue框架的一部分,比如:列表循环,也可以使用vue框架的全部,甚至包含vue-router,vuex。它易学易用,性能出色,是适用场景丰富的 Web 前端框架。它可以帮助我们快速地构建高效、可维护的Web应用程序。 框架和库的区别如下: 框架(Framework)和库(Library)都是用于简化软件开发的工具,但是它们的本质不同。
库是一组功能的集合,开发者可以根据需要在应用程序中调用库中的函数和类来完成特定的任务。库的使用方式是由开发者主导的,开发者自己编写代码,并将库作为工具调用,这就是一种基于“被调用”的方式来使用库。
而框架则是一种更加全面的开发工具,它提供了整个应用程序的基础架构,包括应用程序的设计、架构、组件之间的交互、消息传递等。框架为开发者提供了一种基础的应用程序结构,开发者需要按照框架的规范来编写应用程序的代码,才能与框架进行交互。因此,框架的使用方式是基于“被扩展”的方式来使用框架。
总的来说,库是一种工具,而框架是一种体系结构。库提供的是简单的工具和函数,开发者可以根据自己的需要随意调用。而框架提供的则是一整套完整的体系结构和设计模式,开发者必须按照框架的规范来编写应用程序。库的使用更加自由灵活,框架的使用则更加标准化、规范化。
打个比方:库就是包含钳子,斧子的工具包,而框架好比是毛坯房,我们使用框架开发应用,就相当于在毛坯房的基础之上再装修房子,不管你什么样的装修风格,(每一层)房子的结构都是一样的,固定死的,厨房的位置就在那里,客厅的位置、洗手间的位置等等都是提前设计好的,甚至水电的管道什么的都已经设计制作好了,使用框架可以省不少事情,而vue就是我们今天要学习的一款前端开发框架。
1.2 vue.js的优点 (1)简单易学。Vue.js的语法简单清晰,易于理解和掌握,采用了类似HTML的模板语法和响应式数据绑定,使得开发者可以更加专注于业务逻辑而非编写模板和事件处理函数。 (2)灵活性。Vue.js具有极高的灵活性,提供了一组底层构建块,这些构建块可以通过组合方式来构建应用程序。 (3)高效性。Vue.js具有高效性,能够快速响应用户操作并自动触发视图的更新,采用虚拟DOM技术,在页面数据发生变化时,仅重新渲染部分需要变化的内容,提高了应用程序的性能和响应速度1。 此外,Vue还具有可扩展性、社区活跃等优势。
1.3 vue3示例
下面是一个最基本的示例: import { createApp, ref } from 'vue'
createApp({ setup() { return { count: ref(0) } } }).mount('#app')
template:
上面的示例展示了 Vue 的两个核心功能:
声明式渲染:Vue 基于标准 HTML 拓展了一套模板语法,使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性:Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。 由于是示例,大家看不懂没关系,也是正常现象,不然也不会来学习vue3的知识。先别急,在后续的文档中我们会详细介绍每一个细节。现在,请继续看下去,以确保你对 Vue 作为一个框架到底提供了什么有一个宏观的了解。
本书接下来的内容会假设你对 HTML、CSS 和 JavaScript 已经基本熟悉。如果你对前端开发完全陌生,最好不要直接从一个框架开始进行入门学习——最好是掌握了基础知识再回过头来看这本书。市面上有很多介绍HTML、CSS 和 JavaScript的书籍,网上也有很多相关的博客,文章。如果之前有其他框架的经验会很有帮助,但也不是必须的。