苍穹外卖项目前端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

相关文章

springboot项目如何开启https服务

《springboot项目如何开启https服务》:本文主要介绍springboot项目如何开启https服务方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录springboot项目开启https服务1. 生成SSL证书密钥库使用keytool生成自签名证书将

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

将Java项目提交到云服务器的流程步骤

《将Java项目提交到云服务器的流程步骤》所谓将项目提交到云服务器即将你的项目打成一个jar包然后提交到云服务器即可,因此我们需要准备服务器环境为:Linux+JDK+MariDB(MySQL)+Gi... 目录1. 安装 jdk1.1 查看 jdk 版本1.2 下载 jdk2. 安装 mariadb(my

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll