HTML

HTML简介

网页向服务器发送一个Http Request，服务器端返回一个Http Response

  • HTML：超文本标记语言，决定页面上显示什么内容
  • css：页面上内容显示的风格，决定页面上内容的美观程度
  • JavaScript：页面特效
    我们新建一个文本文档并改名为demo01.html，然后用文本编辑器打开。

HTLM基础标签

html页面中由一对标签组成：<html>、</html>，分别被称为开始标签和结束标签，一对标签里还可以有两对标签：<head></head>、<body></body>：

1
2
3
4
5
6
<html>
    <head></head>
    <body>
        Hello World
    </body>
</html>

然后用浏览器打开这个html：
Hello World

<head></head>里面可以添加<title></title>标签，代表网页标题：

1
2
3
4
5
6
7
8
9
10
<html>
    <head>
        <title>
            第一个网页
        </title>
    </head>
    <body>
        Hello World
    </body>
</html>

Hello World!

也可以添加<meta>标签，来规定网页使用什么编码：

1
2
3
4
5
6
7
8
9
10
11
<html>
    <head>
        <title>
            第一个网页
        </title>
        <meta charset = "UTF-8">
    </head>
    <body>
        Hello World
    </body>
</html>

在<body></body>中，<br/>表示换行，<br/>标签是一个单标签：

1
2
3
4
5
6
7
8
9
10
11
<html>
    <head>
        <title>
            第一个网页
        </title>
        <meta charset = "UTF-8">
    </head>
    <body>
        Hello World<br/>你好，HTML！
    </body>
</html>

nihao
也可以在<body>中添加<p>、</p>标签，表示段落标签:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
    <head>
        <title>
            第一个网页
        </title>
        <meta charset = "UTF-8">
    </head>
    <body>
        Hello World<br/>你好，HTML！
        <p>这是第二个段落</p>
        <p>这是第三个段落</p>
    </body>
</html>

p
<img>标签用于输入图片，，src用来规定文件路径，width、height用来规定图片大小，alt来给图片写注释:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
    <head>
        <title>
            第一个网页
        </title>
        <meta charset = "UTF-8">
    </head>
    <body>
        Hello World<br/>你好，HTML！
        <p>这是第二个段落</p>
        <p>这是第三个段落</p>
        <img src="lsrf/chaewon.jpg" width="180" height="100">
    </body>
</html>

img
<h1></h1>等可以为网页添加标题，共有从大到小六个标题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
    <head>
        <title>
            第一个网页
        </title>
        <meta charset = "UTF-8">
    </head>
    <body>
        Hello World<br/>你好，HTML！
        <p>这是第二个段落</p>
        <p>这是第三个段落</p>
        <img src="lsrf/chaewon.jpg" width="180" height="100" alt="chaewon">
        <h1>标题一</h1>
        <h2>标题二</h2>
        <h3>标题三</h3>
        <h4>标题四</h4>
        <h5>标题五</h5>
        <h6>标题六</h6>
    </body>
</html>

h
<ol></ol>创建有序列表，列表中的列表项使用<li></li>创建：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
    <head>
        <title>
            第一个网页
        </title>
        <meta charset = "UTF-8">
    </head>
    <body>
        Hello World<br/>你好，HTML！
        <p>这是第二个段落</p>
        <p>这是第三个段落</p>
        <img src="lsrf/chaewon.jpg" width="180" height="100" alt="chaewon">
        <h1>标题一</h1>
        <h2>标题二</h2>
        <h3>标题三</h3>
        <h4>标题四</h4>
        <h5>标题五</h5>
        <h6>标题六</h6>

        <ol>
            <li>一</li>
            <li>二</li>
            <li>三</li>
        </ol>
    </body>
</html>

li
我们还可以为<ol>添加参数,start表示从第几个开始，type表示标注的类型，如A, a, I, i, 1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
    <head>
        <title>
            第一个网页
        </title>
        <meta charset = "UTF-8">
    </head>
    <body>
        Hello World<br/>你好，HTML！
        <p>这是第二个段落</p>
        <p>这是第三个段落</p>
        <img src="lsrf/chaewon.jpg" width="180" height="100" alt="chaewon">
        <h1>标题一</h1>
        <h2>标题二</h2>
        <h3>标题三</h3>
        <h4>标题四</h4>
        <h5>标题五</h5>
        <h6>标题六</h6>

        <ol type="i" start="3">
            <li>一</li>
            <li>二</li>
            <li>三</li>
        </ol>
    </body>
</html>

type
使用<ul></ul>创建无序列表：

1
2
3
4
5
<ul>
    <li>一</li>
    <li>二</li>
    <li>三</li>
</ul>

ul
我们也可以修改<ul>的type参数，来修改标签的形状，如disc、circle、square。

  • <b></b>用于设置加粗
  • <i></i>用于设置斜体
  • <u><u/>用于添加下划线

如果我们想写出氧和水的化学式，就需要使用上标sub和下标sup：

1
2
水分子:H<sub>2</sub>O
氧气:O<sup>2</sup>

bp

我们的小于号和大于号会与html标签混淆，所以我们使用&lt;、&gt;、&le;、&ge;代表小于、大于、小于等于、大于等于：

1
2
3
4
5&lt;10
10&gt;5
7&le;8
8&ge;7

其他的html实体如图：
shiti

<span></span>：不换行的块标记

使用<a></a>实现超链接，参数href表示超链接的地址，target参数可以为_self在本窗口打开、_blank在新窗口打开、_parent在父窗口打开、_top在顶端窗口打开：

1
<a href="www.baidu.com">百度一下</a>

baidu

使用<div></div>创建层：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
    <head>
        <title>
            第一个网页
        </title>
        <meta charset = "UTF-8">
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                position: absolute;
            }

            #div1{
                background-color: #AF8;
            }
            #div2{
                background-color: #8BC;
                left: 100px;
                top: 100px;
            }
            #div3{
                background-color: #FF8;
                left: 200px;
                top: 200px;
            }
        </style>
    </head>
    <body>
        <div id="div1">div1</div>
        <div id="div2">div2</div>
        <div id="div3">div3</div>
    </body>
