devbox
正经夜光杯
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

2024最新最全Vue3零基础入门到精通，编程小白也能听得懂写的出，web前端快速入门教程，uniapp开发小程序学习视频_vue3课程

作者：正经夜光杯 | 2024-07-24 19:44:35

赞

踩

vue3课程

今天开始带着大家一起零基础学习vue3，我们通常学习完vue3的目的就是为了开发移动项目或者是小程序项目。所以我们边学习基础，边进行实战。而我们学习vue3来开发项目的一个延申就是uniapp。在下面的课程中我们就简称uniapp为uni吧。我这里从零基础开始教大家，后面可以带大家简单的做一个实战项目。所以不用担心自己没有基础，跟着石头哥认真学习就行了的。

一，认识vue3和uniapp

今天带大家来学习vue3，熟悉石头哥的同学肯定知道，我们要学习就学习最新的。当然如果你们公司或者你想学习vue2可以去看下别人的视频，学完vue2再来学习石头哥的vue3也行，不过我还是建议要学就学最新的，我们直接从最新的vue3来开始学习。

至于我们为什么不学习vue2，主要是基于以下优势

1-1，vue3的优势

Vue.js 是一个流行的前端 JavaScript 框架，用于构建用户界面和单页应用程序。Vue 3 是该框架的最新主要版本，它带来了许多改进和新特性。据说vue3运行速度是vue2的二倍。
以下是一些开发者可能选择使用 Vue 3 而不是 Vue 2 的原因：

  1. 性能提升：Vue 3 在虚拟 DOM 的重写、组件初始化、编译器优化等方面进行了性能优化，使得 Vue 3 在运行时性能上有了显著提升。

  2. 更小的打包体积：Vue 3 的代码更加精简，减少了最终打包的体积，这有助于加快页面加载速度。

  3. 响应式系统的改进：Vue 3 引入了一个新的响应式系统，它提供了更精确的依赖跟踪和更新机制，减少了不必要的渲染。

  4. Composition API：Vue 3 引入了 Composition API，这是一种新的编写组件逻辑的方式，它允许开发者以更灵活和可组合的方式组织代码。

  5. TypeScript 支持：Vue 3 的开发过程中大量使用了 TypeScript，这使得框架对 TypeScript 提供了更好的支持，有助于开发者编写更健壮的代码。

  6. Teleport：Vue 3 引入了一个新的内置组件 Teleport，它允许开发者将组件的子节点传送到 DOM 中的其他位置。

  7. Fragment：Vue 3 支持多个根节点，这意味着可以在模板中使用多个元素作为组件的根。

  8. 自定义渲染器：Vue 3 允许开发者创建自定义渲染器，这为框架的定制化提供了更多可能性。

  9. 全局 API 的更改：Vue 3 重写了全局 API，使其更加一致和易于理解。

  10. 工具和生态系统的更新：随着 Vue 3 的发布，相关的工具和生态系统（如 Vue CLI、Vue Router、Vuex 等）也进行了更新，以支持新特性。

1-2，uniapp和vue的关系

uni-app 和 Vue之间有着紧密的联系，它们之间的关系可以从以下几个方面来理解：

  1. 技术基础:

    • uni-app 是基于 Vue.js 框架开发的。这意味着 uni-app 继承了 Vue 的核心特性，如响应式数据绑定、组件系统、指令系统等。

  2. 语法和API:

    • 在 uni-app 中，开发者可以使用 Vue 的语法来定义数据、模板、方法等。uni-app 支持 Vue 的模板语法、计算属性、侦听器、生命周期钩子等。

  3. 组件化开发:

    • uni-app 遵循 Vue 的组件化开发模式，允许开发者通过创建可复用的组件来构建复杂的用户界面。

  4. 跨平台:

    • uni-app 的一个主要特点是跨平台能力，它允许开发者使用 Vue 的开发方式编写代码，然后将应用发布到不同的平台，包括 Web、iOS、Android 以及各种小程序平台。

  5. 开发工具:

    • uni-app 有自己的开发工具，如 HBuilderX，它提供了对 Vue 项目的支持，包括代码编辑、调试、打包等功能。

  6. 生态和社区:

    • Vue 拥有一个庞大的生态系统和社区，提供了大量的插件、工具和资源。uni-app 作为基于 Vue 的框架，可以利用这个生态系统中的许多资源。

  7. Vue 版本支持:

    • uni-app 支持不同版本的 Vue.js。从 uni-app 2.9.3 版本开始，它正式支持 Vue 3，允许开发者使用 Vue 3 的新特性和性能改进。

  8. 性能优化:

    • Vue.js 以其轻量级和高性能而闻名。uni-app 在保持 Vue 性能优势的同时，还针对跨平台应用进行了额外的性能优化。

  9. 学习曲线:

    • 对于熟悉 Vue 的开发者来说，学习 uni-app 会相对容易，因为他们可以利用已有的 Vue 知识来开发跨平台应用。

总结来说，uni-app 是在 Vue.js 的基础上构建的，专门为跨平台开发设计的框架。它保留了 Vue 的核心特性，同时增加了跨平台开发的能力，使得开发者能够使用一套代码来构建多个平台上运行的应用程序。

