html
超文本编辑语言：通过浏览器可以直接解析的语言。
第一个例子
1：新建一个记事本，将文件后缀改成htm或者html。
2：通过记事本打开该文件：编写html命令；通过浏览器打开该文件：通过浏览器解析命令，在浏览器上观察结果。
3：直接写字符串会被直接显示在网页上，使用<>的格式称之为html命令(标签)
安装开发工具
工具随意，什么都可以，不做统一要求
html基本结构
<html>
<head>
<meta charset="utf-8" /> 单标签：定义网页编码格式
<title>网页标题</title> 双标签：网页标题标记
</head> 定义网页的头部信息
<body>
</body> 定义网页的身体信息：网页上所有要显示的内容都写在该标签中
</html> html文档根标签：定义一个html文档
html命令
html命令称之为标签,每一个标签就代表了网页上的一个内容
标签的格式：
双标签：<单词></单词>
单标签：<单词/>,该斜杠可写可不写
属性：针对每一个标签进行基本样式设置。
<开始标签 属性名="属性值" 属性名="属性值" 属性名="属性值">
标签+属性==完成html命令
常用标签
<font size="" color="">文字内容</font> 文字标签
size:字号
color：颜色
<br> 换行
<img src="" width="" height=""> 图片标签
src：路径
width：宽度
height：高度
<center>内容</center> 居中
<marquee scrollamount="50" behavior="scroll" direction="left" width="500">
内容
</marquee> 滚动
scrollamount:滚动速度
behavior：滚动方式
alternate：来回往返滚动
scroll：默认方式：一边进已边出
slide：滚动一次，碰边停止
direction：滚动方向
width：滚动轨迹的宽度
height:滚动轨迹的高度
<hr width="200" size="10" color="#1B6D85"> 横线
width：宽度，默认居中
size：粗细
color：颜色
<p>内容</p> 段落
<pre>内容</pre> 预格式处理：标签中间键盘的空格和回车产生作用
标题标记
<h1>呵呵</h1>
<h2>呵呵</h2>
<h3>呵呵</h3>
<h4>呵呵</h4>
<h5>呵呵</h5>
<h6>呵呵</h6>
<ul type=“circle”>
<li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li> 列表项
</ul> 无序列表
type：前缀类型
circle：空心圆
disc：实心圆，默认
square:实心方块
<ol type=“i” start="5">
<li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li> 列表项
</ol> 有序列表
type：前缀类型
1：默认，阿拉伯数字
a：英文字母
i：古罗马数字
start：列表前缀以5开始
特殊符号： 空格
<b>文字</b> 加粗
<u>文字</u> 下划线
<i>文字</i> 下划线
表单
表单元素：表单当中任意一个标签(元素)
<!--隐藏域，隐藏文本框,专门给修改使用，修改数据时，通常都需要id-->
<input type="hidden" name="" id="" value="bbb" maxlength="5">
<input type="text" size="20" maxlength="5" placeholder="请输入账号" value="abc" name="a1" id="">
type="text" 文本框
size：长度
maxlength：允许输入的最大长度
placeholder：提示信息
value：默认值，给服务器传递的参数
name：给文本框起名字，给服务器传递参数的名字 a1 = "文本框所填内容"
id:给文本框起名字(css/javascript使用)
<input type="password" size="20" maxlength="5" placeholder="请输入账号" value="abc" name="a2">
type="password" 密码框
size：长度
maxlength：允许输入的最大长度
placeholder：提示信息
value：默认值，给服务器传递的参数
name：给文本框起名字，给服务器传递参数的名字 a2 = "文本框所填内容"
<input type="radio" name="a3" value="a">男
<input type="radio" name="a3" value="b" checked="checked">女
type="radio" 单选框
value="a" 选中之后，将value值传递给服务器
name：将多个单选框定义为一组，只能选择一个
checked：默认选中
<input type="checkbox" name="a4" value="x1">唱
<input type="checkbox" name="a4" value="x2" checked="checked">跳
<input type="checkbox" name="a4" value="x3">rap
<input type="checkbox" name="a4" value="x4" checked="checked">篮球
<input type="checkbox" name="a4" value="x5">足球
type="checkbox" 多选框
value="a" 选中之后，将value值传递给服务器
name：将多个多选框定义为一组
checked：默认选中
<input type="file" name="a5" multiple="multiple">
type="file" 上传域
name：起名字
multiple：允许选择多个文件上传
<select name="a6">
<option value="a">请选择</option>
<option value="b">陕西</option>
<option value="c" selected="selected">四川</option>
<option value="d">河南</option>
</select>
select:下拉框
name：起名字
option：下拉框选项
value：选中后，传递给服务器的参数值
selected：默认选中
<textarea rows="6" cols="50" name="a7" placeholder="aaa">呵呵</textarea>
textarea：文本域，多行文本框
rows：高度
cols：宽度
name：起名字
placeholder：提示信息
默认值双标签在中间
<input type="button" value="按钮1">
type="button"：普通按钮，没有作用，可以与javascript配合使用。
value：按钮上的文字
<input type="reset" value="按钮2">
type="reset" 重置按钮，将所有表单元素恢复默认，必须有form表单标签
<input type="submit" value="按钮3">
type="submit" 提交按钮，将所有表单元素提交给服务器(下个页面)，就是给服务器传递参数
注意：必须有form表单标签，提交给服务器(下个页面,目标地址):form标签的action属性
index.html?a1=abc11&a2=a222&a3=a&a4=x2&a4=x4&a5=&a6=c&a7=呵呵
index.html?a1=111&a2=222&a3=a&a4=x1&a4=x2&a4=x3&a4=x4&a4=x5&a5=html.md&a6=b&a7=33333
<button type="button">按钮4</button>
type="button"
type="submit" 默认
type="reset"
<form action="url" method="" enctype="">所有表单元素</form>
action:表单提交的目标地址
method：提交方式
get：默认，将表单参数以字符串的方式显示在地址栏中传递给服务器，会将参数以字符流的形式传递给服务器且传递参数的数据量大约2kb
post：将表单参数隐藏的方式传递给服务器，理论参数量无上限
注意：有上传域必须使用post方式且表单必须以字节流提交参数。
enctype：表单以字节流或者字符流方式提交
application/x-www-form-urlencoded，默认方式，字符流
multipart/form-data：字节流提交参数（有上传文件必须使用该方式）
表格
给页面局部排版
<table>
<caption>呵呵</caption>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
table:定义表格：属性有：
border="1" 表格边框
width="50%" 表格宽度
height="300" 表格高度
cellpadding="80" 内容距边框距离
cellspacing="0" 内外边框间距
align="right" 表格居左中右
caption:表格标题
tr：定义一行，属性有：
height="150" 该行的高度
align="right" 该行内容水平方向对齐方式(左中右)
valign="middle" 该行内容垂直方向对齐方式(上中下)
td/th：定义一个单元格，th：内容居中黑体
width="150" 该列的宽度
height="250" 该行的高度
align="center" 该单元格内容水平方向对齐方式(左中右)
valign="bottom" 该单元格内容垂直方向对齐方式(上中下)
rowspan="2" 行合并：上下合并,第一个单元格写属性，删除被合并的单元格
colspan="2" 列合并：左右合并,第一个单元格写属性，删除被合并的单元格
<thead>
<tr></tr>
<tr></tr>
</thead> 将多行定义为表头，不影响页面效果，只是定义，后期给动态页面使用
<tbody>
<tr></tr>
<tr></tr>
</tbody> 将多行定义为表身体，不影响页面效果，只是定义，后期给动态页面使用
超链接
针对文字或者图片，点击内容之后跳转网页
<a href="" target="">内容</a>
href：跳转网页的路径
所有的路径分为：
相对路径：从当前网页文件开始找目标文件的路径：
../ 返回上一层目录
直接写同级目录的文件名
绝对路径：从盘符开始找文件 H:\desk\test\css\2.html
网络路径：有服务器才使用： http://127.0.0.1:8080/a1/2.jpg
target:目标网页打开方式
target="_self":默认，自己窗口跳转网页
target="_blank": 新开窗口跳转网页
css
层叠样式表，给网页标签添加样式，对页面进行布局排布，通过浏览器直接解析。
页面引入css的方式
方式1：行内式：每一个标签都有style属性
<font style="css属性名:属性值;css属性名:属性值;">html标签</font>
<img src="img/pic_login01.gif" style="css属性名:属性值;css属性名:属性值;">
方式2：内嵌式：
<head>
<meta charset="UTF-8">
<title></title>
<style>
选择器{
属性名:属性值;
属性名:属性值;
}
选择器{
属性名:属性值;
属性名:属性值;
}
</style>
</head>
方式3：链接式：需要新建一个css文件
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/1.css" />
rel：说明使用连接式给当前页面引入一个css文件
type：以字符流方式引入
href：css文件路径
</head>
1.css:
选择器{
属性名:属性值;
属性名:属性值;
}
选择器{
属性名:属性值;
属性名:属性值;
}
css选择器
行内式不需要写选择器，就是给当前标签添加css样式
<font style="font-size:50px;color: #843534;font-weight:bold">html标签</font>
<img src="img/pic_login01.gif" style="width: 200px;height:80px;">
1：标记标签选择器：选择网页上所有该标签进行样式设置
标签{
属性名:属性值;
属性名:属性值;
}
font{
font-size: 30px;
color: red;
}
img{
width: 200px;
height: 200px;
}
2：关联类选择器：选择网页上所有该标签且class=“名字”的标签进行样式设置
标签名.名字{
属性名:属性值;
属性名:属性值;
}
3：独立类选择器：选择网页上所有class="名字"的标签进行样式设置
.名字{
属性名:属性值;
属性名:属性值;
}
4：id选择器：选择网页上所有id="名字"的标签进行样式设置
#名字{
属性名:属性值;
属性名:属性值;
}
注意1：行内式不需要选择器，内联式和链接式需要选择器
注意2：使用一种引入方式时，css从上到下执行
注意3：引入方式混用，就近原则。实际不可能使用
盒子模型
html+css网页开发时，将网页上每一部分的内容都放入盒子中，将盒子进行排版
html标签分为：行级标签和块级标签
行级标签：与其他标签共占一行
块级标签：独占一行
块级标签：默认独占一行，没有边框，高度靠内容撑开
<div></div>
行级标签：共占一行，没有边框，宽高靠内容撑开
<span></span>
css常用属性
border: 1px solid red; 边框：粗细 实心闲 颜色
font-size: 20px; 字号
color: red; 字体颜色
font-weight: bolder; 加粗
width: 200px; 宽度
height: 50px; 高度
display: none; 隐藏（block:显示）
background 背景颜色和背景图片
background-color 背景颜色
background-image 背景图片
float：div摆放在一行，浮动，需要用一个大盒子将一行内的所有小盒子包起来，大盒子不用浮动
margin: 50px 10px; 外边距：上，左距离
margin-top: 50px; 外边距：居上距离
margin-left: 100px; 外边距：居左距离
margin-right: 100px; 外边距：居右距离，必须浮动，右对齐
margin-bottom: 100px; 外边距：居下距离，下面必须有盒子
padding: 50px 200px; 内边距，居上下50px,左右200px,一般给span使用
padding-left: 100px; 内边距，居左100px,
padding-top: 100px; 内边距，居上100px,
text-align: right; 内容居右
javascript
面向对象编程的脚本语言：脚本语言：在客户端(浏览器)上运行的语言。
作用：控制网页元素添加动态效果：
共性1：必须有一个事件触发特效
共性2：修改标签元素的属性达到页面效果发生变化。
页面引入方式
方式1：内嵌式：
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css">
<script type="text/javascript">
js命令...
</script>
</head>
方式2：链接式：
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src="js/1.js">
js命令...
</script>
</head>
基本语法
基本与java一致，后面讲不同点。
变量、运算符、循环、判断、数组(区别)
数据类型
基本类型:number(数字类型)、string(字符串类型)、boolean(布尔)
var a1 = 1.1;
var a2 = "abc";
var a3 = true;
console.log(typeof a1); //控制台打印:a1的数据类型
console.log(typeof a2);
console.log(typeof a3);
对象类型(Object)：比较多，
每一个标签都称之为一个对象
var a1 = new Date();
json
.........
var a4 = new Date();
console.log(typeof a4);
var a5 = null;
var a6 = undefined;
console.log(a5);
console.log(a6);
console.log(a6 == a5);
document：js原生对象：当前网页文档对象
document.getElementById("uacc"); 根据id获得对象
document.getElementsByName("usex"); 根据name获得对象数组
window：js原生对象：浏览器窗口对象
window.alert(); 弹出信息确认框
下拉框对象.options: 获得下拉框所有的option对象数组
变量、运算符、循环、判断与java一致
事件
事件是给网页元素添加，当网页元素添加了事件后，当该元素发生该事件后，执行自定义函数。
点击事件 onclick="方法名()"
鼠标进入事件 onmouseover="方法名()"
鼠标离开事件 onmouseout="方法名()"
打开网页事件 onload="方法名()" 针对body标签
选项改变事件 onchange="方法名()" 针对select、type=file
获得焦点事件 onfocus="方法名()" 针对文本框
失去焦点事件 onblur="方法名()" 针对文本框
表单提交事件 onsubmit="return 方法名()"
针对form标签,方法体默认返回true,当方法体返回false,不执行action跳转,方法体返回true,执行action跳转
自定义函数
语法：
function 方法名(形参1,形参2){
方法体；
return 返回值;
}
事件调用方法，当网页元素发生事件后，调用执行对应的方法。
网页元素对象
var obj = document.getElementById(); 在当前页面根据id获得标签对象；
var obj = document.getElementsByName("usex"); 根据name获得对象数组
obj.属性的语法，可以获得，修改对象的属性，达到页面变化的效果。
正则表达式
作用：判断字符串的格式，是否与表达式匹配
var zz = /^[a-z]{6,12}$/; //正则表达式
var obj1 = document.getElementById("obj1");
var ov = obj1.value;
var boo = zz.test(ov);//判断正则与字符串是否匹配：返回boolean
alert(boo);
正则表达式：以字符串一个字符一个字符进行匹配
^ 以该符号后面的内容开始
$ 以该符号前面的内容结束
{a} 精确匹配大括号前面一个内容的次数
{a,} 匹配大括号前面一个内容至少出现的次数
{a,b} 匹配大括号前面一个内容出现的次数在a~b之间
* 匹配该符号前面的一个内容出现任意次
? 匹配该符号前面的一个内容出现0次或者1次
[] 中括号里边定义一个集合，仅匹配字符串一个字符，
要求字符串的每一个字符都属于该集合中任意一个字符
| 逻辑或者，从该符号两边完全断开或者 var zz = /^ab|c$/; == /^ab/ | /c$/
\d 0-9的数字== [0-9]
\w 字母、数字、下划线 _
\D !\d
\W !\w
对象.innerHTML = "字符串"; 将字符串放入对象开始标签和结束标签中间
数组
var ss1 = [123,"aaa",true]; 声明数组有内容
var ss1 = new Array(5); 声明数组长度为5个undefined
var ss1 = new Array(5,3); 声明数组有内容:5和3
for(var i=0;i<ss1.length;i++){
ss1[i] = i+1;
}
ss1.push(111) //数组最后一位添加元素
ss1.splice(2,3); //从下标2开始删除3个长度
for(var i=0;i<ss1.length;i++){
alert(ss1[i]);
}
var a = [1,3,76,9];
a.length = 2;
alert(a);
Bom
Browser Object Model：浏览器对象模型
window：窗体对象
window.alert("信息确认框");
window.confirm("信息选择框");
window.prompt("信息输入框");
window.open("1.html"); //新窗口打开一个网页
window.setTimeout("aaa()",N); 定时器：定义N毫秒以后执行一次aaa方法
window.setInterval(); 定时器：
window对象所有方法调用时，window可以省略
screen：屏幕对象
screen.width 屏幕分辨率宽度
screen.heigth 屏幕分辨率高度
location：浏览器地址栏对象
location.href = "url"； 当前页面跳转
history：浏览器历史记录对象
history.go(-1); 返回上一个页面
history.go(1); 返回下一个页面
history.go(0); 返回当前页面，刷新
document：当前文档对象
document.getElementById("id"); 在文档中根据id获得节点对象
document.getElementsByName("name"); 在文档中根据name获得节点对象数组
document.getElementsByClassName("class"); 在文档中根据class获得节点对象数组,不兼容
document.getElementsByTagName("tagName"); 在文档中根据class获得节点对象数组,不兼容
Dom
Document Object Model：文档对象模型
将当前html文档当成一个document文档对象，每一个标签就是一个对象，并且没有对象可能有子父节点对象
document：当前文档对象
document.getElementById("id"); 在文档中根据id获得节点对象
document.getElementsByName("name"); 在文档中根据name获得节点对象数组
document.getElementsByClassName("class"); 在文档中根据class获得节点对象数组,不兼容
document.getElementsByTagName("tagName"); 在文档中根据class获得节点对象数组,不兼容
var div = document.createElement("div"); 创建节点对象
var xxx = document.getElementById("xxx");
xxx.appendChild(div); 将div对象添加到xxx对象中
div.remove(); 删除div对象
div2.removeChild(div1); 在父节点div2中删除div1子节点
obj.parentNode; 获得obj对象的父节点对象
obj.children; 获得obj对象的子节点对象数组
this：实参，写在哪个标签里，就代表当前标签对象
定时器
window.setTimeout("aaa()",N); 定时器：定义N毫秒以后执行一次aaa方法
<script>
window.setTimeout("aaa()",1000); 该情况不常用，
function aaa(){
alert(111);
}
</script>
常用：
<script>
function aaa(){
window.setTimeout("aaa()",1000); //结果是每一秒执行一次aaa方法
alert(111);
}
</script>
<body onload="aaa()"></body>
window.setInterval("aaa()",1000); 每一秒执行一次aaa方法
<script>
window.setInterval("aaa()",1000);
function aaa(){
console.log(1111)
}
</script>
时间对象
var d = new Date(); //获得系统当前时间
var div = document.getElementById("div1");
var year = d.getFullYear(); 获得时间的年份
var month = d.getMonth() + 1; 获得时间的月份
var dd = d.getDate(); 获得时间的日期
var hour = d.getHours(); 获得时间的小时
var minute = d.getMinutes(); 获得时间的分钟
var second = d.getSeconds(); 获得时间的秒数
var millSecond = d.getMilliseconds(); 获得时间的毫秒
json
一种数据类型：
json对象：
var a = {a:1,b:2,c:3}; json数据类型，一个对象，不是数组，理解为java的实体类
var aaa = {a:1,b:"aaa",c:true};
alert(aaa.a);
alert(aaa.b);
alert(aaa.c);
var aaa = {a:1,b:"aaa",c:true,d:{a:"aaa",b:"bbb"}};
alert(aaa.a);
alert(aaa.b);
alert(aaa.c);
alert(aaa.d.a);
alert(aaa.d.b);
json对象数组：
var aaa = [{a:1,b:2,c:3},{a:11,b:22,c:33},{a:111,b:222,c:333}];
alert(aaa.length);
for(var i=0;i<aaa.length;i++){
alert(aaa[i].a);
alert(aaa[i].b);
alert(aaa[i].c);
}
bootstrap
将html+css+js进行封装，咱们只需要会从官网粘贴修改即可：注意样例引入的css文件和js文件
https://www.runoob.com/bootstrap/bootstrap-forms.html
栅格网格系统
作用：将页面使用div布局，一行总共只能最多12列，超出12列自动换行
<link rel="stylesheet" href="css/bootstrap.css" />
<div class="full-container">
<div class="row" style="border: 1px solid red;">
<div class="col-lg-2" style="border: 1px solid red;">aaa</div> <div class="col-lg-10" style="border: 1px solid red;">bbb</div>
</div>
</div>
注意：bootstrap.css和bootstrap.min.css的区别：
1：bootstrap.css和bootstrap.min.css作用代码完全一样
2：有min名字的文件没有换行格式，可读性差，但是文件小，主要应用在服务器上，下载到客户端速度快
3：不带min的文件：本机开发测试可读性较好。
折叠
作用：一般制作页面导航：注意页面引入的css和js文件的顺序不能改变
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
个人中心
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
修改个人信息<br><br>
修改密码<br><br>
购物车<br><br>
购买记录<br><br>
安全退出<br><br>
返回首页<br><br>
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo">
卖家中心
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
商品管理<br><br>
销售记录<br><br>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseThree">
商城管理
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
用户管理<br><br>
商品管理<br><br>
类型管理<br><br>
销售信息<br><br>
</div>
</div>
</div>
</div>
表格：
<table class="table table-striped table-bordered table-hover">
<tr>
<td colspan="7" align="right">
<button>添加</button>
<button>修改</button>
<button>删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox" name="abc"></td>
<td>商品名称</td>
<td>商品图片</td>
<td>商品单价</td>
<td>商品库存</td>
<td>商品类型</td>
<td>商品日期</td>
</tr>
<tr>
<td><input type="checkbox" name="abc"></td>
<td>商品名称</td>
<td>商品图片</td>
<td>商品单价</td>
<td>商品库存</td>
<td>商品类型</td>
<td>商品日期</td>
</tr>
<tr>
<td><input type="checkbox" name="abc"></td>
<td>商品名称</td>
<td>商品图片</td>
<td>商品单价</td>
<td>商品库存</td>
<td>商品类型</td>
<td>商品日期</td>
</tr>
</table>
模态框
一个可以隐藏的div
模态框的显示：
方案1：<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
模态框显示隐藏切换
</button>
方案2：$('#myModal').modal('show');
模态框隐藏：
方案1：<button data-dismiss="modal">关闭</button>
方案2：$('#myModal').modal('hide');
分页
<div style="border: 0px solid red; width: 520px;margin-left: 58%;margin-top: -30px;">
<ul class="pagination">
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">共N页</a></li>
<li><a href="#">每页
<select>
<option>5</option>
<option>10</option>
<option>20</option>
<option>50</option>
</select>行
</a></li>
<li><a href="#">当前第N页</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">尾页</a></li>
</ul>
</div>
字体图标
按钮添加图标
1：需要fonts目录：放在bootstrap.css文件的上层目录
2：按钮添加span样式
<button class="btn-success">
<span class="glyphicon glyphicon-trash"></span> 删除
</button>
Vue
针对原生javascript进行语法封装，主要用于数据渲染与数据绑定。也兼容原生javascirpt
基本语法
1：官网下载vue.js的文件，页面引入该文件
<head>
<script src="js/vue.js"></script>
</head>
2：vue在渲染数据之前，必须先针对网页某个节点创建vue对象
<body>
<div id="app">
</div>
</body>
<script>
var v1 = new Vue({ //针对网页哪个节点创建对象
el:"#app", //确定针对哪个节点创建对象
data:{}, //针对当前对象，定义变量
methods:{} //针对当前对象，定义方法
});
</script>
文本绑定/文本插入
在html页面上，使用{{变量}}，渲染该页面
<div id="app">
{{a}},{{b}},{{c}},{{d}},{{e.aaa}}
</div>
也可以在双标签上使用文本插入的属性:v-text="" == obj.innerHTML = a
<div id="app">
{{a}},{{b}},{{c}},{{d}},{{e.aaa}}
<br><br>
<span v-text="a"></span>,
<font v-text="e.bbb"></font>
</div>
事件绑定
原来javascript事件：onclick、onmouseover、onchange。。。。。所有的事件都带on关键字
现在vue事件：与原来javascript事件语法一直，把on全部去掉。
改成：
v-on:事件=“方法”
@事件="方法"
判断指令
v-if、v-show:通过判断表达式来控制节点是否显示：true：显示，false：不显示
区别：
v-if条件判断为false时，将该节点注释了，页面上没有该节点，不能操作该节点
v-show条件判断为false时，将该节点通过css：display: none;隐藏了，页面上有该节点，可以操作该节点
<span id="x1" v-if="a >= 1">{{e.aaa}}</span>,
<span id="x2" v-if="c">{{e.aaa}}</span>,
<span id="x3" v-show="c">{{e.aaa}}</span>
循环指令
v-for:
<tr v-for="xxx in goods"> 循环当前标签，循环goods变量：数组，数组中每一个元素叫做xxx
<td>{{xxx.gid}}</td>
<td v-text="xxx.gname"></td>
<td>{{xxx.gprice}}</td>
</tr>
定义变量：
data:{
goods:[
{gid:1,gname:"商品1",gprice:"11"},
{gid:2,gname:"商品2",gprice:"22"},
{gid:3,gname:"商品3",gprice:"33"}
]
}
属性绑定指令：重点
v-bind:针对html标签的属性绑定变量：称之为单向绑定：给标签的属性绑定变量后，如果变量发生改变，则属性值发生改变，页面随之变化；但是当页面发生变化，变量值不发生变化。注意该指令可以绑定任意属性
v-bind:属性名="变量"
:属性名="变量" 简写
<font v-bind:size="a" :color="b">aaa</font>
<img v-bind:src="d">
<input type="text" :value="c">
v-model="变量"：只能针对标签的value属性绑定变量(form表单元素)，称之为双向绑定：给标签的value属性绑定变量后，如果变量发生改变，则属性值发生改变，页面随之变化；当页面发生变化，变量值也发生变化。
<input type="text" v-model="c">
vue生命周期(钩子函数)
vue定义了8个系统函数，这8个方法就是创建vue对象的过程。
var v1 = new Vue({
el:"#app",
data:{
a:1,
b:2
},
methods:{ //自定义函数
aaa(){
this.a = 11111;
console.log(this.a);
},
bbb(){
this.$destroy(); //销毁当前对象
},
ccc(){
this.b = 2222;
console.log(this.b);
}
},
beforeCreate(){ //
var app = document.getElementById("app");
console.log(app.innerHTML);
console.log(this.a);
console.log("该方法在vue创建对象完成之前执行，定义属性与方法，但是没有初始化完成");
console.log("==================================");
},
created(){ //
var app = document.getElementById("app");
console.log(app.innerHTML);
console.log(this.a);
console.log("该方法在vue创建对象完成之后执行，定义属性与方法，完成初始化");
console.log("==================================");
},
beforeMount(){
var app = document.getElementById("app");
console.log(app.innerHTML);
console.log(this.a);
console.log("该方法在页面渲染数据之前执行，");
console.log("==================================");
},
mounted(){
var app = document.getElementById("app");
console.log(app.innerHTML);
console.log(this.a);
console.log("该方法在页面渲染数据之后执行，");
console.log("==================================");
},
beforeUpdate(){
var app = document.getElementById("app");
console.log(app.innerHTML);
console.log(this.a);
console.log("该方法在修改数据之后，渲染页面之前执行");
console.log("==================================");
},
updated(){
var app = document.getElementById("app");
console.log(app.innerHTML);
console.log(this.a);
console.log("该方法在修改数据之后执行，，渲染页面之后执行");
console.log("==================================");
},
beforeDestroy(){
var app = document.getElementById("app");
console.log(app.innerHTML);
console.log(this.a);
console.log("该方法在销毁当前v1对象之前执行,对象的属性和方法依然可用，只是无法渲染页面");
console.log("==================================");
},
destroyed(){
var app = document.getElementById("app");
console.log(app.innerHTML);
console.log(this.a);
console.log("该方法在销毁当前v1对象之后执行,对象的属性和方法依然可用，只是无法渲染页面");
console.log("==================================");
}
});
过滤器
针对时间、数字格式化
全局过滤器
可以给所有的vue对象使用：
文本绑定时调用过滤器f1，并将数据time1传入过滤器f1，并将f1的返回值渲染在页面上
{{time1 | f1 }}<br>
单向绑定时调用过滤器f1
<input tpye="text" v-bind:value="time2 | f1">
双向绑定调用过滤器：必须在渲染页面之前任意一个函数中手动调用过滤器修改原数据
<input tpye="text" v-model="time2">
,
beforeMount(){
//this.$options.filters获得所有过滤器数组
this.time2 = this.$options.filters["f1"](this.time2);
}
Vue.filter("f1",function(d){
var year = d.getFullYear();
var month = d.getMonth() + 1;
var dd = d.getDate();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
return year + "-" + format(month) + "-" + format(dd) + " " + format(hour) + ":" + format(minute) + ":" + format(second);
});
//自定义函数
function format(num){
return num<10?"0"+num:num;
}
局部过滤器
可以给当前的vue对象使用
<div id="app2">
{{time1 | ff1 }}<br>
<input tpye="text" v-model="time2">
</div>
var v2 = new Vue({
el:"#app2",
data:{
time1:new Date(),
time2:new Date()
},
methods:{//自定义函数
},
filters:{ //局部过滤器，只针对app2节点
ff1(d){
var year = d.getFullYear();
var month = d.getMonth() + 1;
var dd = d.getDate();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
return year + "-" + format(month) + "-" + format(dd) + " " + format(hour) + ":" + format(minute) + ":" + format(second);
},
ff2(){
}
},
beforeMount(){
this.time2 = this.$options.filters["ff1"](this.time2);
}
});
异步请求
请求服务器的另外一种方式。
同步请求
同步请求服务器：客户端看到的结果与服务器执行的过程为同步。
<a href="xxxx"></a>
<form action="xxx"></form>
location.href="xxx"
window.open("xxx");
异步请求
当前页面主线程不动，开启新的子线程访问服务器，等待服务器反馈数据，子线程完成。
Vue给我们提供了一个方法，该方法就是异步请求的方式：需要引入异步请求的js源码文件：axios.js
将页面上所有的请求都改为js事件，在方法体中调用axios方法
发起请求：
axios({
baseURL:"http://localhost:8090/test1", //请求地址
url:"/test.do",
params:{a:111,b:222}, //请求参数，请求时会将参数以get方式拼接在地址栏(请求头)
//请求参数，将参数转成字节码，通过字节流方式传递参数(请求体).,主要用于上传文件
data:{},
method:"post", //请求方式 get\post
timeout:2000, //请求超时时间，
//预期定义服务器反馈数据类型(text:字符串，json：json对象或者json数组)
responseType:"text",
}).then(response=>{ //发起异步请求等待回传数据，请求成功后，接收到回传数据执行该方法
//形参response就是异步请求后的回传对象
alert(response.data); //回传数据
});
服务器回传数据：
public void test2(HttpServletRequest request,HttpServletResponse response) throws IOException,ServletException{
String a = request.getParameter("a");
String b = request.getParameter("b");
System.out.println("异步test........."+a+b);
PrintWriter out = response.getWriter();
out.write("呵呵"); // 回传字符串
}
注意：
1：回传字符串需要设置编码格式
2：回传数据类型只能是字符串或者json
3：回传json时需要将实体对象或者Map转成json对象，将List集合转成json数组，需要引入jar包
Goods goods = new Goods();//模拟查询一个数据
goods.setGid(1);
goods.setGname("aaa");
goods.setGadd("陕西");
goods.setGnum1(100);
//将实体类对象goods转成json对象
JSONObject json = JSONObject.fromObject(goods);
System.out.println(goods);
System.out.println(json);
out.write(json.toString()); //回传json对象
//集合转成json数组
//JSONArray array = JSONArray.fromObject(list);
//System.out.println(list);
//System.out.println(array);
//out.write(array.toString());
PageInfo<Goods> pageInfo = new PageInfo<Goods>(list);
JSONObject json = JSONObject.fromObject(pageInfo);
out.write(json.toString());
4：服务器不能再转发重定向：同步
3868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