</html>

div

HTML中的table标签

使用<table></table>标签实现表格，<tr>表示行，<td>表示列，可以添加参数rowspan = "2"表示合并两行的单元格，参数colspan = "4"表示合并四行的单元格：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
    <head>
        <title>
            第一个网页
        </title>
        <meta charset = "UTF-8">
    </head>
    <body>
        <table>
            <tr>
                <td>姓名</td>
                <td>学科</td>
                <td>成绩</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>Java</td>
                <td>80</td>
            </tr>
            <tr>
                <td>小明</td>
                <td>Java</td>
                <td>60</td>
            </tr>
            <tr>
                <td>小亮</td>
                <td>Java</td>
                <td>90</td>
            </tr>
        </table>
    </body>
</html>

table1
可以给<table>添加参数：border表示边框，width表示表格宽度，并用<th>表示表头，用align表示对齐方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>
    <head>
        <title>
            第一个网页
        </title>
        <meta charset = "UTF-8">
        </style>
    </head>
    <body>
        <table border="1" width="600" cellspacing="0" cellpadding="4">
            <tr align="center">
                <th>姓名</td>
                <th>学科</td>
                <th>成绩</td>
            </tr>
            <tr align="center">
                <td>小红</td>
                <td>Java</td>
                <td>80</td>
            </tr>
            <tr align="center">
                <td>小明</td>
                <td>Java</td>
                <td>60</td>
            </tr>
            <tr align="center">
                <td>小亮</td>
                <td>Java</td>
                <td>90</td>
            </tr>
        </table>
    </body>
</html>

table2

表单

凡是需要用户填写的信息都需要用到表单

form标签

在HTML中我们使用form标签来定义一个表单。而对于form标签来说有两个最重要的属性：action和method。

1
2
3
<form action="/aaa/pro01-HTML/page05-form-target.html" method="post">
    
</form>

action属性

用户在表单里填写的信息需要发送到服务器端，对于Java项目来说就是交给Java代码来处理。那么在页面上我们就必须正确填写服务器端的能够接收表单数据的地址。

这个地址要写在form标签的action属性中。但是现在暂时我们还没有服务器端环境，所以先借用一个HTML页面来当作服务器端地址使用。

method属性

在form标签中method属性用来定义提交表单的『请求方式』。method属性只有两个可选值：get或post，一般使用post即可。

name和value

在用户使用一个软件系统时，需要一次性提交很多数据是非常正常的现象。我们肯定不能要求用户一个数据一个数据的提交，而肯定是所有数据填好后一起提交。那就带来一个问题，服务器怎么从众多数据中识别出来收货人、所在地区、详细地址、手机号码……？

很简单，给每个数据都起一个『名字』，发送数据时用『名字』携带对应的数据，接收数据时通过『名字』获取对应的数据。

在各个具体的表单标签中，我们通过『name属性』来给数据起『名字』，通过『value属性』来保存要发送给服务器的『值』。

但是名字和值之间既有可能是『一个名字对应一个值』，也有可能是『一个名字对应多个值』。

这么看来这样的关系很像我们Java中的Map，而事实上在服务器端就是使用Map类型来接收请求参数的。具体的是类型是：Map<String,String[]>。

name属性就是Map的键，value属性就是Map的值。

单行文本框

1
2
3
4
5
6
7
8
9
10
11
<html>
    <head>
        <title>表单</title>
        <meta charset = "UTF-8">
    </head>
    <body>
        <form action="demo02.html" method="post">
            个性签名：<input type="text" name="signal"/>
        </form>
    </body>
</html>

个性签名

密码框

1
密码：<input type="password" name="secret"/>

密码

单选框

1
2
3
4
5
6
7
8
9
10
11
12
你最喜欢的季节是：
<input type="radio" name="season" value="spring" />春天
<input type="radio" name="season" value="summer" checked="checked" />夏天
<input type="radio" name="season" value="autumn" />秋天
<input type="radio" name="season" value="winter" />冬天

<br/><br/>

你最喜欢的动物是：
<input type="radio" name="animal" value="tiger" />路虎
<input type="radio" name="animal" value="horse" checked="checked" />宝马
<input type="radio" name="animal" value="cheetah" />捷豹

单选框

  • name属性相同的radio为一组，组内互斥
  • 当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器
  • 设置checked=”checked”属性设置默认被选中的radio

多选框

1
2
3
4
5
6
你最喜欢的球队是：
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked="checked"/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利

多选框

下拉列表

1
2
3
4
5
6
7
你喜欢的运动是：
<select name="interesting">
    <option value="swimming">游泳</option>
    <option value="running">跑步</option>
    <option value="shooting" selected="selected">射击</option>
    <option value="skating">溜冰</option>
</select>

下拉列表

  • 下拉列表用到了两种标签，其中select标签用来定义下拉列表，而option标签设置列表项。
  • name属性在select标签中设置。
  • value属性在option标签中设置。
  • option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值。
  • 通过在option标签中设置selected="selected"属性实现默认选中的效果。

按钮

1
2
3
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>

按钮

  • 普通按钮：点击后无效果，需要通过JavaScript绑定单击响应函数
  • 重置按钮：点击后将表单内的所有表单项都恢复为默认值
  • 提交按钮：点击后提交表单

表单隐藏域

1
<input type="hidden" name="userId" value="2233"/>

通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id等等。

多行文本框

1
自我介绍：<textarea name="desc"></textarea>

自我介绍
textarea没有value属性，如果要设置默认值需要写在开始和结束标签之间。

CSS

设置css样式的三种方法

在HTML标签内设置

这种方法仅对当前标签有效：

1
2
3
<div style="border: 1px solid black;width: 100px; height: 100px;">
    &nbsp;
</div>

css1

在head标签内设置

对当前页面有效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .one {
            border: 1px solid black;
            width: 100px;
            height: 100px;
            background-color: lightgreen;
            margin-top: 5px;
        }
    </style>
