苍穹外卖项目前端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类 - 类的继承
相关推荐
YBN娜8 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=9 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck13 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!34 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。39 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架