查看下图，可以看到uniapp项目和vue3项目基本上类似，都有App.vue.开发页面也都是用的vue文件。

并且页面的技术点都是一模一样的

所以如果你会vue就可以直接上手开发uniapp，当然如果你不会uniapp也不会vue，今天就跟着石头哥从零开始学习vue3和uniapp

1-3，uniapp和vue，小程序的关系

UniApp 和 Vue 与小程序之间的关系可以从以下几个方面理解：

  1. Vue 为基础：Vue 是一个流行的前端框架，专注于用户界面的构建。它通过组件化的方式，使得开发者可以高效地组织和重用代码。Vue 本身主要面向 Web 开发，但它的灵活性也为扩展到其他平台提供了可能。

  2. UniApp 的跨平台能力：UniApp 是基于 Vue 的一个跨平台开发框架，它不仅支持 Web 端（H5）的开发，还特别针对小程序平台进行了优化。这意味着使用 UniApp 编写的代码，经过编译后，可以直接运行在微信小程序、支付宝小程序、百度小程序等多个小程序平台上，无需为每个平台单独编写代码，大大提高了开发效率和代码复用率。

  3. 小程序特性的集成：在 UniApp 中，为了更好地适应小程序的开发需求，框架集成了小程序的特定标签和API。尽管 UniApp 代码基于 Vue 语法，但在实际开发小程序时，开发者可以使用类似于小程序原生的开发方式，比如使用小程序的组件和API来访问设备的特定功能，如本地存储、支付接口等。

  4. 编译目标：当选择编译目标为小程序时，UniApp 会将 Vue 代码转换为符合各大小程序平台规范的代码，确保应用可以在各个小程序环境中正常运行。这个过程中，框架会处理好 Vue 的响应式数据绑定、组件生命周期等特性与小程序平台之间的映射问题。

总结而言，Vue 为 UniApp 提供了强大的基础架构和开发体验，而 UniApp 则在此基础上扩展了对小程序等多平台的支持，使得开发者能够利用 Vue 的便利性，快速开发出适应多个小程序平台的应用。

uniapp是基于vue框架，所以如果你会vue的话，来学uniapp会很简单。uniapp的开发规范和小程序相似，所以如果你跟着石头哥学过小程序，再来学uniapp就能很快的入门。

当然了，如果你没有小程序或者vue基础，也没事的，只要跟着石头哥认真学习这门uniapp入门课即可。

所以我们学习完这门课，vue3，uniapp，小程序我们都可以熟练的开发了。

1-4，uniapp的好处

我们学习uniapp之前先要认识uniapp的好处

看下官网 https://uniapp.dcloud.net.cn
就可以看到，我们用编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

总结起来uniapp有以下几点好处

  • 1，同一套代码可以编译运行多端（小程序，安卓，ios，web等）
  • 2，节省人力和维护成本
  • 3，接近原生，体验效果更好
  • 4，开发效率高，开发时间更短
  • 5，学习成本比较低（3-15天即可入门）
  • 6，社区活跃，版本迭代快，有问题更容易在社区解决

1-5，为什么要选择uni-app

我们这一节主要是来了解下uniapp。因为uniapp是使用vue语法开发的，所以我们在学习vue3的同时，也会教大家进行实战开发uniapp项目。

在vue的官方文档里，我们看到创建vue3项目需要用到npm，对于纯新手小白来说。是不太友好的，因为好多人配置node环境就很费劲。所以我们今天结合uniapp来零基础便捷的学习vue3知识。

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势

1-6，功能框架图和多平台运行

从下面uni-app功能框架图可看出，uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。其实说白了，就是开发一套uniapp代码，就可以在当前主流的平台上运行。大大的节省了开发成本。

大家看下上图，其实就可以知道，如果没有uniapp，我们想在app，h5，小程序里运行我们的项目，那么我们至少要开发4套不同平台的代码，uni真正的好处就是我们只需要开发一套代码就可以在主流的平台上全平台运行。

下图可以看到我们一套代码可以在多个平台运行的效果。

1-7，选项式API

在正式学习vue3之前先给大家普及一个简单的知识。

Vue.js 提供了两种主要的组件开发风格：选项式（Options API）和组合式（Composition API）。这两种风格各有特点，适用于不同的场景和开发偏好。

1-7-1， 选项式API（Options API）

  • 简介：这是Vue 2中就已经存在的经典开发模式，也是大多数Vue开发者熟悉的编程方式。选项式API通过一系列预定义的选项（如data, methods, computed, watch等）来组织组件的逻辑。
  • 特点：
    • 直观易懂：对于初学者友好，每个选项对应组件的一个方面，逻辑结构清晰。
    • 模块化：组件的不同部分（状态、计算属性、方法等）被分隔在不同的选项下，便于理解和维护。
    • 灵活性：因为每个选项是独立的，所以修改或添加逻辑比较直接。
  • 不足：随着组件复杂度增加，大型组件中的状态和逻辑可能变得分散，难以管理和复用。