</head>
<body>

    <div style="border: 1px solid black;width: 100px; height: 100px;">&nbsp;</div>

    <div class="one">&nbsp;</div>
    <div class="one">&nbsp;</div>
    <div class="one">&nbsp;</div>

</body>

css2

在head标签内设置

  1. 创建CSS文件
    example
  2. 编辑CSS文件
    1
    2
    3
    4
    5
    6
    7
    .two {
        border: 1px solid black;
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin-top: 5px;
    }
  3. 引入外部CSS文件
    在需要使用这个CSS文件的HTML页面的head标签内加入：
    1
    <link rel="stylesheet" type="text/css" href="example.css" />
    于是下面HTML代码的显示效果是：
    1
    2
    3
    <div class="two">&nbsp;</div>
    <div class="two">&nbsp;</div>
    <div class="two">&nbsp;</div>
    two

CSS代码语法

  • CSS样式由选择器和声明组成，而声明又由属性和值组成。
  • 属性和值之间用冒号隔开。
  • 多条声明之间用分号隔开。
  • 使用/* … */声明注释。
  • css

CSS选择器

标签选择器

1
2
3
4
5
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
1
2
3
4
p {
    color: blue;
    font-weight: bold;
}

p

id选择器

1
2
3
4
5
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p id="special">Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
<p>Hello, this is a p tag.</p>
1
2
3
4
#special {
    font-size: 20px;
    background-color: aqua;
}

special

类选择器

1
2
3
<div class="one">&nbsp;</div>
<div class="one">&nbsp;</div>
<div class="one">&nbsp;</div>
1
2
3
4
5
6
7
.one {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    background-color: lightgreen;
    margin-top: 5px;
}

one

JavaScript

  1. 脚本语言。JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行, JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。
  2. 基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。
  3. 弱类型。JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型
  4. 事件驱动。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。
  5. 跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。

Hello World

功能效果图

HelloWorld

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
	</head>
	<body>
		<!-- 在HTML代码中定义一个按钮 -->
		<button type="button" id="helloBtn">SayHello</button>
	</body>
	
	<!-- 在script标签中编写JavaScript代码 -->
	<script type="text/javascript">
		
		// document对象代表整个HTML文档
		// document对象调用getElementById()方法表示根据id查找对应的元素对象
		var btnElement = document.getElementById("helloBtn");
		
		// 给按钮元素对象绑定单击响应函数
		btnElement.onclick = function(){
			
			// 弹出警告框
			alert("hello");
		};
	</script>
</html>

hello

JavaScript基本语法

JavaScript代码嵌入方式

HTML文档内

  • JavaScript代码要写在script标签内
  • script标签可以写在文档内的任意位置
  • 为了能够方便查询或操作HTML标签（元素），script标签可以写在body标签后面

可以参考简化版的HelloWorld：

1
2
3
4
5
6
7
<script type="text/javascript">

	document.getElementById("helloBtn").onclick = function() {
		alert("Hello simple");
	};

</script>

hellosimple

引入外部JavaScript文档

在script标签内通过src属性指定外部xxx.js文件的路径即可。但是要注意以下几点：

  • 引用外部JavaScript文件的script标签里面不能写JavaScript代码
  • 先引入，再使用
  • script标签不能写成单标签

outter

引入方式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- demo01.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
	</head>
	<body>
		<button type="button" id="helloBtn">SayHello</button>
	</body>
	
	<script type="text/javascript">
		document.getElementById("helloBtn").onclick = function() {
			alert("Hello simple");
		};
	</script>
</html>
1
2
3
4
5
6
7
8
// outter.js
<script type="text/javascript">

	document.getElementById("helloBtn").onclick = function() {
		alert("Hello simple")
	};

</script>

声明和使用变量

JavaScript数据类型

基本数据类型
  • 数值型：JavaScript不区分整数、小数
  • 字符串：JavaScript不区分字符、字符串；单引号、双引号意思一样。
  • 布尔型：true、false
    • 在JavaScript中，其他类型和布尔类型的自动转换。
    • true：非零的数值，非空字符串，非空对象
    • false：零，空字符串，null，undefined
    • 例如：”false”放在if判断中
      1
      2
      3
      4
      5
      6
       // "false"是一个非空字符串，直接放在if判断中会被当作『真』处理
      if("false"){
      	alert("true");
      }else{
      	alert("false");
      }
引用类型：
  • 所有new出来的对象
  • 用[]声明的数组
  • 用{}声明的对象

变量

  • 关键字：var
  • 数据类型：JavaScript变量可以接收任意类型的数据
  • 标识符：严格区分大小写
  • 变量使用规则
    • 如果使用了一个没有声明的变量，那么会在运行时报错Uncaught ReferenceError: b is not defined
    • 如果声明一个变量没有初始化，那么这个变量的值就是undefined

函数

内置函数

系统已经声明好的可以直接使用的函数。

弹出警告框
1
alert("警告框内容");
弹出确认框

用户点击『确定』返回true，点击『取消』返回false

1
2
3
4
5
6
var result = confirm("？");
if(result) {
	console.log("yes");
}else{
	console.log("no");
}
在控制台打印日志
1
console.log("日志内容");

f12

声明函数

写法1：

1
2
3
function sum(a, b) {
	return a+b;
}

写法2：

1
2
3
var total = function() {
	return a+b;
};

写法2可以这样解读：声明一个函数，相当于创建了一个『函数对象』，将这个对象的『引用』赋值给变量total。最后加的分号不是给函数声明加的，而是给整体的赋值语句加的分号。

调用函数

JavaScript中函数本身就是一种对象，函数名就是这个『对象』的『引用』。而调用函数的格式是：函数引用()。

1
2
3
4
5
6
function sum(a, b) {
	return a+b;
}

var result = sum(2, 3);
console.log("result="+result);

或

1
2
3
4
5
6
var total = function() {
	return a+b;
}

var totalResult = total(3,6);
console.log("totalResult="+totalResult);

对象

JavaScript中没有『类』的概念，对于系统内置的对象可以直接创建使用

