Vue-4-前端框架Vue基础入门之Vue的常用操作

Vue组件的文件结构、定义和显示变量、定义方法、循环遍历、侦听watch、生命周期函数。

1 VUE

Vue.js 是一种用于构建用户界面的渐进式 JavaScript 框架。它被设计为可以自底向上逐层应用，核心库只关注视图层，易于上手，并且能够方便地与其他库或现有项目整合。另一方面，当与现代化工具链以及各种支持库结合使用时，Vue 也完全能够为复杂的单页应用程序（SPA）提供驱动。

1.1 文件结构

后缀为.vue
文件一般包含三个部分
(1)template
模板是定义组件结构的部分，它描述了组件的 HTML 结构。Vue 使用一种特殊的语法扩展了 HTML，允许你在模板中直接嵌入 JavaScript 表达式、指令等。
(2)script
脚本部分包含了组件的逻辑，包括数据、方法、计算属性、生命周期钩子等。在 Vue 3 中，推荐使用 Composition API 来组织代码，当然也支持 Options API。
(3)style——css
样式部分用于定义组件的视觉表现。Vue 支持普通的 CSS、SCSS、LESS 等预处理器，并且可以通过 scoped 属性来限制样式仅应用于当前组件，避免全局污