1-7-2，组合式API（Composition API）

  • 简介：Vue 3引入的新API，旨在解决复杂组件的可维护性和可复用性问题。组合式API的核心思想是使用setup()函数集中管理组件的状态和行为，鼓励使用函数式和响应式编程的思想。
  • 特点：
    • 逻辑复用：通过组合函数轻松复用状态逻辑和行为逻辑，提高代码的可维护性和可测试性。
    • 集中管理状态：使用ref和reactive等API，可以在setup()中集中初始化和管理组件的状态。
    • 清晰的数据流：利用Composition Functions，可以更清晰地表达组件内部的数据依赖关系，使代码逻辑更加直观。
    • 更适合大型项目：对于复杂应用，组合式API能够帮助开发者更好地组织和管理组件的内部逻辑。
  • 学习曲线：对于习惯选项式API的开发者，可能需要时间去适应组合式API的思维方式和编码方式。

1-8，为什么先学选项式API

选项式API和组合式API并不是互斥的，Vue 3中两者可以共存，并且Vue 3也提供了@vue/composition-api库让Vue 2应用能够使用组合式API。选择哪种API取决于项目的具体需求、团队的技术栈偏好以及个人的编程风格。对于追求组件逻辑复用性和管理复杂状态的项目，组合式API通常更为推荐；而对于小型项目或者初学者，选项式API因其直观简单，可能是更好的起点。

为了降低大家的学习成本，我先用基础简单的选项式Api来带大家入门。等大家学习的差不多了。我再给大家讲组合式api。

二，开发者工具

所谓工欲善其事，必先利其器。我们开发uniapp学习vue3肯定要有一个得心应手的开发者工具。

我们开发uniapp的工具就是HBuilderX

2-1，下载HBuilderX开发者工具

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。下面是hbuilder官方的简介

我们可以直接去官网下载HBuilderX开发者工具 官网下载地址
进去后我们只需要点击下载即可，记得window和mac电脑要下载自己对应的版本。

2-2，安装HBuilderX

其实HBuilderX的安装很简单，我们上面下载好的安装包，解压好就可以了，解压好以后如下图。当然我这里是window电脑的安装过程，大家如果是mac电脑，可以自行安装。安装过程基本上大差小不差的。

我们在解压好的文件里双击exe文件即可运行。

打开后如下

当然了，如果感觉每次从目录里双击exe文件打开麻烦，可以固定到任务栏或者创建快捷方式，然后把快捷方式放到桌面。

也可以直接发送到桌面快捷方式

一般情况下，我们第一次打开项目关闭的时候，系统会提示我们自动创建一个桌面快捷方式的。

当然我比较喜欢固定到任务栏，因为以后要经常用整个开发者工具，所以怎么样打开方便就怎么来就行了。

三，创建属于自己的第一个vue3项目

当然如果你有学过石头哥的小程序课程，再来学习uni就可以很快的入门的。反过来说，如果你没有小程序或者vue基础，也没事的，只要跟着石头哥认真学习即可。

3-1,创建一个新的uniapp项目

在点击工具栏里的文件 -> 新建 -> 项目

然后在弹出的创建页面做以下配置

  • 1，项目名称：随便取，可以用汉字，但是尽量用英文或者拼音
  • 2，项目路径：一般保持默认即可，不过我个人比较喜欢放在桌面，这样后面找代码方便些。
  • 3，选择模板：学习期间用默认空白模板即可，后面我们学的差不多了，就可以使用官方提供的模板，进行快速开发了。
  • 4，vue版本：因为我们的uniapp是基于vue开发的，所以这里要选择vue版本，既然我们学习，就建议大家学习最新的，用vue 3这个版本就可以了。并且我们今天要学习vue3，所以这里一定要选中vue3版本。
  • 5，学习期间，我们不使用uniCloud和gitCode代码托管平台，所以这两个选项不用勾选即可。所有这些设置完，就可以点击创建了。

关于项目路径，比如我在桌面新建一个demo1空白文件夹，然后在创建项目时点击浏览，选择自己创建的demo1文件夹即可。

这样我们创建的项目就会在demo1文件里，也就是我们的项目源码就存在了demo1里

新创建好的项目如下

可以看到我们的新项目就创建在了demo1里，到这里我们的第一个uniapp项目就创建好了。
跟着石头哥学过微信小程序开发的同学大概可以看出来，uniapp项目其实和小程序项目很相似的。

一些组件，语法也很相似，因为uniapp就是基于vue框架的，而小程序呢也是借鉴了vue。所以你学过石头哥的小程序课程，再来学uni，肯定学的很快的。当然了，即便没学过小程序，石头哥也会手把手的带着大家零基础入门uni的，只要跟着石头哥认真学习。

3-2，认识uniapp项目目录结构

我们上面一步创建好了项目，这一节我们就来认识项目。
一个完整的uni项目的目录结构如下，我们后期随着学习的深入会逐个带大家学习，所以目前阶段，大家只需要大致知道就行，没有必要死记硬背下来。

大家可以先对照着官方给出的目录结构，大致的知道我们创建的第一个项目里每个文件都是什么作用。我在配套视频讲解里，会慢慢的带着大家熟悉的。