使用new关键字创建对象

1
2
3
4
5
6
7
8
9
10
// 创建对象
var obj01 = new Object();

// 给对象设置属性和属性值
obj01.stuName = "tom";
obj01.stuAge = 20;
obj01.stuSubject = "java";

// 在控制台输出对象
console.log(obj01);
1
{stuName: 'tom', stuAge: 20, stuSubject: 'java'}

使用{}创建对象

1
2
3
4
5
6
7
8
9
// 创建对象
var obj02 = {
	"soldierName":"john",
	"soldierAge":35,
	"soldierWeapon":"gun"
};

// 在控制台输出对象
console.log(obj02);
1
{soldierName: 'john', soldierAge: 35, soldierWeapon: 'gun'}

给对象设置函数属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 创建对象
var obj01 = new Object();

// 给对象设置属性和属性值
obj01.stuName = "tom";
obj01.stuAge = 20;
obj01.stuSubject = "java";

obj01.study = function() {
	console.log(this.stuName + " is studying");
};

// 在控制台输出对象
console.log(obj01);
// 调用函数
obj01.study();
1
2
{stuName: 'tom', stuAge: 20, stuSubject: 'java', study: ƒ}
tom is studying

或

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 创建对象
var obj02 = {
	"soldierName":"john",
	"soldierAge":35,
	"soldierWeapon":"gun",
	"soldierShoot":function(){
		console.log(this.soldierName + " is using " + this.soldierWeapon);
	}
};

// 在控制台输出对象
console.log(obj02);
// 调用函数
obj02.soldierShoot();
1
2
{soldierName: 'john', soldierAge: 35, soldierWeapon: 'gun', soldierShoot: ƒ}
john is using gun

this关键字

this关键字只有两种情况：

  1. 在函数外面：this关键字指向window对象（代表当前浏览器窗口）
  2. 在函数里面：this关键字指向调用函数的对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 直接打印this
console.log(this);

// 函数中的this
// 1.声明函数
function getName() {
	console.log(this.name);
}

// 2.创建对象
var obj01 = {
	"name":"tom",
	"getName":getName
};
var obj02 = {
	"name":"jerry",
	"getName":getName
};

// 3.调用函数
obj01.getName();
obj02.getName();

数组

使用new关键字创建数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 1.创建数组对象
var arr01 = new Array();

// 2.压入数据
arr01.push("apple");
arr01.push("orange");
arr01.push("banana");
arr01.push("grape");

// 3.遍历数组
for (var i = 0; i < arr01.length; i++) {
	console.log(arr01[i]);
}

// 4.数组元素反序
arr01.reverse();
for (var i = 0; i < arr01.length; i++) {
	console.log(arr01[i]);
}

// 5.数组元素拼接成字符串
var arrStr = arr01.join(",");
console.log(arrStr);

// 6.字符串拆分成数组
var arr02 = arrStr.split(",");
for (var i = 0; i < arr02.length; i++) {
	console.log(arr02[i]);
}

// 7.弹出数组中最后一个元素
var ele = arr01.pop();
console.log(ele);

使用[]创建数组

1
2
3
// 8.使用[]创建数组
var arr03 = ["cat","dog","tiger"];
console.log(arr03);

JSON

在开发中凡是涉及到『跨平台数据传输』，JSON格式一定是首选

格式

  • JSON数据两端要么是{}，要么是[]
  • {}定义JSON对象
  • []定义JSON数组
  • JSON对象的格式是：
    1
    {key:value,key:value,...,key:value}
  • JSON数组的格式是：
    1
    [value,value,...,value]
  • key的类型固定是字符串
  • value的类型可以是：
    • 基本数据类型
    • 引用类型：JSON对象或JSON数组

正因为JSON格式中value部分还可以继续使用JSON对象或JSON数组，所以JSON格式是可以『多层嵌套』的，所以JSON格式不论多么复杂的数据类型都可以表达。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{
	"stuId":556,
	"stuName":"carl",
	"school":{
		"schoolId":339,
		"schoolName":"atguigu"
	},
	"subjectList":[
		{
			"subjectName":"java",
			"subjectScore":50
		},
		{
			"subjectName":"PHP",
			"subjectScore":35
		},
		{
			"subjectName":"python",
			"subjectScore":24
		}
	],
	"teacherMap":{
		"aaa":{
			"teacherName":"zhangsan",
			"teacherAge":20
		},
		"bbb":{
			"teacherName":"zhangsanfeng",
			"teacherAge":108
		},
		"ccc":{
			"teacherName":"zhangwuji",
			"teacherAge":25
		}
	}
}

JSON对象和JSON字符串互转

JSON对象转JSON字符串
1
2
3
4
5
var jsonObj = {"stuName":"tom","stuAge":20};
var jsonStr = JSON.stringify(jsonObj);

console.log(typeof jsonObj); // object
console.log(typeof jsonStr); // string
JSON字符串转JSON对象
1
2
jsonObj = JSON.parse(jsonStr);
console.log(jsonObj); // {stuName: "tom", stuAge: 20}

DOM

概念

DOM是Document Object Model的缩写，意思是『文档对象模型』——将HTML文档抽象成模型，再封装成对象方便用程序操作。

这是一种非常常用的编程思想：将现实世界的事物抽象成模型，这样就非常容易使用对象来量化的描述现实事物，从而把生活中的问题转化成一个程序问题，最终实现用应用软件协助解决现实问题。而在这其中『模型』就是那个连通现实世界和代码世界的桥梁。

DOM树

浏览器把HTML文档从服务器上下载下来之后就开始按照『从上到下』的顺序『读取HTML标签』。每一个标签都会被封装成一个『对象』。

而第一个读取到的肯定是根标签html，然后是它的子标签head，再然后是head标签里的子标签……所以从html标签开始，整个文档中的所有标签都会根据它们之间的『父子关系』被放到一个『树形结构』的对象中。

DOM

这个包含了所有标签对象的整个树形结构对象就是JavaScript中的一个可以直接使用的内置对象：document。

