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