我这里先用通俗的话给大家说下我们新建项目的目录结构，方便大家理解

  • pages：所有页面存放的目录，我们目前只有一个index页面，后面再创建别的页面，比如个人中心，列表页，详情页等，都是放在这个pages文件里
  • static：静态资源目录，例如图标，图片，音视频等
  • App.vue：我们的根组件，用来配置App全局样式以及监听，所有页面的切换都是在这里进行的。
  • index.html：就是我们的uniapp使用的vue框架生成的单页面文件，有点类似我们的网页的index页。
  • main.js：项目初始化入口文件，主要用来初始化一些需要的东西
  • manifest.json ：用来指定应用名称、appid、logo、版本等打包信息，后面我们配置微信小程序，支付宝小程序等，可以在这里配置
  • pages.json ：配置页面路由、导航条、选项卡等页面类信息，决定页面文件的路径，窗口样式，导航栏，底部的tabbar等。
  • uni.scss ：这里是uni-app内置的常用样式变量，方便控制应用的整体风格，比如颜色，边框等

官方文档也有大致的介绍的

3-3，认识开发者工具


我们可以在顶部的工具栏里做一些开发者的配置，比如我这里把主题设置为了酷黑色。

当然了这里大家根据自己的喜好，去做一些简单的设置即可。我们后面的学习中会慢慢的用到工具栏里的东西，在视频里我慢慢的给大家做介绍。

我们常用的开发者工具的功能还有模拟器，调试器，在下一节的。

3-4，项目的运行和预览

我们项目的预览常用的有下面几个方式。为了降低大家的学习成本，我们学习阶段主要运行到内置浏览器，后面会慢慢教大家运行到小程序或者手机上。

运行到浏览器就是运行到我们电脑上的浏览器

运行到手机或者模拟器：就是可以运行到我们的安卓或者苹果手机上

运行到小程序：就是我们开发的项目可以运行到微信，支付宝，百度小程序等。

运行到内置浏览器：这是我们目前学习阶段最常用的方式，所以我们目前运行先使用内置浏览器即可。

3-5，运行项目到内置浏览器


我们点击运行到内置浏览器，第一次会提示：安装插件，我们点击确定，安装即可。然后耐心等待插件的安装即可。

安装成功

然后再次点击运行到内置浏览器，就可以在内置浏览器上预览我们的项目了

这时候我们也多了一个调试器，调试器主要就是用来打印一些日志信息，来帮助我们调试项目，辅助修复bug。

3-6，运行到微信小程序开发者工具

我们开发好的项目不仅要运行在浏览器里，还需要运行到小程序里，所以我们这里以微信小程序为例，其他的支付宝，百度小程序等，都是一样的原理。
如下图所示，直接点击运行–》运行到小程序模拟器–》微信开发者工具

正常我们第一次运行，会弹出以下弹窗。我们要关联下开发者工具。

所以要先去安装小程序开发者工具。点击上图的链接即可。然后去下载对应的版本即可。

然后点击自己电脑对应系统的版本下载即可。至于安装很方便，只需要双击安装包，不停的点下一步即可，安装完成以后的官方开发者工具长这样。

然后找到安装路径，如下所示。当然最好你自己记住自己安装到哪里了，这样也可以的。

然后记住这个路径

记住后点击下图的浏览，一步步找到上面的路径即可。

点击确定，就可以编译运行到我们的小程序开发者工具了。有时候第一次运行会报如下错误。打不开小程序开发者工具。

这个时候就要按照上的提示，配置下了。打开微信开发者工具 -> 设置 -> 安全设置，将服务端口开启。

打开服务端口

然后，先停止运行

然后再重新运行到微信小程序即可。

可以看到在编译启动中

启动后，要在微信开发者工具里点击下信任并运行。

可以看到我的uniapp项目就可以编译成微信小程序，运行起来了。
并且会编译成微信小程序的代码。这就是uniapp的强大之处。

我们后面运行到支付宝，抖音小程序等都是一样的流程。

四，uniapp和vue3开发三剑客

4-1，页面布局，样式，js逻辑

如果大家学过石头哥的小程序入门课，肯定知道石头哥的小程序开发三剑客。其实uni开发也有自己的三剑客。

其实小程序三剑客的知识点，同样适用于uniapp

4-2，uniapp和小程序，传统web对比

结构小程序传统webuniapp
结构布局WxmlHtml写在template里
样式WxssCss写在style里
逻辑JavaScriptJavaScript写在script里
配置Json无Json

和小程序不同的是uniapp的页面布局，样式，逻辑都是写在同一个.vue文件里，所以我们接下来学习uniapp和小程序会有一些差别，但是大体上还是很相近的。所以不管你有没有学过石头哥的小程序课程，都不影响零基础入门uniapp。

五，注释和日志打印的学习

5-1，一些常用的快捷键

我们在开发时为了提高代码编写效率，通常会使用一些快捷键。我们开发工具自带的快捷比较多，我这里不一一列举了，我把一些常用的快捷键拿出来给大家大致讲一讲，我这里以window电脑为例，如果你mac电脑，可以自己去看下开发者工具默认的快捷键。多看几遍把常用的记住就行了。

