Vue-4-前端框架Vue基础入门之Vue的常用操作
文章目录
- 1 VUE
- 1.1 文件结构
- 1.2 定义和显示变量
- 1.2.1 ref函数
- 1.2.2 reactive函数
- 1.3 定义方法
- 1.3.1 方式一
- 1.3.2 方式二
- 1.3.3 方式三
- 1.4 循环遍历
- 1.5 watch
- 1.5.1 监听ref
- 1.5.2 监听reactive
- 1.6 生命周期函数
- 1.7 配置文件
- 2 问题及解决
- 2.1 lack permissions
- 2.2 npm run dev! Missing script: dev
- 3 参考附录
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 属性来限制样式仅应用于当前组件，避免全局污