例如，下面的标签结构：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
	<head>
		<title>文档标题</title>
	</head>
	<body>
		<a href="demo01.html">我的链接</a>
		<h1>我的标题</h1>
	</body>
</html>

会被解析为：
树

具体概念

各个组成部分的类型

严格意义来说，JavaScript不支持真正意义上的继承，但为了更好理解我们借用继承的概念。

整个文档中的一切都可以看做Node。各个具体组成部分的具体类型可以看做Node类型的子类。

类型

DOM操作

由于实际开发时基本上都是使用JavaScript的各种框架来操作，而框架中的操作方式和我们现在看到的原生操作完全不同，所以API仅供参考：
操作1
操作2

JavaScript事件驱动

div

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#eventArea {
				border: 1px solid black;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 用div作为鼠标移动区域 -->
		<div id="eventArea"></div>
		
		<!-- 在p标签内显示鼠标坐标 -->
		<p id="showData"></p>
	</body>
	<script type="text/javascript">
		
		// 根据id找到div标签对应的元素对象
		var divEle = document.getElementById("eventArea");
		
		// 根据id找到p标签对应的元素对象
		var pEle = document.getElementById("showData");
		
		// 声明事件响应函数
		function whenMouseMove(event){
			pEle.innerText = event.clientX + " " + event.clientY;
		}
		
		// 将事件响应函数赋值给对应的事件属性		
		// onmousemove表示在鼠标移动的时候
		divEle.onmousemove = whenMouseMove;
	</script>
</html>

下面是简化的代码：

1
2
3
document.getElementById("eventArea").onmousemove = function (event){
	document.getElementById("showData").innerText = event.clientX + " " + event.clientY;
};

Vue.js

框架

任何编程语言在最初的时候都是没有框架的，后来随着在实际开发过程中不断总结『经验』，积累『最佳实践』，慢慢的人们发现很多『特定场景』下的『特定问题』总是可以『套用固定解决方案』。

于是有人把成熟的『固定解决方案』收集起来，整合在一起，就成了『框架』。

在使用框架的过程中，我们往往只需要告诉框架『做什么（声明）』，而不需要关心框架『怎么做（编程）』。

对于Java程序来说，我们使用框架就是导入那些封装了『固定解决方案』的jar包，然后通过『配置文件』告诉框架做什么，就能够大大简化编码，提高开发效率。我们使用过的junit其实就是一款单元测试框架。

而对于JavaScript程序来说，我们使用框架就是导入那些封装了『固定解决方案』的『js文件』，然后在框架的基础上编码。

实际开发中使用框架时，我们也主要是告诉框架要做什么，具体操作是框架完成的。

Vue.js

Vue是一套用于构建用户界面的渐进式框架与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue.js基本语法

声明式渲染

概念

声明式

声明式是相对于编程式而言的。

  • 声明式：告诉框架做什么，具体操作由框架完成
  • 编程式：自己编写代码完成具体操作

渲染

渲染

  • 蓝色方框：HTML标签
  • 红色圆形：动态、尚未确定的数据
  • 蓝色圆形：经过程序运算以后，计算得到的具体的，可以直接在页面上显示的数据、
  • 渲染：程序计算动态数据得到具体数据的过程

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
    </head>
    <body>
        <div id="app">{{message}}</div>
    </body>
    <script src="./script/vue.js" type="text/javascript" charset="utf-8">
    </script>
    <script type="text/javascript">
        // 1.创建一个JSON对象，作为new Vue时要使用的参数
        var argumentJson = {
            
            // el用于指定Vue对象要关联的HTML元素。el就是element的缩写
            // 通过id属性值指定HTML元素时，语法格式是：#id
            "el":"#app",
            
            // data属性设置了Vue对象中保存的数据
            "data":{
                "message":"Hello Vue!"
            }
        };

        // 2.创建Vue对象，传入上面准备好的参数
        var app = new Vue(argumentJson);
    </script>
</html>

效果：
hello
逻辑：
logic

查看声明式渲染的响应式效果

我们在控制台修改渲染属性的值：
new
可以看到html网页上也被修改：
newhtml

绑定元素属性

v-bind:HTML标签的原始属性名

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
    </head>
    <body>
        <div id="app">
            <!-- v-bind:value表示将value属性交给Vue来进行管理，也就是绑定到Vue对象 -->
            <!-- vueValue是一个用来渲染属性值的表达式，相当于标签体中加{{}}的表达式 -->
            <input type="text" v-bind:value="vueValue" />
            
            <!-- 同样的表达式，在标签体内通过{{}}告诉Vue这里需要渲染； -->
            <!-- 在HTML标签的属性中，通过v-bind:属性名="表达式"的方式告诉Vue这里要渲染 -->
            <p>{{vueValue}}</p>
        </div>
    </body>
    <script src="./script/vue.js" type="text/javascript" charset="utf-8">
    </script>
    <script type="text/javascript">
        // 创建Vue对象，挂载#app这个div标签
        var app = new Vue({
            "el":"#app",
            "data":{
                "vueValue":"太阳当空照"
            }
        });
    </script>
</html>

本质上，v-bind:属性名="表达式"和{{}}它们都是用Vue对象来渲染页面。只不过：

  • 文本标签体：使用{{}}形式
  • 属性：使用v-bind:属性名="表达式"形式

简化写法

正常写法:

1
<input type="text" v-bind:value="message" />

简化写法：

1
<input type="text" :value="message" />

双向数据绑定

model

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
    </head>
    <body>
        <div id="app">
            <!-- v-bind:属性名 效果是从Vue对象渲染到页面 -->
            <!-- v-model:属性名 效果不仅是从Vue对象渲染到页面，而且能够在页面上数据修改后反向修改Vue对象中的数据属性 -->
            <input type="text" v-model:value="vueValue" />
            
            <p>{{vueValue}}</p>
        </div>
    </body>
    <script src="./script/vue.js" type="text/javascript" charset="utf-8">
    </script>
    <script type="text/javascript">
        // 创建Vue对象，挂载#app这个div标签
        var app = new Vue({
            "el":"#app",
            "data":{
                "vueValue":"太阳当空照"
            }
        });
    </script>