快捷键组合描述
Ctrl+A全选
Ctrl+C复制选中内容
Ctrl+V粘贴复制的内容
Ctrl+D删除当前这行的代码
Ctrl+N新建文件
Ctrl+W关闭文件
Ctrl+Shift+W关闭全部文件
Ctrl+S保存文件
Ctrl+/开启/关闭代码注释
Ctrl+Shift+/开启/关闭注释已选内容
Ctrl + Shift +R复制当前行到下一行
Ctrl+F打开搜索离材条，可以查找替换指定内容或者全部内容
Ctrl+H打开搜索框，可以搜所指定内容位置
Ctrl+R快速打开运行框
Ctrl+Z撤销修改，返回上一步
Ctrl+Shift+Z返回下一步
Ctrl+↑向上移动行代码
Ctrl+↓向下移动代码
Alt+/激活代码助手

如果感觉默认的快捷键不喜欢，可以自己重新设置快捷键,这里不太建议自定义快捷键，熟记自带的常用的快捷键就可以了。

有的电脑上快捷键可能会有细微差距，以开发者工具默认自带的快捷键为准。

5-1，注释的学习

我们在学习后面课程之前，先来学习下注释。注释是在代码里给予提示使用的，主要是让别人更快的熟悉你的代码，也方便后期自己看自己的代码，快速回忆起来使用的。 注释有快捷键的，正好我们上面一节有讲常用的快捷键。

  • window电脑：Ctrl+/
  • mac电脑：command+/

可以看到我们常用的三种注释如下，正好和我们前面学的三剑客对应起来。

  • 布局的注释是：<!-- -->
  • js逻辑代码的注释是： //
  • css样式的注释是：/* */

    我们这里没有必要记每种注释的写法，只需要记住快捷键，可以快速生成注释即可。这就是快捷键的好处。

5-3，日志打印的学习

我们在开发过程中，总会遇到各种各样的问题，学会在控制台看日志，对我们来说可以帮助我们快速的定位问题，解决问题。
我们开发过程中也会经常用到日志打印。日志打印呢，就是事先打印出来一些东西，用以验证我们的代码输出的结果是否正确。

5-3-1，内置浏览器打印日志

日志打印的语法如下

console.log("我的打印出来的日志内容")

  • 1


可以看出我们在控制台日志里打印出来了我们写的日志，并且后面也告知我们这行代码写在了第16行。这样在日后的开发过程中，都可以快速的方便我们校验代码，定位问题，解决问题。

5-3-2，外部浏览器里打印日志

有的同学在上面内置浏览器里无法打印日志，所以这里提供一个备用方案，我们在前面运行项目章节有教大家怎么样运行到电脑浏览器。我们只需要运行项目到自己电脑浏览器即可。

如我这里以运行到chrome浏览器(谷歌浏览器)为例

项目运行到浏览器后，右键然后点击检查。就可以看到控制台了。

我们点击Console就和内置浏览器一样，可以打印日志了。

5-4，日志报错信息

我们的代码的编写好，就可以点击运行，有时候运行会在控制台的日志报错，一般的报错如下图，基本上都是深颜色的爆红，所以一般情况下，控制台日志里出现爆红，就说明我们的代码有错误，这时候就要根据报错日志，去定位自己的代码错误了。
我们在后面的实战课程中，会故意写一些错误代码，然后教大家如何识别错误，更改代码。


六，常见组件的学习

我们学习vue3的时候难免会遇到一些常用的布局组件，我们这里以uniapp的组件为例，uni为开发者提供了一系列的基础组件，这些组件类似于html里的基础标签元素

6-1，认识view组件

view组件：相当于一个盒子，可以用来装一些别的组件。
它类似于传统html中的div，用于包裹各种元素内容
官方文档：https://uniapp.dcloud.net.cn/component/view.html
如果大家有html的web基础，就可以把我们小程序里的view理解为html里的div标签。如果你没学过也无所谓，直接跟着我学习view即可。

在代码里简单的使用：

6-2，认识text组件

text组件：主要用来显示文字的。类似与html里的span标签。

6-3，认识input组件

input组件主要用来获取用户输入的信息的，一般在用户填写信息，提交数据，登录注册和提交表单时会用到。
官方文档：https://uniapp.dcloud.net.cn/component/input.html
输入框input有很多属性，我这里把一些常用的属性带着大家学习下。其他的大家可以自己去看官方文档详细学习

我们以type属性为例，我们的type属性有下面一些属性值。

比如我们给input的type设置为number属性值，那么我们在输入内容的时候，只可以输入数字。

6-4，认识button组件

button 组件：是按钮组件，自带默认的按钮效果，我们后面会经常用到。
官方文档：https://uniapp.dcloud.net.cn/component/button.html

button按钮有很多属性，我这里把一些常用的属性带着大家学习下。其他的大家可以自己去看官方文档详细学习

如我们设置的一些常用的按钮属性

6-5，认识图片image组件

image组件：主要用来显示图片，可以是本地图片，也可以是网络图片。类似于html里的img标签。

6-5–1，src属性显示网络图片

我们通过src属性来设置要显示的图片资源，图片资源有两种

  • 本地图片资源
  • 网络图片资源

我们设置显示图片的语法如下

<image src="图片资源地址"></image>

  • 1

