苍穹外卖项目前端DAY01

2024-09-01 12:12

本文主要是介绍苍穹外卖项目前端DAY01,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前端DAY01

1、基于脚手架创建前端工程

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

使用Vue CLI创建前端工程:

  • 方式一:vue create 项目名称
  • 方式二:vue ui(比较慢)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2、vue基本使用方法

Vue的组件文件以.vue结尾,每个组件由三个部分组成:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

文本差值

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

属性绑定

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

事件绑定

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

双向绑定

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

条件渲染

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

axios

axios是一个基于promise的网络请求库,作用于浏览器和node.js中

安装命令

  • npm install axios

导入命令

  • import axios from ‘axios’

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3、路由 Vue-Router

3.1、Vue-Router介绍

vue属于单页面应用,所谓的路由,就是根据浏览器路径不同,用不同的视图组件替换这个页面内容

  • 路由组成:
    • VueRouter:路由器,根据路由请求在路由视图中动态渲染对应的视图组件
    • :路由链接组件,浏览器回解析成
    • :路由视图组件,用来展示与路由路径匹配的视图组件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.2、路由配置
  • 路由跳转
    • 标签式About
    • 编程式this.$router.push('/about')

3.3、嵌套路由

组件内要切换内容,就需要用到嵌套路由(子路由)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 实现步骤:
    • 安装并导入elementui,实现页面布局(Container布局容器)—ContainerView.vue
    • 提供子视图组件,用于效果展示 – P1View.vue、P2View.vue、P3View.vue
    • 在src/router/index.js中配置路由映射规则(嵌套路由配置)
    • 在布局容器视图中添加,实现子视图组件展示
    • 在布局容器视图中添加,实现路由请求

4、状态管理vuex

4.1、vuex介绍
  • vuex是一个专为Vue.js应用程序开发的状态管理库
  • vuex可以在多个组件之间共享数据,并且共享的数据是响应式的,即数据的变更能及时渲染到模版
  • vuex采用集中式存储管理所有组件的状态

安装vuex

npm install vuex@next --save

核心概念:

  • state:状态对象,集中定义各个组件共享的数据
  • mutations:类似于一个事件,用于修改共享数据,要求必须是同步函数
  • actions:类似于mutation,可以包含异步操作,通过调用mutation来改变共享数据
4.2、使用方式
  • 创建带有vuex功能的脚手架工程

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 定义和展示共享数据

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 在mutations中定义函数,修改共享数据

  • 调用mutations中的函数

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 在actions中定义函数,用于调用mutation

总结:如何使用vuex?

  • 在store对象的state属性中定义共享数据
  • 在store对象的mutations属性中定义修改共享数据的函数
  • 在store对象的actions属性中定义调用mutation的函数,可以进行异步操作
  • mutations中的函数不能直接调用,只能通过store对象的commit方法调用
  • actions中定义的函数不能直接调用,只能通过store对象dispatch方法调用

5、TypeScript

5.1、 TypeScript介绍
  • TypeScript(简称:TS)是微软退出的开源语言

  • TypeScript是JavaScript的超集(JS有的TS都有)

  • TypeScript = Type + JavaScript(在Js基础上增加了类型支持)

  • TypeScript文件扩展名为ts

  • TypeScript可编译成标准的JavaScript,并且在编译时进行类型检查

TS为什么要增加类型支持?

  • TS属于静态类型编程语言,JS属于动态类型编程语言
  • 静态类型在编译期做类型检查,动态类型在执行期做类型检查
5.2、TypeScript常用类型

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 类型标注的位置
    • 标注变量
    • 标注参数
    • 标注返回值

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 字符串类型、数字类型、布尔类型

  • 字面量类型

  • Interface类型

  • class类-基本使用

注意:使用class关键字来定义类,类中可以包含属性、构造方法、普通方法

  • class类 - 实现接口

  • class类 - 类的继承


D/%E5%AE%9E%E6%88%98%E9%A1%B9%E7%9B%AE/%E8%8B%8D%E7%A9%B9%E5%A4%96%E5%8D%96%E9%A1%B9%E7%9B%AE%E5%89%8D%E7%AB%AFDAY01.assets/image-20240901101520013.png" alt="image-20240901101520013" style="zoom:50%;" />

这篇关于苍穹外卖项目前端DAY01的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1126901

相关文章

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录,测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

springboot集成Deepseek4j的项目实践

《springboot集成Deepseek4j的项目实践》本文主要介绍了springboot集成Deepseek4j的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录Deepseek4j快速开始Maven 依js赖基础配置基础使用示例1. 流式返回示例2. 进阶

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于

SpringBoot项目使用MDC给日志增加唯一标识的实现步骤

《SpringBoot项目使用MDC给日志增加唯一标识的实现步骤》本文介绍了如何在SpringBoot项目中使用MDC(MappedDiagnosticContext)为日志增加唯一标识,以便于日... 目录【Java】SpringBoot项目使用MDC给日志增加唯一标识,方便日志追踪1.日志效果2.实现步

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js