</html>

效果

model1
此时因为我们将输入框中的value与vueValue绑定了，所以我们可以通过修改输入框中的内容直接修改vueValue：
model1

补充

  1. :value可以省略，即
    1
    <input type="text" v-model:value="vueValue" />
    可以简写为
    1
    <input type="text" v-model="vueValue" />
  2. .trim修饰符
    实际开发中，要考虑到用户在输入数据时，有可能会包含前后空格。而这些前后的空格对我们程序运行来说都是干扰因素，要去掉。在v-model后面加上.trim修饰符即可实现：
    1
    <input type="text" v-model.trim="vueValue" />
    Vue会帮助我们在文本框失去焦点时自动去除前后空格。

条件渲染

根据Vue对象中，数据属性的值来判断是否对HTML页面内容进行渲染

v-if

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
    </head>
    <body>
        <div id="app">
            <h3>if</h3>
            <img v-if="flag" src="/pro03-vue/./images/one.jpg" />
            <img v-if="!flag" src="/pro03-vue/./images/two.jpg" />
        </div>
    </body>
    <script src="../script/vue.js" type="text/javascript" charset="utf-8">
    </script>
    <script type="text/javascript">
		var app = new Vue({
			"el":"#app",
			"data":{
				"flag":true
			}
		});
    </script>
</html>

vif

v-if和v-else

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
    </head>
    <body>
        <div id="app02">
            <h3>if/else</h3>
            <img v-if="flag" src="image1.jpg" />
            <img v-else="flag" src="image2.jpg" />
        </div>
    </body>
    <script src="../script/vue.js" type="text/javascript" charset="utf-8">
    </script>
    <script type="text/javascript">
		var app02 = new Vue({
			"el":"#app02",
			"data":{
				"flag":true
			}
		});
    </script>
</html>

v-show

使用v-show指令来控制元素的显示和隐藏，当 flag 的值为 true 时，图片元素显示，当 flag 的值为 false 时，图片元素隐藏。v-show允许你根据数据的状态动态地控制元素的可见性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>app03</title>
    </head>

    <body>
        <div id="app03">
            <h3>v-show</h3>
            <img v-show="flag" src="image1.jpg" />
        </div>
    </body>

    <script src="../script/vue.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
        var app03 = new Vue({
            "el":"#app03",
            "data":{
                "flag":true
            }
        });
    </script>
</html>

列表渲染

迭代简单数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>demo03app01</title>
    </head>

    <body>
        <div id="app01">
            <ul>
                <!-- 使用v-for语法遍历数组 -->
		        <!-- v-for的值是语法格式是：引用数组元素的变量名 in Vue对象中的数组属性名 -->
		        <!-- 在文本标签体中使用{{引用数组元素的变量名}}渲染每一个数组元素 -->
                <li v-for="fruit in fruitList">{{fruit}}</li>
            </ul>
        </div>
    </body>

    <script src="../script/vue.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
        var app01 = new Vue({
            "el":"#app01",
            "data":{
                "fruitList":[
                    "apple",
                    "banana",
                    "orange",
                    "grape",
                    "dragonfruit"
                ]
            }
        });
    </script>
</html>

demo03app01

实际上就是将一个数组中的元素渲染成一个列表形式。

迭代一个对象数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>demo03app</title>
    </head>

    <body>
        <div id="app">
            <table>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>专业</th>
                </tr>
                <tr v-for="employee in employeeList">
                    <td>{{employee.empId}}</td>
                    <td>{{employee.empName}}</td>
                    <td>{{employee.empAge}}</td>
                    <td>{{employee.empSubject}}</td>
                </tr>
            </table>
        </div>
    </body>

    <script src="../script/vue.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
        var app = new Vue({
            "el":"#app",
            "data":{
                "employeeList":[
                    {
                        "empId":11,
                        "empName":"Tom",
                        "empAge":11,
                        "empSubject":"java"
                    },
                    {
                        "empId":22,
                        "empName":"jerry",
                        "empAge":22,
                        "empSubject":"php"
                    },
                    {
                        "empId":33,
                        "empName":"bob",
                        "empAge":33,
                        "empSubject":"python"
                    }
                ]
            }
        })
    </script>
</html>

demo03app

事件驱动

示例1：字符串顺序反转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>demo04app01</title>
    </head>

    <body>
        <div id="app01">
            <p>{{message}}</p>

            <!-- v-on:事件类型="事件响应函数的函数名" -->
	        <button v-on:click="reverseMessage">Click me,reverse message</button>
        </div>
    </body>

    <script src="../script/vue.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
        var app01 = new Vue({
            "el":"#app01",
            "data":{
                "message":"Hello Vue!"
            },
            "methods":{
                "reverseMessage":function(){
                    this.message = this.message.split("").reverse().join("");
                }
            }
        });
    </script>
</html>

效果：
demo04app01
点击按钮后翻转上面的文字：
click

示例2：获取鼠标移动时的坐标信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>demo04app01</title>
    </head>

    <body>
        <div id="app02">
            <div id="area" v-on:mousemove="recordPosition"></div>
            <p id="showPosition">{{position}}</p>
        </div>
    </body>

    <script src="../script/vue.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
        var app02 = new Vue({
            "el":"#app02",
            "data":{
                "position":"暂时没有获取到鼠标的位置信息"
            },
            "methods":{
                "recordPosition":function(event){
                    this.position = event.clientX + " " + event.clientY;
                }
            }
        });
    </script>
</html>

简化写法

正常写法：

1
<button v-on:click="sayHello">SayHello</button>

简化写法：

1
<button @click="sayHello">SayHello</button>

侦听属性

需求

1
2
3
4
5
6
7
<div id="app01">
    <p>First Name:{{firstName}}</p>
    <p>Last Name:{{lastName}}</p>
    First Name:<input type="text" v-model="firstName" /><br/>
    Last Name:<input type="text" v-model="lastName" /><br/>
    <p>Full Name:{{fullName}}</p>