如下图，我们显示一个网络图片。

这里给大家提供一个网络图片地址
https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg

如果这个地址过期了，大家可以到网上自己找图片。随便找个图片，然后右键，点击复制图片地址，就可以获取到网络图片了。

6-5-2，src属性显示本地图片

用image显示本地图片，我们需要提前把图片放在static，如下图我们把本地图片放在static目录里

然后在image组件里设置src属性，指向这个本地图片，就可以在uniapp里展示了。
我把网络图片和本地图片都在小程序里展示，给大家对比着学习下。

七，数据绑定和函数/方法（Methods）

7-1，数据绑定

7-1-2，组件外的数据绑定(文本插值)

我们在页面布局里写数据，一般情况下可以直接写，比如下面我们可以用10个text里显示10个编程小石头，假设我们有一个这样的需求，需要把编程小石头给为石头哥。如果我们每个都改一遍，是不是要改10遍，这样就导致效率低下了。

所以我们这里可以用数据动态绑定来提升效率。

数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值，就是用{{}}包裹你的值，然后这个值就可以动态的显示了，比如我用 {{name}} 然后给这个name设置值为：编程小石头，如下，可以看到我们和上面写10遍编程小石头是一样的。

我们想把编程小石头改为石头哥，就只需要改name的值就行了。如下所示。在这里插入图片描述


这样我们就明白用数据绑定的好处，其实我们后面的开发中，除了那种死的不会变的数据可以直接写死外，其他的后面可能需要改变的数据最好都用数据动态绑定。

关于数据绑定的语法需要大家记住，一定要多练，因为后面会经常用的。
就是在页面布局需要显示数据的地方用 {{数据名}}
然后在js的data里设置数据值，如下：

这里其实使用了vue的数据绑定，而vue官方又叫这种数据绑定为文本插值。其实就是把数据动态的绑定到我们组件外。

7-1-2，组件内的数据绑定(v-bind属性绑定)

我们上面一节学习的文本插值式的数据绑定，那是把我们的数据动态的绑定到组件外。
如果我们想动态的绑定组件内的属性数据呢。比如我们的image图片组件的src属性，我们的图片链接不想写死，想动态的去替换。这个时候就可以用v-bind 动态地绑定属性了

v-bind也可以缩写为‘ : ’，可以用于响应式地更新

可以看到我们使用v-bind或者缩写的 ： 都可以动态的把url数据绑定到image的src属性上。

这里要注意文本插值和属性绑定是有区别的

  • 文本插值绑定数据，需要用{{}}
  • v-bind属性绑定，不需要{{}}

7-2，绑定数据的读取

我们上面通过{{}}绑定数据到data里，我们绑定的数据有时候也需要用，而使用绑定的数据，可以通过this.数据名来使用

可以看到我们通过this.name就可以获取name绑定的数据。

7-3，函数的学习

函数也可以叫做方法（Methods）
它是组件中定义的函数，它们可以被模板中的事件监听器调用，或者在组件的生命周期钩子中使用。

函数的两种使用方式如下图：

我们的函数一般是写在js逻辑区域的methods里，比如我们定义一个getname函数，有下面两种写法。

石头哥这里推荐第一种方式定义函数，这也更简单。

八，条件渲染

Vue 3 中条件渲染主要通过以下几种指令实现：

8-1，v-if

v-if：这是最基本也是最常用的条件渲染指令。它用于条件性地渲染一块内容，只有当指令后的表达式求值为真时，绑定的元素或组件才会被渲染。

<script>
	export default {
		data() {
			return {
				isLogin: true
			}
		}
	}
</script>
<template>
	<div v-if="isLogin">我是登录成功</div>
	<div v-else>我的未登录</div>
</template>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

8-2，v-else

v-else：紧跟在v-if或v-else-if之后，表示当前面的条件都不满足时渲染的内容。

如我们前面的v-if里的未登录，就是当条件为false时，就会显示对应的内容。

<script>
	export default {
		data() {
			return {
				isLogin: false
			}
		}
	}
</script>
<template>
	<div v-if="isLogin">我是登录成功</div>
	<div v-else>我是未登录</div>
</template>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

8-3，v-else-if

v-else-if：用于链式判断多个条件，类似于JavaScript中的else if语句。v-else-if 和 v-else 与 v-if 配合使用，提供类似于传统 JavaScript 中的 if-else-if-else 结构。v-else-if 可以链式使用，而 v-else 用来表示最后的“否则”情况。

<script>
	export default {
		data() {
			return {
				score: 88
			}
		}
	}
</script>
<template>
	<div v-if="score > 90">非常优秀</div>
	<div v-else-if="score > 80">良好</div>
	<div v-else-if="score > 59">及格</div>
	<div v-else>不及格</div>
</template>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

在Vue 3中，这些条件渲染指令的工作方式与Vue 2相似，但在内部实现上进行了优化，以提高应用的性能和响应速度。

九，列表渲染

在 Vue 3 中，列表渲染通常使用 v-for 指令来完成。v-for 可以绑定到数组或者对象上，用于基于源数据多次渲染一个元素或组件。以下是一些关于 Vue 3 列表渲染的基础知识和示例。

