黑马javaweb—前端学习笔记

目录

一、Vue

Vue概述

Vue常用指令

Vue的生命周期

二、Ajax

Ajax介绍

Axios

三、前端开发工程化

前后端分离开发

环境准备

node.js安装

Vue项目

四、Element介绍

介绍

安装Element组件库

五、Element组件

Table表格

常见组件-分页

对话框

Form表单

六.Element案例

页面基本布局

页面组件实现

axios异步加载数据

vue路由

打包

      

---

一、Vue

Vue概述

1. Vue是一套前端框架，免除JavaScript中的DOM操作，简化书写
2. 基于MVVM思想，实现数据的双向绑定，将变成的关注点放在数据上
3. Vue快速入门
   1. 新建HTML页面，引入Vue.js文件
   2. 在JS代码区域，创建Vue核心对象，定义数据模型
   3. 编写视图
4. 差值表达式
   1. 形式{{表达式}}
   2. 内容可以是：
      1. 变量
      2. 三元运算符
      3. 函数调用
      4. 算术运算

差值表达式

Vue常用指令

1. 指令：HTML标签上带有v-前缀的特殊属性，不同属性具有不同的含义，例如：v-if，v-for...

1. v-bond：为HTML绑定属性值，如设置href.css样式等
2. v-model：在表单元素上创建双向数据绑定
3. 若v-bond和v-model绑定了某个变量，一定要在数据模型中声明。
4. v-on：为HTML标签绑定事件
5. v-for：列表渲染，便利容器的元素或对象的属性

Vue的生命周期

1. 生命周期：指一个对象从创建到销毁的整个过程。
2. mounted：挂在完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）

二、Ajax

Ajax介绍

1. 概念：异步的JavaScript和XML
2. 作用：
   1. 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据
   2. 异步交互：可以再不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等。
3. 同步与异步

Axios

1. 介绍：Axios对原生的的Ajax进行了封装，简化书写，快速开发。
2. 步骤：
   1. 引入Axios的js文件
   2. 使用Axios发送请求，并获取响应结果

三、前端开发工程化

前后端分离开发

1. 需求分析——接口定义（api接口文档）——前后端并行开发——测试——前后端联调测试
2. YApi：YApi是高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口服务管理。

环境准备

1. Vue-cil:Vue官方提供的一个脚手架，用于快速生成一个Vue的模板生成。
2. Vue项目-创建

插件的安装

node.js安装

windows下 NodeJS 免安装版 安装步骤_node16 免安装版-优快云博客

1. 环境配置

1. cmd输入命令

1. 配置npm的全局安装路径

设置成功

1. 切换npn的淘宝镜像（方便后期加速资源下载）

npm config set registry https://registry.npm.taobao.org

1. 安装vue-cli
   1. 出现报错，查找原因

npm ERR!request to https://registry.npm.taobao.org/@vue%2fcli failed, reason:certificate has expired_下载element-plus报reason: certificate has expired-优快云博客

1. 1. 重新配置镜像

1. 1. 再次安装脚手架，成功

Vue项目

1. 命令行vue：vue create vue-project01

1. 图形化界面：vue ui
   1. 新建文件夹
   2. 输入cmd
   3. vue ui

1. 利用图形化界面新建项目
   1. 创建流程

1. 1. 创建成功

1. vscode打开vue项目
   1. 打开文件

1. 1. 目录结构

node_moudles:整个项目的依赖包

public:存放项目的静态文件

src:源代码

1. 项目的启动
   1. 没有找到npm脚本

1. 1. 解决：右击时间线，选择勾选npm脚本

1. 1. 点击serve运行

1. 修改端口号

1. vue项目的热部署

1. Vue的组件文件以.vue结尾，每个组件由三个部分组成：<template>、<script>、<style>

四、Element介绍

介绍

1. Element 是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面组件库
2. 组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等。

安装Element组件库

1. 打开终端

1. 命令行执行：npm install element-ui@2.15.3

1. 1. 安装成功

1. 引用组件

1. 新建文件夹和ElementView.vue文件

1. 访问官网，复制组件代码

1. 在app.vue中通过标签引用

1. 输出结果

五、Element组件

Table表格

1. 用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作
2. 官方复制结构代码，编写App.vue

1. 输出结果

常见组件-分页

1. Pagination分页：当数据量过多，使用分页分解数据
2. 添加有背景颜色的分页键

1. 页码变化

1. 结果

对话框

1. 在保留当前页面的状态的情况下，告知用户并承载相关操作
2. 代码实现

1. 输出结果

Form表单

1. 表单

1. 结果返回是一个对象

1. 将js对象转成json格式的字符串

上图出现错误，JSON.stringify不应该带“”，下图是修改后的结果

六.Element案例

页面基本布局

1. 引入新的EmpView时报错，问题是虽然引入了EmpView，但是components中ElementView未注释掉

1. 替换标题和字体、背景颜色

设置背景颜色

1. 设置菜单栏

1. 出现一直报红的问题

1. 基本网页布局完成

页面组件实现

axios异步加载数据

1. 安装Axios：在项目目录下安装axios：npm install axios；

1. 导入axios

1. 其中，这个链接是从视频弹幕中拿到的。

1. 性别显示存在问题

1. 使用插槽

1. 使用后遇到问题，页面中的数据会消失，无法取得数据。

1. 标签位置不对

1. 正确显示男女性别

1. 展示图片

vue路由

1. Vue Router
2. 组成：
   1. VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
   2. <router-link>:请求链接组件，浏览器会解析成<a>
   3. <router-view>:动态视图组件，用来渲染展示与路由路径相对应的组件。
3. 修改过程

1. 可以实现跳转

1. 访问的路径默认重定向到dept页面

打包

1. 部署-nginx：将打包好的dist目录下的文件，复制到nginx安装目录的html目录下