苍穹外卖项目前端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类 - 类的继承
相关推荐
彭世瑜7 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4048 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish8 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five9 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序9 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫54110 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
前端每日三省11 分钟前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript
小刺猬_98512 分钟前
(超详细)数组方法 ——— splice( )
前端·javascript·typescript
渊兮兮13 分钟前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
鑫宝Code13 分钟前
【TS】TypeScript中的接口(Interface):对象类型的强大工具
前端·javascript·typescript