9-1，基本用法

数组的渲染

当你有一个数组并且想要渲染出列表时，可以使用 v-for 指令：

	<ul>
		<li v-for="item in items">{{item}}</li>
	</ul>

  • 1
  • 2
  • 3

在这个例子中，items是一个数组，v-for指令遍历这个数组，将每个元素赋值给item，并在每次迭代中渲染一个

  • 元素。
    对应的数据如下

  • <script>
	export default {
		data() {
			return {
				items: [
					"列表1",
					"列表2",
					"列表3",
					"列表4",
					"列表5",
					"列表6",
				]
			}
		}
	}
</script>
<template>
	<ul>
		<li v-for="item in items">{{item}}</li>
	</ul>
</template>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    页面上显示如下

    其实我们列表这里用的最多的就是商品列表或者文章列表。我接下来以一个新闻列表为例，教大家深入的学习下

    9-2，文章列表的实现

    我们通常显示文章列表的时候会显示图片和标题，那么我们这节就来写一个简单的新闻文章列表页。

    9-2-1，显示图片列表

    我们这里先显示图片的列表，这里需要大家提前去找一个图片，作为我们的新闻图片。把找到的图片，放到static文件夹里。如我这里用了一个我的头像图片。这里给大家的建议，图片名不要用中文，要不然会出现一些兼容的问题。

    所以我把图片改下名，用拼音就行。

    然后我们就可以显示图片了。我这里还是用v-for来显示图片列表

    可以看到我们在列表显示了3个图片，并且也显示了3个简单的标题。

    9-2-2，显示图片和文字列表

    我们上面显示的图片列表都是一样的，那么我们就再找三张不一样的图片来。还是放到static文件里


    然后我们要自己组装下列表的数据，我们现在用的是本地图片和数据，后面正式开发时，可能就是先把图片和标题存到数据库里，然后获取数据库，显示列表。当然这个后面要学习的，我们现在还是先学习我们的简单列表。
    如我们组装的数据如下

    [{
	img: '/static/1.jpg',
	title: '我是新闻标题一'
}, {
	img: '/static/2.jpg',
	title: '我是新闻标题二'
}, {
	img: '/static/3.jpg',
	title: '我是新闻标题三'
}]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    我们这里的img就是我们每条文章数据的图片，title就是标题


    这里要注意，用英文状态下的单引号， /static/是指向我们的static目录，然后/static/1.jpg就是使用static目录的1.jpg这个图片。
    这样的我们就可以显示一个简单的新闻列表出来了

    对应的代码完整的贴给大家

    <script>
	export default {
		data() {
			return {
				items: [{
					img: '/static/1.jpg',
					title: '我是新闻标题一'
				}, {
					img: '/static/2.jpg',
					title: '我是新闻标题二'
				}, {
					img: '/static/3.jpg',
					title: '我是新闻标题三'
				}]
			}
		}
	}
</script>
<template>
	<view v-for="item in items">
		<image :src="item.img"></image>
		<view>{{item.title}}</view>
	</view>

</template>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    9-3，使用 key

    在渲染列表时，为每个元素提供一个唯一的 key 是非常重要的。Vue 使用这个 key 来跟踪每个节点的身份，从而在数据变化时高效地更新 DOM。

    通常，key 应该是一个唯一标识列表中每一项的值，比如一个唯一 ID：

    <li v-for="item in items" :key="item.id">{{ item.text }}</li>

    • 1

    如果列表项中没有唯一 ID，你也可以使用数组索引作为最后的手段：

    <li v-for="(item, index) in items" :key="index">{{ item.text }}</li>

    • 1

    但请注意，使用索引作为 key 可能会引起性能问题，尤其是在列表项被重新排序或添加/删除时。
    我们正式开发的时候，后台的每条数据都会有自己的唯一id，我们就可以用这个id作为我们的key

    十，事件处理的学习

    10-1，事件处理

    我们在vue3里做事件处理主要是为了监听事件,
    它是组件交互的核心部分，
    可以通过多种方式来实现。以下是一些常见的监听事件方法和实践：

    10-1-1，监听点击事件

    接下来我们学习事件，我们常用的事件如下，这里我们先重点讲解下@click点击事件和
    @input获取输入值的事件

    我们如果想给一个组件定义点击事件，就要用到uni的事件处理，由于uni是基于vue语法的额，所以我们给uni里的组件定义点击事件，就要用到vue的语法。
    我们给一个组件绑定点击事件的语法如下：

    我们可以使用 v-on 指令来监听点击事件，从而执行 JavaScript 代码。
    v-on 指令可以缩写为 @ 符号。

    语法格式：

    v-on:click="methodName"