</div>

在这个div标签内容的基础上，我们希望firstName或lastName属性发生变化时，修改fullName属性。此时需要对firstName与lastName属性进行侦听。

具体来说，所谓侦听就是对message属性进行监控，当firstName或lastName属性的值发生变化时，调用我们准备好的函数。

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>侦听</title>
    </head>

    <body>
        <div id="app01">
            <p>First Name:{{firstName}}</p>
            <p>Last Name:{{lastName}}</p>
            First Name:<input type="text" v-model="firstName" /><br/>
            Last Name:<input type="text" v-model="lastName" /><br/>
            <p>Full Name:{{fullName}}</p>
        </div>
    </body>

    <script src="../script/vue.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
        var app01 = new Vue({
            "el":"#app01",
            "data":{
                "firstName":"Keith",
                "lastName":"Flick",
                "fullName":"Keith Flick"
            },
            "watch":{
                "firstName":function(inputValue){
                    this.fullName = inputValue + " " + this.lastName;
                },
                "lastName":function(inputValue){
                    this.fullName = this.firstName + " " + inputValue;
                }
            }
        })
    </script>
</html>

keith
然后我们在输入框中修改firstName或lastName：
geine

Vue对象生命周期

在我们各种语言的编程领域中，生命周期都是一个非常常见的概念。一个对象从创建、初始化、工作再到释放、清理和销毁，会经历很多环节的演变。
newVue
Vue允许我们在特定的生命周期环节中通过钩子函数来加入我们的代码。

1
2
3
4
<div id="app">
	<p id="content">{{message}}</p>
	<button @click="changeValue">点我</button>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
new Vue({
	"el":"#app",
	"data":{
		"message":"hello"
	},
	"methods":{
		"changeValue":function(){
			this.message = "new hello";
		}
	},
	
	// 1.实例创建之前
	"beforeCreate":function(){
		console.log("beforeCreate:"+this.message);
	},
	
	// 2.实例创建完成
	"created":function(){
		console.log("created:"+this.message);
	},
	
	// 3.数据挂载前
	"beforeMount":function(){
		console.log("beforeMount:"+document.getElementById("content").innerText);
	},
	
	// 4.数据已经挂载
	"mounted":function(){
		console.log("mounted:"+document.getElementById("content").innerText);
	},
	
	// 5.数据更新前
	"beforeUpdate":function(){
		console.log("beforeUpdate:"+document.getElementById("content").innerText);
	},
	
	// 6.数据更新之后
	"updated":function(){
		console.log("updated:"+document.getElementById("content").innerText);
	}
});

事件驱动补充

取消控件的默认行为

控件默认行为

  • 点击超链接会跳转页面
  • 点击表单提交按钮会提交表单

这些都是控件的默认行为，但如果我们希望点击之后根据我们的需求再看是否要跳转，就需要取消这些控件的默认行为。

取消方式

调用事件对象的preventDefault()方法

实例1：超链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>取消超链接默认跳转</title>
    </head>

    <body>
        <a id="anchor" href="www.baidu.com">百度知道</a>
    </body>

    <script src="../script/vue.js" type="text/javascript" charset="utf-8"></script>
    
    <script type="text/javascript">
        document.getElementById("anchor").onclick = function(){
            console.log("已点击超链接");
            event.preventDefault();
        }
    </script>
</html>

cancel
点击超链接后不跳转，控制台输出：
cancel

实例2：表单提交

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>取消表单点击提交</title>
    </head>

    <body>
        <form action="./form.html" method="post">
            <button id="submitBtn" type="submit">提交表单</button>
        </form>
    </body>

    <script src="../script/vue.js" type="text/javascript" charset="utf-8"></script>
    
    <script type="text/javascript">
        document.getElementById("submitBtn").onclick = function() {
            console.log("我点击了一个表单提交按钮");
            event.preventDefault();
        }
    </script>
</html>

cancel
点击表单后不提交，控制台输出：
cancel

阻止事件冒泡

2div
图中的这两个div，他们的实现方式是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>阻止事件冒泡</title>
        <style>
            #outterDiv {
                width: 200px;
                height: 200px;
                background-color: #AF8;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            #innerDiv {
                width: 100px;
                height: 100px;
                background-color: #8BC;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="outterDiv" >
            <div id="innerDiv"></div>
        </div>
    </body>

    <script src="../script/vue.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
        document.getElementById("outterDiv").onclick = function(){
            console.log("点击外层");
        }
        document.getElementById("innerDiv").onclick = function(){
            console.log("点击内层");
        }
    </script>
</html>

也就是说点击里面的div同时也等于点击了外层的div，单击响应函数那么就都会被触发：
2click
所以事件冒泡就是一个事件会不断向父元素传递，直到window对象。

如果这不是我们想要的效果那么可以使用事件对象的stopPropagation()函数阻止：

1
event.stopPropagation();

完整代码为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>阻止事件冒泡</title>
        <style>
            #outterDiv {
                width: 200px;
                height: 200px;
                background-color: #AF8;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            #innerDiv {
                width: 100px;
                height: 100px;
                background-color: #8BC;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="outterDiv" >
            <div id="innerDiv"></div>
        </div>
    </body>

    <script src="../script/vue.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
        document.getElementById("outterDiv").onclick = function(){
            console.log("点击外层");
        }
        document.getElementById("innerDiv").onclick = function(){
            console.log("点击内层");

            event.stopPropagation();
        }
    </script>
</html>

此时我们点击内层，控制台就只输出“点击内层”。

Vue事件修饰符

像上面的两个实例，在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求，但是我们可以使用更好的方法去处理逻辑而不是处理DOM事件：

取消控件的默认行为

实现这个功能使用的Vue事件修饰符是.prevent，如上面情况可以改写为：

1
<a href="http://www.baidu.com" @click.prevent="clickAnchor">超链接</a>

与

1
2
3
<form action="http://www.baidu.com" method="post">
	<button type="submit" @click.prevent="clickSubmitBtn">提交表单</button>
