JavaScript-Vue
什么是Vue
Vue
- Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
- 基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。
- 官网：https://cn.vuejs.org/
框架
- 是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。
MVVM示意图
Vue快速入门
-
新建HTML页面，引入Vue.js文件
<script src="js/vue.js"></script> -
在JS代码区域，创建Vue核心对象，定义数据模型
<script> new Vue({ el: "#app", data: { message: "Hello Vue!" } }) </script> -
编写视图
<div id="app"> <input type="text" v-model="message"> {{ message }} </div>
插值表达式
- 形式：{{表达式}}
- 内容可以是：
- 变量
- 三元运算符
- 函数调用
- 算术运算符
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
<a v-bind:href="url">甲柒</a> <a :href="url">甲柒</a> -
v-model
<input type="text" v-model="url"><script> new Vue({ el: "#app", data: { url: "https://blog.csdn.net/qq_59621600?type=blog" } }) </script>注意：通过v-bind或者v-model绑定的变量，必须在数据模型中声明
-
v-on
<input type="button" value="按钮" v-on:click="handle()"> <input type="button" value="按钮" @click="handle()"><script> new vue({ el: "#app", data: { //... }, methods: { handle:function(){ alert('我被点击了'); } }, }) </script> -
v-if
年龄{{age}}，经判定为： <span v-if="age <= 35">年轻人</span> <span v-else-if="age >35 && age < 60">中年人</span> <span v-else>老年人</span> -
v-show
年龄{{age}}，经判定： <span v-show="age <=35">年轻人</span> -
v-for
<!-- {{表达式}}：插值表达式 addr：要遍历的元素，是随意起的名字 in：是关键字 addrs：要遍历的数组--> <div v-for="addr in addrs"> {{addr}} </div> <div v-for="(addr,index) in addrs"> {{index + 1}} : {{addr}} </div><script> new vue({ el: "#app", data: { addrs:['北京','上海','广州','深圳','成都','杭州'] } }) </script>
案例
-
通过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：及格
- 否则：不及格
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue-指令-案例</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app" align="center">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr align="center" v-for="(user,index) in users">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>
<span v-if="user.gender==1">男</span>
<span v-if="user.gender==2">女</span>
</td>
<td>{{user.score}}</td>
<td>
<span v-if="user.score >= 85">优秀</span>
<span v-else-if="user.score >= 60 && user.score < 85">及格</span>
<span v-else="user.score < 60" style="color: chocolate;">不及格</span>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: "#app",
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
}]
},
methods: {
}
})
</script>
</html>
运行结果
Vue生命周期
生命周期
-
生命周期：指一个对象从创建到销毁的整个过程
-
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
状态 阶段周期 beforeCreate 创建前 created 创建后 beforeMount 挂载前 mounted 挂载完成 beforeUpdate 更新前 updated 更新后 beforeDestroy 销毁前 destroyed 销毁后 <script> new Vue({ el: "#app", data: { }, mounted() { console.log("Vue挂载完毕，发送请求获取数据") }， methods: { }, }) </script> -
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对象：用于和服务器交换数据
- 向服务器发送请求
- 获取服务器响应数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax-原生方式</title>
</head>
<body>
<input type="button" value="获取数据" οnclick="getData()">
<div id="div1"></div>
</body>
<script>
function getData() {
// 1.创建XMLHttpRequest
var xmlHttpRequest = new XMLHttpRequest();
// 2.发送异步请求
xmlHttpRequest.open("GET", "http://localhost:5173/01-test-Ajax.json");
xmlHttpRequest.send();//发送请求
// 3.获取服务响应数据
xmlHttpRequest.onreadystatechange = function () {
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
document.getElementById("div1").innerHTML = xmlHttpRequest.responseText;
}
};
}
</script>
</html>
运行结果
Axios（推荐）
-
介绍：
Axios对原生的Ajax进行了封装，简化书写，快速开发
-
官网：
https://www.axios-http.cn/
Axios入门
-
引入Axios的js文件
<script src="js/axios-0.18.0.js"></script> -
使用Axios发送请求，并获取响应结果，示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ajax-Axios</title> <script src="js/axios-0.18.0.js"></script> </head> <body> <input type="button" value="获取数据GET" οnclick="get()"> <br><br> <input type="button" value="获取数据POST" οnclick="post()"> </body> <script> function get() { // 通过axios发送异步请求-get axios({ method: "get", url: "http://localhost:5173/01-test-Ajax.json"//TM的这个json文件还是我自己写的，然后放在01-VUE-test里，运行起来直接访问这个文件，就没在搞域名了.... }).then(result => { console.log(result.data); }) } function post() { // 通过axios发送异步请求-post axios({ method: "post", url: "url", //这里的url是发送post请求的url，由于没有测试用url，暂时就这样吧 data: "id=1" }).then(result => { console.log(result.data); }) } </script> </html>
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代表女)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax-Axios-案例</title>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app" align="center">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>头像</th>
<th>性别</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
</tr>
<tr align="center" v-for="(emp, index) in empS">
<td>{{index+1}}</td>
<td>{{emp.name}}</td>
<td>
<!-- img标签渲染图片 v-bind:src=""绑定路径 -->
<img v-bind:src="emp.image" width="80px">
</td>
<td>
<span v-if="emp.gender == 1">男</span>
<span v-if="emp.gender == 2">女</span>
</td>
<td>{{emp.job}}</td>
<td>{{emp.entryDate}}</td>
<td>{{emp.updateTime}}</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
empS: []
},
mounted() {
// 发送异步请求，加载数据
axios.get("http://localhost:5173/02-Axios-%E6%A1%88%E4%BE%8B.json").then(result => {
this.empS = result.data.data;
})
}
})
</script>
</html>
运行结果
前后端分离开发
介绍
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,//配置端口号
}
})
- 修改端口号后，在终端按Ctrl+c终止运行，然后重新启动项目，端口号修改完成
Vue项目简介
Vue项目开发流程
-
-
Vue的组件文件以.vue结尾，每个组件由三个部分组成：<template>、<script>、<style>
标签 Vue中根组件的组成部分 <template> 模板部分，由它生成HTML代码 <script> 控制模板的数据来源和行为 <style> css样式部分 -
-
示例代码
<template>
<!-- 模板部分，由它生成HTML代码 -->
<div>
<!-- 插值表达式展示message -->
<h1>{{ message }}</h1>
</div>
</template>
<script>
// 控制模板的数据来源和行为
// export 导出
export default {
// vue中的数据模型
data: function () {
return {
message: "Hello Vue",
};
},
// 方法
methods: {},
};
</script>
<style>
/* 定义css的样式 */
</style>
Vue组件库Element
什么是Element
- Element：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库。
- 组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等。
- 官网：https://element.eleme.cn/#/zh-CN
快速入门
-
安装ElementUI组件库（在当前工程的目录下），在命令行执行指令：
npm install element-ui@2.15.3 -
引入ElementUI组件库
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); -
访问官网，复制组件代码，调整
-
常见组件
-
Table表格：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
-
-
Pagination分页：当数据量过多时，使用分页分解数据。
-
-
Dialog对话框：在保留当前页面状态的情况下，告知用户并承载相关操作。
-
-
Form表单：由输入框、选择器、单选框、多选框等控件组成，用于收集、校验、提交数据。
-
案例
根据页面原型完成员工管理页面开发，并通过Axios完成数据异步加载。
步骤：
- 创建页面，完成页面的整体布局规划
- 布局中各个部分的组件实现
- 列表数据的异步加载，并渲染展示
Vue项目中使用Axios：
- 在项目目录下安装axios：npm install axios;
- 需要使用axios时，导入axios：import axios from ‘axios’;
Vue路由
Vue Router
- 介绍：Vue Router时Vue官方路由。
- 组成：
- VueRouter：路由器类，根据路由请求在路由器视图中动态渲染选中的组件
- <router-link>：请求链接组件，浏览器会解析成<a>
- <router-view>：动态视图组件，用来渲染展示与路由路径对应的组件
-
安装（创建Vue项目时已选择）
npm install vue-router@3.5.1 -
定义路由
打包部署
- 打包
部署
Nginx
- 介绍：Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大互联网公司都有非常广泛的使用
- 官网：https://nginx.org/
- 部署：将打包好的dist目录下的文件，复制到nginx安装目录的html目录下
- 启动：双击nginx.exe文件即可，Nginx服务器默认占用80端口号
注意事项：
-
Nginx默认占用80端口号，如果80端口号被占用，可以在nginx.conf中修改端口号。
//查看80端口占用的进程 netstat -ano | findStr 80
图片转存中…(img-q3eWMlPx-1696767905331)]
Vue Router
- 介绍：Vue Router时Vue官方路由。
- 组成：
- VueRouter：路由器类，根据路由请求在路由器视图中动态渲染选中的组件
- <router-link>：请求链接组件，浏览器会解析成<a>
- <router-view>：动态视图组件，用来渲染展示与路由路径对应的组件
[外链图片转存中…(img-nGnOfrAE-1696767905332)]
-
安装（创建Vue项目时已选择）
npm install vue-router@3.5.1 -
定义路由
打包部署
- 打包
部署
Nginx
- 介绍：Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大互联网公司都有非常广泛的使用
- 官网：https://nginx.org/
- 部署：将打包好的dist目录下的文件，复制到nginx安装目录的html目录下
- 启动：双击nginx.exe文件即可，Nginx服务器默认占用80端口号
注意事项：
-
Nginx默认占用80端口号，如果80端口号被占用，可以在nginx.conf中修改端口号。
//查看80端口占用的进程 netstat -ano | findStr 80
