Vue框架学习记录

2024-05-01 13:05
12人已看

概览

前置知识

在这里插入图片描述

准备工作

安装环境准备

#安装node.js
#安装npm
#安装vue cli

在这里插入图片描述

基于脚手架创建前端工程

在这里插入图片描述

方式一

#创建一个保存vue项目的目录，如vue_project
#在vue_project下进入cmd
vue create vue-demo-1

在这里插入图片描述

方式二

#在cmd下输入
vue ui

在这里插入图片描述

选择vue2

在这里插入图片描述

#成功之后的界面

在这里插入图片描述

#打开浏览器，选择界面的左上角vue-project
#跟着上面做的，应该是vue-demo-1
#点击红色选中的Vue项目管理器

在这里插入图片描述

#第一个红色框选中的是存放vue项目的总合集
#选择你自己创建的项目合集即可
#点击第二个红色框“在此创建项目”

在这里插入图片描述

#项目文件夹，如vue-demo-2
#包管理器 npm
#GIt 勾选上
#点击下一步

在这里插入图片描述
#选中Vue2
#创建项目

#可查看项目依赖和配置

在这里插入图片描述

项目结构解析

在这里插入图片描述

启动前端项目

#在当前项目路径下npm run serve
#命令行和VsCode的终端都行

在这里插入图片描述

#npm run serve的"serve"取决于package.json的scripts下的配置
#如下面红色框所示

在这里插入图片描述

更改前端端口

#在vue.config.js里添加
devServer: {
	port: 7070
}
#更改后重启，因为.js文件需要重新加载

在这里插入图片描述

vue基本使用方式

在这里插入图片描述

vue组件

在这里插入图片描述

文本插值

data属性
{{}}

在这里插入图片描述

属性绑定

data属性
v-bind:xxx or :xxx

在这里插入图片描述

事件绑定

methods方法
v-on:xxx or @xxx

在这里插入图片描述

双向绑定

data和methonds一同使用，一般用在表单，如登录界面
v-model(用在data)
其他的调用methods

在这里插入图片描述

条件渲染

一般在标签里，如div
v-if v-else-if v-else

在这里插入图片描述

axios

#axios一般用于异步调用

在这里插入图片描述

安装

#在终端里安装axios
npm install axios
#安装完成后可以区到package.json里的dependencies里查看axios项

在这里插入图片描述

api列表

在这里插入图片描述

配置代理

#不配置代理的话，访问后端路径会出现跨域问题
#在vue.config.js中配置代理
proxy里，'/api/'替换成target部分，'^/api/'代表之前的都是空

在这里插入图片描述

Post、Get

#Post
#then(res => xxx)表示调用成功后执行...
#.catch(error => xxx)表示出错后执行...

#Get
#一般会携带jwt的token

在这里插入图片描述

统一使用方式

在这里插入图片描述

小结

在这里插入图片描述

Vue-Router

vue-router介绍

在这里插入图片描述

创建vue-router-demo项目

#跟前面创建的差不多，这里做贴图演示

在这里插入图片描述

路由介绍

在这里插入图片描述

路由表编写位置

在这里插入图片描述

路由表页面入口位置

在这里插入图片描述

路由跳转方式

#标签式：红色
#编程式：蓝色

在这里插入图片描述

404 not found时如何处理

#vue对404没有处理，需要自己手动处理
#在views下编写一个404View.vue
  <div class="about">
    <h1>请求路径不存在</h1>
  </div>
</template>
#然后在路由表编写位置加上即可

在这里插入图片描述

路由介绍和配置小结

在这里插入图片描述

嵌套路由（子路由）

介绍和实现步骤

在这里插入图片描述

第一步

安装element组件

element官网链接: link

在这里插入图片描述

#复制安装代码到终端运行
npm i element-ui -S

在这里插入图片描述

#找到"快速上手"
#需要在main.js中导入右边标红的三项
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

在这里插入图片描述

创建container布局

#在views下创建container布局
#再创建ContainerView.vue

在这里插入图片描述

#在element官网找"Container布局容器
#复制右边标红的代码，放到ContainerView.vue的<template>里边

在这里插入图片描述

#再把下边<style>里的css代码，放到ContainerView.vue的<style>里边

在这里插入图片描述

#npm run serve后结果如图所示

在这里插入图片描述

第二步

创建子视图

#在views/container下创建子视图P1View.vue，P2View.vue，P3View.vue
#将P1View.vue，P2View.vue，P3View.vue的<template>里改成
<template>
  <div>
    这是P1/2/3View
  </div>
</template>

在这里插入图片描述

第三步

嵌套路由配置

#在ContainerView.vue下配个子路由children，情况如图示

在这里插入图片描述

第四步

在布局容器视图中添加<router-view>，实现子视图组件展示

#在ContainerView.vue的<elmain>里添加<router-view>

在这里插入图片描述

第五步

在布局容器视图中添加<router-link>，实现路由请求

#添加
<router-link to="/c/p1">P1</router-link><br>
<router-link to="/c/p2">P2</router-link><br>
<router-link to="/c/p3">P3</router-link><br>

在这里插入图片描述

嵌套路由-小结

#在布局容器视图中的路由配置里价格重定向redirect
#保证以/c进入也有数据
redirect: '/c/p1'

在这里插入图片描述

Vuex

介绍

在这里插入图片描述

创建vuex的脚手架工程

#跟前面的操作差不多，这里的选择换成Vuex

在这里插入图片描述

使用方式

state共享数据

#在vuex框架的state里填写变量name
#在App.vue里用{{$store.state.name}}调用，与文本插值{{}}类似

在这里插入图片描述

mutation数据同步函数

#先在store/index.js里添加mutation函数setName方法

在这里插入图片描述

#通常是用v-on:/@绑定其他方法来修改数据
#修改时this.$store.commit(para1,para2)是固定模板
#para1是mutation里定义的函数名,para2是要放入的形参

在这里插入图片描述

actions 异步

#通过actions调用到mutations,在actions中可以进行异步操作
#先安装axios，终端输入
npm install axios

在这里插入图片描述

#先调用post
#再调用mutation的setName函数
#context上下文

在这里插入图片描述

#调用后端url需要代理
#顺便设置端口

在这里插入图片描述

#调用模板this.$store.dispatch(mutations的函数)
this.$store.dispatch('setNameByAxios')

在这里插入图片描述

vuex小结

在这里插入图片描述

TypeScript

介绍

在这里插入图片描述

#全局安装typescript
npm install -g typescript
#查看ts版本
tsc -v

在这里插入图片描述

hello.ts入门程序

#ts编译时就会检查，hello(123)->string就会报错

//hello.ts
//通过ts代码，指定函数的参数类型为string
function hello(msg:string){
    console.log(msg)
}

//传入的参数类型为number
//hello(123)
hello('123')

在这里插入图片描述

TS与JS的比较

在这里插入图片描述

TS的理解

在这里插入图片描述

创建vue-ts-demo项目

#老样子，修改一些，其他与前面无差

在这里插入图片描述

#创建完成后，vscode打开项目即可

常用类型

在这里插入图片描述

类型标注位置

在这里插入图片描述

常用类型代码演示

字符串、数字、布尔

在这里插入图片描述

字面量

在这里插入图片描述

interface类型

在这里插入图片描述

class类，与java类似

在这里插入图片描述

实现类implements

在这里插入图片描述

继承extends

在这里插入图片描述

小结

在这里插入图片描述