或
@click="methodName"

    • 1
    • 2
    • 3

    methodName就是函数名，如下所示

    可以看出我们使用v-on和@都可以定义点击事件，我这里推荐大家用@简写的方式

    10-1-2，监听用户输入事件

    监听用户输入事件其实主要就是为了获取用户输入信息
    获取input输入框里用户输入的内容有两种方式

    • @input结合函数
    • v-model数据绑定获取输入内容(推荐)

    @input结合函数获取输入内容

    我们获取用户输入会用到@input事件，其实我们在学习input组件时，官方有给出这个属性的。

    看官方的文档，可以知道@input主要是为了获取用户的输入内容。
    @input的定义如下图，其中的getname就是我们定义的函数，用来接收用户输入的。

    在布局里定义好bindinput事件以后，在js页面再定义一个和事件名一样的函数即可。

    然后就可以监听用户输入了

    视频里会作详细讲解。如果你有买老师的课程，或者购买老师的年卡，可以获取对应的学习视频。

    10-1-3，v-model双向绑定数据获取输入内容

    • v-model是什么
      v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

    • 为什么使用v-model
      v-model作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。

    • v-model的原理简单描述
      v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化

    具体的语法如下：

    这样当我们用户输入内容后，输入的内容就可以绑定到name上，后面直接使用就行了。

    下面来对比下@input和v-model的代码
    可以发现v-model比着@input，很明显的节省了一步定义函数getname，所以这里推荐大家使用v-model来获取input输入内容。

    另外，v-model 还可以用于各种不同类型的输入数据的获取，用于在表单类元素(单选、多选、下拉选择、输入框等)上双向绑定数据，后面学习中用到我会再做具体讲解。

    10-2，事件传参

    我们有时候用点击事件，需要把当前页面上的数据作为参数传递给函数的。比如我从新闻列表页点击其中一篇文章，然后进入新闻详情页，这个时候我们就需要把文章id传递给函数，然后再继续携带到详情页，通过这个id来请求对应的新闻详情。

    10-2-1，传递字符串

    事件传参的语法如下

    @click="事件名(参数)

    • 1

    我们先来看简单的参数传递，我这里随便传递一个字符串试下

    点击后可以打印出来参数

    10-2-2，传递属性值

    回到我们前面的那个新闻列表，我们增加下点击事件，并且传递参数

    我们点击不同的文章，可以看到打印出不同的id

    10-2-3，传递多个属性值

    我们也可以同时传递多个属性值，比如我们传递id和标题

    可以看到我们可以同时传递id和标题，并且打印出来。

    10-2-4，传递对象

    当然有的同学可能想直接把对象作为参数传递，这样我们就可以想用那个数据就直接使用那个数据了

    可以看到我们把整个item作为参数传递了，这样我们想打印id和img就可以直接使用了。

    10-2-5，传递event

    有时候我们要用到event做一些调试比对的工作，那么我们该怎么传递event呢，如下图所示。

    组合式API

    1,选项式和组合式的区别和联系

    Vue.js 是一个流行的前端JavaScript框架，它提供了两种主要的API设计模式：选项式（Options API）和组合式（Composition API）。这两种模式在Vue 3中并存，允许开发者根据自己的喜好和项目需求选择使用。

    选项式（Options API）

    选项式API是Vue 2和Vue 3中的传统方式，它通过组件的选项对象来组织组件的逻辑。这个选项对象包含了组件的各种配置，如数据（data）、方法（methods）、生命周期钩子（lifecycle hooks）、计算属性（computed properties）、侦听器（watchers）等。

    特点：

    • 组织结构：选项式API将组件的不同功能分布在选项对象的不同属性中。
    • 熟悉性：对于熟悉Vue 2的开发者来说，选项式API非常直观和易于理解。
    • 适用性：适合较小的组件或者逻辑较为简单的场景。

    示例：

    export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  computed: {
    doubledCount() {
      return this.count * 2;
    }
  },
  watch: {
    count(newValue) {
      console.log(`Count changed to: ${newValue}`);
    }
  }
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    组合式（Composition API）

    组合式API是Vue 3引入的新特性，它提供了一种新的方式来组织组件逻辑。组合式API通过一组函数来组合组件的逻辑，使得状态和逻辑可以更容易地复用和组织。

    特点：

    • 逻辑复用：通过使用setup函数，开发者可以更容易地复用组件逻辑。
    • 组织结构：所有的状态和逻辑都在setup函数中定义，这有助于保持组件的整洁和组织性。
    • 适用性：适合大型组件或者逻辑较为复杂的场景，特别是当组件需要共享状态或逻辑时。

    示例：

    import { ref, computed, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const doubledCount = computed(() => count.value * 2);

    watch(count, (newValue) => {
      console.log(`Count changed to: ${newValue}`);
    });

    function increment() {
      count.value++;
    }

    // 暴露给模板的响应式属性和方法
    return {
      count,
      doubledCount,
      increment
    };
  }
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    区别和联系

    • 组织方式：选项式API通过分散在选项对象中的属性来组织逻辑，而组合式API则集中在setup函数中。
    • 复用性：组合式API通过setup函数提供了更好的逻辑复用机制。
    • 可读性：对于复杂的组件，组合式API可能提供更好的可读性和维护性。
    • 共存：在Vue 3中，两种API可以共存，开发者可以根据需要选择使用。

    总的来说，选项式API和组合式API提供了不同的组织和复用组件逻辑的方式。选项式API适合快速开发和小型项目，而组合式API则更适合大型项目和需要高度复用逻辑的场景。开发者可以根据个人喜好和项目需求灵活选择。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/正经夜光杯/article/detail/876472
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号