前端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类 - 类的继承