甲柒

JavaWeb-Vue

JavaScript-Vue

什么是Vue

Vue

Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。
官网：https://cn.vuejs.org/

框架

是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

MVVM示意图

Vue快速入门

新建HTML页面，引入Vue.js文件

在JS代码区域，创建Vue核心对象，定义数据模型

编写视图
```
    
    {{ message }}
```

插值表达式

形式：{{表达式}}
内容可以是：
- 变量
- 三元运算符
- 函数调用
- 算术运算符

Vue常用指令

常用指令

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

常用指令

指令	作用
v-bind	为HTML标签绑定属性值，如设置href、css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

v-bind
```
甲柒
甲柒
```

v-model

注意：通过v-bind或者v-model绑定的变量，必须在数据模型中声明

v-on

v-if

年龄{{age}}，经判定为：
年轻人
中年人
老年人

v-show
```
年龄{{age}}，经判定：
年轻人
```

v-for



    {{addr}}



    {{index + 1}} : {{addr}}

案例

通过Vue完成表格数据的渲染展示

data: {
    users: [{
        name: "Tom",
        age: 20,
        gender: 1,
        score: 78
    },{
        name: "Rose",
        age: 18,
        gender: 2,
        score: 86
    },{
        name: "Jerry",
        age: 26,
        gender: 1,
        score: 90
    },{
        name: "Tony",
        age: 30,
        gender: 1,
        score: 52
    }]
}

性别：
- gender == 1：男
- gender == 2：女
等级：
- score >= 85：优秀
- score >= 60：及格
- 否则：不及格

案例代码：





    
    
    vue-指令-案例
    



    
        
            
                编号
                姓名
                年龄
                性别
                成绩
                等级
            
            
                {{index+1}}
                {{user.name}}
                {{user.age}}
                
                    男
                    女
                
                {{user.score}}
                
                    优秀
                    及格
                    不及格

编号	姓名	年龄	性别	成绩	等级
{{index+1}}	{{user.name}}	{{user.age}}	男女	{{user.score}}	优秀及格不及格

运行结果

Vue生命周期

生命周期

生命周期：指一个对象从创建到销毁的整个过程

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）

生命周期图示

小结

Vue是什么？

Vue是一个基于MVVM模型的前端js框架
Vue常用指令？

v-bind、v-model、v-on、v-if、v-show、v-for
Vue生命周期？

mounted

JavaScript-Ajax

Ajax

概念：

Asynchronous JavaScript And XML，异步的JavaScript和XML

作用：

数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页，如：搜索联想、用户名是否可用的校验等等

同步与异步

原生Ajax（不推荐使用）

准备数据地址：
创建XMLHttpRequest对象：用于和服务器交换数据
向服务器发送请求
获取服务器响应数据





    
    
    Ajax-原生方式

运行结果

Axios（推荐）

介绍：

Axios对原生的Ajax进行了封装，简化书写，快速开发
官网：

https://www.axios-http.cn/

Axios入门

引入Axios的js文件

使用Axios发送请求，并获取响应结果，示例代码：





    
    
    Ajax-Axios

Axios请求方式别名

axios.get(url [, config])
axios.delete(url [, config])
axios.post(url [, data[, config]])
axios.put(url [, data[, config]])

发送GET请求

axios.get("url").then((result) => {
	console.log(result.data);
});

发送POST请求

axios.post("url","id=1").then((result) => {//url假设的是删除信息映射的url，传入id=1，即删除id=1的信息
	console.log(result.data);//控制台输出结果
});

案例

基于Vue及Axios完成数据的动态加载展示

数据的准备url：
在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面(性别：1代表男，2代表女)。





    
    
    Ajax-Axios-案例
    
    



    
        
            
                编号
                姓名
                头像
                性别
                职位
                入职日期
                最后操作时间
            
            
                {{index+1}}
                {{emp.name}}
                
                    
                    
                
                
                    男
                    女
                
                {{emp.job}}
                {{emp.entryDate}}
                {{emp.updateTime}}

编号	姓名	头像	性别	职位	入职日期	最后操作时间
{{index+1}}	{{emp.name}}		男女	{{emp.job}}	{{emp.entryDate}}	{{emp.updateTime}}

运行结果

前后端分离开发

介绍

前后端混合开发

前后端分离开发

开发流程

YAPI

介绍：YApi是高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务
地址：https://yapi.pro/
添加项目

添加分类

添加接口

注：这里插一句，上面的Ajax与Axios请求的url可以在这里生成。

前端工程化

前端工程化概念：

是指在企业级的项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化

模块化：JS、CSS
组件化：UI结构、样式、行为
规范化：目录结构、编码、接口
自动化：构建、部署、测试

环境准备

介绍：Vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue项目模板
Vue-cli：提供了如下功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
依赖环境：Node.js
Node官网：https://nodejs.org/en/download

注意：尽量别安装在C盘，我就是傻傻的安C盘，最后C盘红了，后来重做了系统，这次学习又又又装了C盘，呜呜呜呜，下次出问题再说吧

在cmd.exe中通过node -v查看node.js是否安装好
配置npm全局变量，在管理员的cmd.exe中执行下列代码，一件傻瓜式安装的不需要配置
```
npm config set prefix "Node.js的安装目录"
```
切换npm的淘宝镜像，在管理员的cmd.exe中执行下列代码
```
npm config set registry https://registry.npm.taobao.org
```
安装Vue-cli
```
npm install -g @vue/cli
```
确认Vue-cli安装成功
```
vue --version
```

Vue项目-创建

命令行创建Vue项目：
```
vue create vue-project01
```
图像化界面创建Vue项目：
```
vue ui
```

-

等待几分钟

Vue项目-目录结构

基于Vue脚手架创建出来的工程，有标准的目录结构，如下：

Vue项目-启动

使用图形化界面
使用命令行
```
npm run serve
```

Vue项目-配置端口

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7000,//配置端口号
  }
})