</form>

取消事件冒泡

实现这个功能使用的Vue事件修饰符是.stop，如上面情况可以改写为：

1
2
3
<div id="outterDiv" @click="clickOutterDiv">
	<div id="innerDiv" @click.stop="clickInnerDiv"></div>
</div>

正则表达式

概念

使用一段字符串定义的一个规则，用以检测某个字符串是否满足这个规则，或将目标字符串中满足规则的部分读取出来，又或者将目标字符串中满足标准的部分替换为其他字符串。

所以正则表达式有三个主要用途：

  • 模式验证
  • 匹配读取
  • 匹配替换
    正则表达式

待更新……

练习

功能效果演示

show

任务拆解

  • 第一步：显示表格
  • 第二步：显示四个文本框
  • 第三步：创建一个p标签用来显示用户在文本框中实时输入的内容
  • 第四步：点击添加记录按钮实现记录的添加

第一步：显示表格

html标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table id="appTable">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>专业</th>
    </tr>
    <tr v-for="student in studentList">
        <td>{{student.stuId}}</td>
        <td>{{student.stuName}}</td>
        <td>{{student.stuAge}}</td>
        <td>{{student.stuSubject}}</td>
    </tr>
</table>

Vue代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var appTable = new Vue({
    "el":"#appTable",
    "data":{
        "studentList":[
            {
                "stuId":1,
                "stuName":"tom",
                "stuAge":11,
                "stuSubject":"java"
            },
            {
                "stuId":2,
                "stuName":"jerry",
                "stuAge":22,
                "stuSubject":"C"
            },
            {
                "stuId":3,
                "stuName":"bob",
                "stuAge":33,
                "stuSubject":"python"
            },
            {
                "stuId":4,
                "stuName":"tt",
                "stuAge":44,
                "stuSubject":"cpp"
            }
    ]}
});

第一步：显示四个文本框

html标签

1
2
3
4
5
6
<div id="appDiv">
    编号：<input type="text" v-model="stuId" /><br/>
    姓名：<input type="text" v-model="stuName" /><br/>
    年龄：<input type="text" v-model="stuAge" /><br/>
    专业：<input type="text" v-model="stuSubject" /><br/>
</div>

Vue代码

1
2
3
4
5
6
7
8
9
var appDiv = new Vue({
    "el":"#appDiv",
    "data":{
        "stuId":"",
        "stuName":"",
        "stuAge":"",
        "stuSubject":"",
    }
});

第三步：创建一个p标签用来显示用户在文本框中实时输入的内容

1
<p>{{stuId}} {{stuName}} {{stuAge}} {{stuSubject}}</p>

第四步：点击添加点击添加记录按钮实现记录的添加

给按钮设置事件驱动

1
<button v-on:click="addRecord">添加记录</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var appDiv = new Vue({
    "el":"#appDiv",
    "data":{
        "stuId":"",
        "stuName":"",
        "stuAge":"",
        "stuSubject":"",
    },
    "methods":{
        "addRecord":function(){
            console.log("添加数据")
        }
    }
});

打印文本框输入的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var appDiv = new Vue({
    "el":"#appDiv",
    "data":{
        "stuId":"",
        "stuName":"",
        "stuAge":"",
        "stuSubject":"",
    },
    "methods":{
        "addRecord":function(){
            console.log("添加数据");
            console.log(this.stuId);
            console.log(this.stuName);
            console.log(this.stuAge);
            console.log(this.stuSubject);
        }
    }
});

将收集到的数据添加到表格中

1
2
3
4
5
6
7
8
var newStudent = {
    "stuId":this.stuId,
    "stuName":this.stuName,
    "stuAge":this.stuAge,
    "stuSubject":this.stuSubject
};

appTable.studentList.push(newStudent);

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>练习</title>
    </head>

    <body>
        <table id="appTable">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>专业</th>
            </tr>
            <tr v-for="student in studentList">
                <td>{{student.stuId}}</td>
                <td>{{student.stuName}}</td>
                <td>{{student.stuAge}}</td>
                <td>{{student.stuSubject}}</td>
            </tr>
        </table>

        <div id="appDiv">
            编号：<input type="text" v-model:value="stuId" /><br/>
            姓名：<input type="text" v-model:value="stuName" /><br/>
            年龄：<input type="text" v-model:value="stuAge" /><br/>
            专业：<input type="text" v-model:value="stuSubject" /><br/>

            <p>{{stuId}} {{stuName}} {{stuAge}} {{stuSubject}}</p>

            <button type="button" v-on:click="addRecord">添加记录</button>
        </div>

    </body>

    <script src="../script/vue.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
        var appTable = new Vue({
            "el":"#appTable",
            "data":{
                "studentList":[
                    {
                        "stuId":1,
                        "stuName":"tom",
                        "stuAge":11,
                        "stuSubject":"java"
                    },
                    {
                        "stuId":2,
                        "stuName":"jerry",
                        "stuAge":22,
                        "stuSubject":"C"
                    },
                    {
                        "stuId":3,
                        "stuName":"bob",
                        "stuAge":33,
                        "stuSubject":"python"
                    },
                    {
                        "stuId":4,
                        "stuName":"tt",
                        "stuAge":44,
                        "stuSubject":"cpp"
                    }
            ]}
        });

        var appDiv = new Vue({
            "el":"#appDiv",
            "data":{
                "stuId":"",
                "stuName":"",
                "stuAge":"",
                "stuSubject":"",
            },
            "methods":{
                "addRecord":function(){
                    
                    console.log("已添加数据");

                    console.log(this.stuId);
                    console.log(this.stuName);
                    console.log(this.stuAge);
                    console.log(this.stuSubject);

                    var newStudent = {
                        "stuId":this.stuId,
                        "stuName":this.stuName,
                        "stuAge":this.stuAge,
                        "stuSubject":this.stuSubject
                    };

                    appTable.studentList.push(newStudent);
                }
            }
            
        });
    </script>
</html>

界面展示

练习
添加数据：
add
点击按钮：
kf
控制台打印：
console