JavaWeb学习笔记-前端部分
前端
HTML
标签
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<table border="1px" cellspacing="0" width="200px">
<tr>
<th>序号</th>
<th>品牌logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr>
<td>1</td>
<td>华为logo</td>
<td>华为</td>
<td>华为</td>
</tr>
<tr>
<td>2</td>
<td>阿里logo</td>
<td>阿里</td>
<td>阿里</td>
</tr>
</table>
</body>
</html>
渲染效果：
表单标签
get
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- get方式 -->
<form action="" method="get">
用户名: <input type="text" name="username">
年龄: <input type="text" name="age">
<input type="submit" value="提交">
</form>
</body>
</html>
post
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- post方式 -->
<form action="" method="post">
用户名: <input type="text" name="username">
年龄: <input type="text" name="age">
<input type="submit" value="提交">
</form>
</body>
</html>
表单必须有name属性才能提交
表单项
- input：表单项，type控制
- select：定义下拉列表
- textarea：文本域
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML-表单项标签</title>
</head>
<body>
<!-- value: 表单项提交的值 -->
<form action="" method="post">
姓名: <input type="text" name="name"> <br><br>
密码: <input type="password" name="password"> <br><br>
性别: <input type="radio" name="gender" value="1"> 男
<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
<label><input type="checkbox" name="hobby" value="game"> game </label>
<label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
图像: <input type="file" name="image"> <br><br>
生日: <input type="date" name="birthday"> <br><br>
时间: <input type="time" name="time"> <br><br>
日期时间: <input type="datetime-local" name="datetime"> <br><br>
邮箱: <input type="email" name="email"> <br><br>
年龄: <input type="number" name="age"> <br><br>
学历: <select name="degree">
<option value="">----------- 请选择 -----------</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</select> <br><br>
描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br>
<input type="hidden" name="id" value="1">
<!-- 表单常见按钮 -->
<input type="button" value="按钮">
<input type="reset" value="重置">
<input type="submit" value="提交">
<br>
</form>
</body>
</html>
渲染效果：
CSS
引入方式
-
行内样式：style属性中
-
内嵌样式：style标签中（通常在head标签中）
-
外联样式：写在一个 .css 文件中（需要
link标签在网页中引入）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 内嵌样式 */
h2 {
color: red;
}
</style>
<link rel="stylesheet" href="css/news.css">
</head>
<body>
<h1 style="color: blue;">标签：行内样式</h1>
<h2>标签：内嵌样式</h2>
<h3>标签：外联样式</h3>
</body>
</html>
css
h3 {
color: green;
}
渲染效果：
选择器
- 元素选择器
- 类选择器
- ID选择器
优先级递增
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 内嵌样式 */
h2 {
color: red;
}
/* 元素选择器 */
span {
color: gray;
}
/* 类选择器 */
.cls {
color: blueviolet;
}
/* ID选择器 */
#time {
color: black;
/* 设置字体大小 */
font-size: 20px;
}
</style>
<link rel="stylesheet" href="css/news.css">
</head>
<body>
<h1 style="color: blue;">标签：行内样式</h1>
<h2>标签：内嵌样式</h2>
<h3>标签：外联样式</h3>
<hr>
<span class="cls" id="time">2024.6.25我在学习JavaWeb</span>
<hr>
</body>
</html>
渲染效果：
盒子模型
组成：
- 内容（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
div
- 一行只显示一个
- 宽度默认是父元素宽度，高度默认由内容撑开
- 可以设置宽高（width、height）
span
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽和高（width、height）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>布局</title>
<style>
div {
width: 200px;
height: 200px;
/* 指定width height为盒子高度 */
box-sizing: border-box;
/* 背景色 */
background-color: aquamarine;
/* 内边距，上右下左 */
padding: 20px 20px 20px 20px;
/* 边框，宽度 线条类型 颜色 */
border: 10px solid red;
/* 外边距上右下左 */
margin: 30px 30px 30px 30px;
}
</style>
</head>
<body>
<div>
------------------------------------------------div-------------------------------------------------
</div>
</body>
</html>
JavaScript
引入方式
内部脚本：将js代码定义在html页面中
- js代码必须位于script标签之间
- html中可以在任意地方放置任意数量的script
- 一般脚本位于body元素的底部可以改善显示速度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 内部脚本 -->
<script>
alert("hello!");
</script>
</head>
<body>
</body>
</html>
外部脚本：将js代码定义在外部js文件中，然后引入到html文件中
- 外部js文件中，只包含js代码，不包含script标签
- script标签不能自闭和
自闭和：引入文件失败
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外部脚本 -->
<script src="js/hello.js"></script>
</head>
<body>
</body>
</html>
书写语法
输出语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// 方式一：弹出警告框
window.alert("hello js");
// 方式二：写入html页面中
document.write("123456");
// 方式三：控制台输出
console.log(123);
</script>
</html>
渲染效果：
变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// var 声明变量，全局变量，可重复声明即可覆盖声明
{
var a = 100;
var a = "1000";
}
alert(a);
// let 声明变量：局部变量，不可重复声明即不可覆盖声明
{
let b = 100;
alert(b);
}
// alert(b); // b为局部变量
// const 声明变量：常量，不可改变
const pi = 3.14;
// pi = 3;
alert(pi);
</script>
</html>
数据类型
通过typeof运算符可以获取变量的数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-数据类型</title>
</head>
<body>
</body>
<script>
//原始数据类型
alert(typeof 3); // number
alert(typeof 3.14); // number
alert(typeof "A"); // string
alert(typeof 'Hello'); // string
alert(typeof true); // boolean
alert(typeof false); // boolean
alert(typeof null); // object 对象
var a ;
alert(typeof a); // undefined
</script>
</html>
运算符
函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// 定义函数
// 方式一：
// function add(a, b) {
// return a + b;
// }
//方式二：
var add = function(a, b) {
return a + b;
}
// 函数调用
var result = add (11, 15, 100, 1000);
alert(result);
</script>
</html>
ps：js中函数调用可以传递任意个参数
对象
- Array
- String
- JSON
- BOM
- DOM
Array
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// var arr = new Array(1, 2, 3, 4, 5);
var arr = [1, 2, 3, 4, 5];
console.log(arr[2]);
console.log(arr[3]);
// 特点一：数组长度可变
arr[10] = 50;
console.log(arr[10]);
console.log(arr[9]);
console.log(arr[8]);
// 特点二：类型可变
arr[9] = "hello";
console.log(arr[9]);
console.log(arr);
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
var arr = [1, 2, 3, 4];
arr[10] = "hello";
// console.log(arr.length);
console.log("---------for循环-----------");
for(let i = 0; i < arr.length; ++i) {
console.log(arr[i]);
}
console.log("----------forEach遍历数组中有值的元素----------");
arr.forEach(function(element) {
console.log(element);
})
console.log("----------箭头函数简化书写----------");
// 简化书写：箭头函数：简化函数的定义
arr.forEach(element => {
console.log(element);
});
console.log("----------push添加元素到数组尾部----------");
arr.push(7, 8, 9);
console.log(arr);
console.log("----------splice删除元素----------");
arr.splice(11, 2); // 从下标11开始删除两个元素，之后的元素会前移
console.log(arr);
</script>
</html>
String
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-对象-String</title>
</head>
<body>
</body>
<script>
//创建字符串对象
//var str = new String("Hello String");
var str = " Hello String ";
console.log(str);
//length
console.log(str.length);
//charAt
console.log(str.charAt(4));
//indexOf
console.log(str.indexOf("lo"));
//trim
var s = str.trim();
console.log(s);
//substring(start,end) --- 开始索引, 结束索引 (含头不含尾)
console.log(s.substring(0,5));
</script>
</html>
JSON
自定义对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// 创建对象
var user = {
name: "Tom",
age: 15,
gender: "male",
// study: function() {
// alert("study make me happy!");
// }
// 对象的简化写法
study() {
alert("study make me happy!");
}
}
alert(user.name);
user.study();
</script>
</html>
JSON-介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
//定义json
var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
alert(jsonstr.name);
//json字符串--js对象
var obj = JSON.parse(jsonstr);
alert(obj.name);
//js对象--json字符串
alert(JSON.stringify(obj));
</script>
</html>
BOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// window
// window.alert("alert");
// alert("不带window");
// 方法
// var flag = confirm("???") // 返回值，确认为true，取消为false
// alert(flag);
// 定时器：周期性执行某一函数
// var i = 0;
// setInterval(function() {
// i++;
// console.log(i);
// }, 2000);
// location
alert(location.href)
location.href = "https://www.baidu.com"; // 跳转到目标url
</script>
</html>
DOM
DOM 是一项 W3C (World Wide Web Consortium) 标准。
DOM 定义了访问文档的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
- Core DOM - 所有文档类型的标准模型
- XML DOM - XML 文档的标准模型
- HTML DOM - HTML 文档的标准模型
HTML DOM
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：
- 作为对象的 HTML 元素
- 所有 HTML 元素的属性
- 访问所有 HTML 元素的方法
- 所有 HTML 元素的事件
换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
DOM树
获取元素代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img id="h1" src="img/off.gif"> <br><br>
<div class="cls">传智教育</div> <br>
<div class="cls">黑马程序员</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
</body>
<script>
// 根据ID获取
// var img = document.getElementById("h1");
// alert(img);
// 根据标签获取
// var divs = document.getElementsByTagName("div"); // 数组
// alert(typeof(divs));
// for(let i = 0; i < divs.length; ++i) {
// // console.log(divs[i]);
// alert(divs[i]);
// }
// 根据name属性获取
// var ins = document.getElementsByName("hobby");
// for(let i = 0; i < ins.length; ++i) {
// alert(ins[i]);
// }
// 根据class属性
// var cla = document.getElementsByClassName("cls");
// alert(cla.length);
// for(let i = 0; i < cla.length; ++i) {
// alert(cla[i]);
// }
</script>
</html>
DOM操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img id="h1" src="img/off.gif"> <br><br>
<div class="cls">传智教育</div> <br>
<div class="cls">黑马程序员</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
</body>
<script>
var divs = document.getElementsByClassName("cls");
var div1 = divs[0];
console.log(div1); // 验证是否查找正确
div1.innerHTML = "123456"; // 改变第一个div元素内容：传智教育->123456
</script>
</html>
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img id="h1" src="img/off.gif"> <br><br>
<div class="cls">传智教育</div> <br>
<div class="cls">黑马程序员</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
</body>
<script>
// 案例
var img = document.getElementById("h1"); // 获取元素对象
img.src = "img/on.gif"; // 调用修改方法
var divs = document.getElementsByTagName("div");
// alert(divs.length);
// alert(typeof(divs));
for(let i = 0; i < divs.length; ++i) {
var div = divs[i];
// // 设置元素内容
div.innerHTML += "<font color='red'> very good</font>";
}
var hobs = document.getElementsByName("hobby");
for(let i = 0; i < hobs.length; ++i) {
var hob = hobs[i];
hob.checked = true; // 默认复选框☑
}
</script>
</html>
渲染效果：
事件
事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 演示第一种方式 -->
<input type="button" id="bt1" value="事件绑定1" onclick="on()">
<!-- 演示第二种方式 -->
<input type="button" id="bt2" value="事件绑定2">
</body>
<script>
// 第一种方式
function on() {
alert("按钮1被点击了");
}
// 第二种方式
var bt2 = document.getElementById("bt2");
// onclick属性用于事件绑定
bt2.onclick = function() {
alert("按钮2被点击了");
}
</script>
</html>
一些常见的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-事件-常见事件</title>
</head>
<body onload="load()">
<form action="" style="text-align: center;" onsubmit="subfn()">
<input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
<input id="b1" type="submit" value="提交">
<input id="b1" type="button" value="单击事件" onclick="fn1()">
</form>
<br><br><br>
<table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
<tr>
<th>学号</th>
<th>姓名</th>
<th>分数</th>
<th>评语</th>
</tr>
<tr align="center">
<td>001</td>
<td>张三</td>
<td>90</td>
<td>很优秀</td>
</tr>
<tr align="center">
<td>002</td>
<td>李四</td>
<td>92</td>
<td>优秀</td>
</tr>
</table>
</body>
<script>
//onload : 页面/元素加载完成后触发
function load(){
console.log("页面加载完成...")
}
//onclick: 鼠标点击事件
function fn1(){
console.log("我被点击了...");
}
//onblur: 失去焦点事件
function bfn(){
console.log("失去焦点...");
}
//onfocus: 元素获得焦点
function ffn(){
console.log("获得焦点...");
}
//onkeydown: 某个键盘的键被按下
function kfn(){
console.log("键盘被按下了...");
}
//onmouseover: 鼠标移动到元素之上
function over(){
console.log("鼠标移入了...")
}
//onmouseout: 鼠标移出某元素
function out(){
console.log("鼠标移出了...")
}
//onsubmit: 提交表单事件
function subfn(){
alert("表单被提交了...");
}
</script>
</html>
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-事件-案例</title>
</head>
<body>
<img id="light" src="img/off.gif"> <br>
<!-- 事件绑定 onclick -->
<input type="button" value="点亮" onclick="on()">
<input type="button" value="熄灭" onclick="off()">
<br> <br>
<!-- 聚焦事件onfocus、离焦事件onblur -->
<input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
<br> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="reverse()">
</body>
<script>
function on() {
var img = document.getElementById("light");
img.src = "img/on.gif";
}
function off() {
var img = document.getElementById("light");
img.src = "img/off.gif";
}
function lower() {
// 获取输入框对象
var t = document.getElementById("name");
// 修改value属性
t.value = t.value.toLowerCase();
}
function upper() {
// 获取输入框对象
var t = document.getElementById("name");
// 修改value属性
t.value = t.value.toUpperCase();
}
function checkAll() {
var hobs = document.getElementsByName("hobby");
for(let i = 0; i < hobs.length; ++i) {
var hob = hobs[i];
hob.checked = true;
}
}
function reverse() {
var hobs = document.getElementsByName("hobby");
for(let i = 0; i < hobs.length; ++i) {
var hob = hobs[i];
hob.checked = false;
}
}
</script>
</html>
Vue
常用指令
v-bind和v-model
简化形式:
`链接1
链接2`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href="url">链接1</a>
<!-- 简化形式 -->
<a :href="url">链接2</a>
<!-- 双向数据绑定 -->
<input type="text" v-model="url">
</div>
</body>
<script>
new Vue ({
el: "#app", // vue接管区域
// 数据模型
data: {
url: "https://www.baidu.com"
}
})
</script>
</html>
渲染效果：
此时点击链接跳转百度
此时点击链接跳转黑马
v-on
简写：
<input type="button" value="点我一下" v-on:click="handle()">
<!-- 简化写法 -->
<input type="button" value="点我一下" @click="handle()">
点击事件v-on:click或@click
离焦事件v-on:blur或@blur
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点我一下" v-on:click="handle()">
<!-- 简化写法 -->
<input type="button" value="点我一下" @click="handle()">
</div>
</body>
<script>
new Vue ({
el: "#app",
data: {
},
// 定义一个方法
methods: {
handle: function() {
alert("点了一下");
}
}
})
</script>
</html>
v-if和v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
年龄<input type="text" v-model="age">经判定，为：
<span v-if="age <= 35">年轻人（35及以下）</span>
<span v-else-if="age > 35 && age < 60">中年人（35到60）</span>
<span v-else>老年人（60以上）</span>
<br><br>
年龄<input type="text" v-model="age">经判定，为：
<span v-show="age <= 35">年轻人（35及以下）</span>
<span v-show="age > 35 && age < 60">中年人（35到60）</span>
<span v-show="age >= 60">老年人（60以上）</span>
</div>
</body>
<script>
new Vue ({
el: "#app",
data: {
age: 20
}
})
</script>
</html>
v-if分支控制渲染哪一个，v-show都渲染但是通过css隐藏不符合控制条件的元素
v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="item in address">{{item}}</div>
<br>
<!-- index为索引 -->
<div v-for="(item,index) in address">{{index}} : {{item}}</div>
</div>
</body>
<script>
new Vue ({
el: "#app",
data: {
address: ["北京", "上海", "天津", "重庆"]
}
})
</script>
</html>
案例
通过Vue完成表格的渲染展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">
<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-else-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">及格</span>
<span style="color: red;" v-else>不及格</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>
渲染效果
生命周期
指一个对象从创建到销毁的整个过程
生命周期的八个阶段
mounted：挂载完成，vue初始化完成，HTML页面渲染完成（发送请求到服务端加载数据）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
},
methods: {
},
mounted () {
alert("vue挂载完成！！！");
}
})
</script>
</html>
Ajax
Axios
使用步骤
- 引入Axios的js文件
- 使用Axios发送请求，并获取响应结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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" onclick="get()">
<input type="button" value="删除数据POST" onclick="post()">
</body>
<script>
function get(){
//通过axios发送异步请求-get
// axios({
// method: "get",
// url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
// }).then(result => {
// console.log(result.data);
// })
// 简化
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
console.log(result.data);
})
}
function post(){
//通过axios发送异步请求-post
// axios({
// method: "post",
// url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
// data: "id=1"
// }).then(result => {
// console.log(result.data);
// })
// 简化
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
console.log(result.data);
})
}
</script>
</html>
案例
JSON数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入 -->
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<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="(item,index) in info">
<td>{{index + 1}}</td>
<td>{{item.name}}</td>
<td>
<!-- <img v-bind:src="item.image" width="70px" height="50px"> -->
<!-- 简写 -->
<img :src="item.image" width="70px" height="50px">
</td>
<td>
<span v-if="item.gender == 1">男</span>
<span v-if="item.gender == 2">女</span>
</td>
<td>{{item.job}}</td>
<td>{{item.entrydate}}</td>
<td>{{item.updatetime}}</td>
</tr>
</table>
</div>
</body>
<script>
new Vue ({
el: "#app",
data: {
info: []
},
// 钩子函数
mounted () {
// 发送异步请求
axios.get("http://api.doc.jiyou-tech.com/mock/16727/list").then(result => {
this.info = result.data.data; // 为当前info数据模型赋值
})
}
});
</script>
</html>
前端工程化：vue
创建一个vue项目
命令行：vue create vue-project01
调用图形化界面：vue ui（推荐）
vue项目工程结构
src源码目录
配置端口，修改端口号（注意文件名）
项目启动
npm run serve
vue项目开发流程
vue组件文件以.vue结尾，每个组件由三个部分组成
<template>、<script>、<style>
Vue组件库Element
Element：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等
Element快速入门
1.安装：npm install element-ui@2.15.3
2.在main.js文件下加入如下代码引入element-ui组件库
// 引入element-ui组件库
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 加入
Vue.use(ElementUI);
3.挑选组件
将组件粘贴到ElementVue.vue文件（这个文件需要创建）
<template>
<div>
<!-- button -->
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
</template>
<script>
export default {
}
</script>
<style></style>
4.引入ElementVue.vue文件，代码自动生成
渲染效果：
常见组件
Table表格
Ta用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作
<template>
<el-table
:data="tableData"
stripe
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>
Pagination分页条
设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，sizes和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示总条目数，sizes用于设置每页显示的页码数量。
设置background属性可以为分页按钮添加背景色。
page-sizes接受一个整型数组，数组元素为展示的选择每页显示个数的选项，[100, 200, 300, 400]表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。
<template>
<div>
<!-- pagination -->
<el-pagination
background
layout="total, prev, pager, next, jumper, sizes"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:total="1000"
>
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleCurrentChange: function(val) {
alert("页码发生变化！！！" + val);
},
handleSizeChange: function(val) {
alert("每页记录数变化！！！" + val);
}
}
};
</script>
<style></style>
Dialog对话框
Dialog 弹出一个对话框，适合需要定制性更大的场景。
需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了before-close的用法。
<template>
<!-- Dialog对话框 -->
<!-- 弹出对话框的按钮 -->
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
<el-table :data="gridData">
<el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
</el-table>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
// 对话框
gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
dialogTableVisible: false,
};
},
};
</script>
<style></style>
Form表单
由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
<template>
<div>
<!-- Dialog对话框 + Form表单 -->
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-dialog title="Form表单" :visible.sync="dialogFormVisible">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
// 表单
form: {
name: '',
region: '',
date1: '',
date2: '',
},
dialogFormVisible: false,
};
},
methods: {
onSubmit() {
// 表单信息转化为JSON alert出来
alert(JSON.stringify(this.form));
}
}
};
</script>
<style></style>
Container布局容器
用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。
<template>
<div>
<el-container style="height: 800px; border: 3px solid #eee">
<el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">Header</el-header>
<el-container >
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
aside
</el-aside>
<el-main>
Main
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(20).fill(item)
}
}
}
</script>
<style></style>
案例
axios安装指令：npm install axios
<template>
<div>
<el-container style="height: 800px; border: 3px solid #eee">
<!-- header -->
<el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">Tlias智能学习辅助系统</el-header>
<el-container >
<!-- 侧边框 -->
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu>
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>总览</template>
<el-menu-item-group>
<el-menu-item index="1-1">部门管理</el-menu-item>
<el-menu-item index="1-2">员工管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<!-- 行内表单 -->
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="姓名">
<el-input v-model="formInline.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="formInline.gender" placeholder="性别">
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</el-select>
</el-form-item>
<!-- 时间选择器 -->
<el-date-picker
v-model="formInline.entrydate"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
</el-form-item>
</el-form>
<!-- Table表格 -->
<el-table :data="tableData" border="">
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="image" label="图像" width="180">
<!-- 插槽获得一行，在获得image属性 -->
<template slot-scope="scope">
<img :src="scope.row.image" alt="" width="80px" height="70px">
</template>
</el-table-column>
<el-table-column prop="gender" label="性别" width="140">
<!-- 插槽获得一行，在获得gender属性 -->
<template slot-scope="scope">
{{ scope.row.gender == "1" ? "男" : "女" }}
</template>
</el-table-column>
<el-table-column prop="job" label="职位" width="140"></el-table-column>
<el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
<el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
<el-table-column label="操作" >
<el-button type="primary" size="mini">编辑</el-button>
<el-button type="danger" size="mini">删除</el-button>
</el-table-column>
</el-table>
<!-- 分页条 -->
<el-pagination
background
layout="total, prev, pager, next, jumper, sizes"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:total="1000"
>
</el-pagination>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
// 引入axios
import axios from 'axios';
export default {
data() {
return {
// Table表格
tableData: [],
// 分页条
handleCurrentChange: function(val) {
alert("页码发生变化！！！" + val);
},
handleSizeChange: function(val) {
alert("每页记录数变化！！！" + val) ;
},
// 行内表单
formInline: {
name: '',
gender: '',
entrydate: [],
}
}
},
methods: {
onSubmit() {
alert("提交成功" + JSON.stringify(this.formInline));
},
},
mounted () {
// 发送异步请求，获取数据
axios.get("http://api.doc.jiyou-tech.com/mock/16727/list").then((result) => {
this.tableData = result.data.data;
})
}
}
</script>
<style></style>
vue路由
跳转路由
展示组件
NGINX打包部署
打包指令：npm run build
打包后出现一个dist文件夹：
部署：直接将dist文件夹下的文件移动到Nginx目录下的html文件夹内
运行.exe文件，程序默认部署在80端口
成功部署
查看是否有程序占用80端口：
netstat -ano | findStr 80
Nginx修改端口
