目录

初识web前端

Web标准

什么是HTML、CSS?

HTML、CSS

标题排版

标题样式

超链接

正文排版

页面布局

表格标签

表单标签

表单标签-表单项

JS

JavaScript引入方式

书写语法

输出语句

变量

数据类型

运算符

流程控制语句

函数

Array

string

JavaScript自定义对象

JSON

JSON-介绍

JSON-基础语法

BOM

Window

Location

DOM

案例

事件监听

事件绑定

常见事件

案例

Vue

什么是Vue?

Vue快速入门

常用指令

v-bing和v-model

v-on

v-if和v-show

v-for

案例-通过Vue完成表格数据的渲染展示

生命周期

初识web前端

Web标准

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Consortium，万维网联盟）负责制定。

三个组成部分：
·HTML：负责网页的结构（页面元素内容）。
·CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
· JavaScript：负责网页的行为（交互效果）。

什么是HTML、CSS?

HTML：
HTML（HyperText Markup Language)：超文本标记语言。
·超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
·标记语言：由标签构成的语言
HTML标签都是预定义好的。例如：使用<a>展示超链接，使用<img>展示图片，<video>展示视频。
HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

CSS：
CSS(Cascading Style Sheet)：层叠样式表，用于控制页面的样式（表现）。

HTML、CSS

标题排版

图片标签：<img>
        ·src：指定图像的url（绝对路径/相对路径）
        ·width：图像的宽度（像素/相对于父元素的百分比）
        ·helght：图像的高度（像素/相对于父元素的百分比）
标题标签：<h1>-<h6>
水平线标签：<hr>

<!-- 文档类型为html -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集为UTF-8 --><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>焦点访谈
</title>
</head>
<body><!-- img标签：src:图片资源路径width：宽度（px,像素；%，相对于父元素的百分比）height：高度（px,像素；%，相对于父元素的百分比）路径书写方式绝对路径：1.绝对磁盘路径:(D:/xxxx)2.绝对网络路径(https://xxxx)相对路径：从当前文件开始查找（推荐）./ :当前目录，./可以省略../:上一级目录
--><img src="./img/news_logo.png">新浪政务>正文<h1>焦点访谈</h1><hr>2023年03月02日 21:50 xx网<hr>
</body>
</html>

标题样式

CSS引入方式：
·行内样式：写在标签的style属性中（不推荐）
·内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）
·外联样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入）

<!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>焦点访谈</title><!-- 方式二：内嵌样式 --><style>h1{/* color: orangered; *//* color:rgb(255, 0, 0); */color:#4D4F53;}</style><!-- 方式三：外联样式 --><link rel="stylesheet" href="css/news.css"></head></body><img src="./img/news_logo.png">新浪政务>正文<!-- 方式一：行内样式 --><!-- <h1 style="color:orangered">焦点访谈</h1> --><h1>焦点访谈</h1><hr>2023年03月02日 21:50 xx网<hr>
</body>
</html>
h1{color: orangered;
}

颜色表示形式：

表示方式 表示含义 取值
关键字 预定义的颜色名 red、 green. blue. . .
rgb表示法 红绿蓝三原色。每项取值范围:0-255 rgb(0,0,0). rgb( 255,255,255). rgb ( 255,0,0)
十六进制表示法 开头，将数字转换或十六进制表示 #00000、#ff0000、#ccccc,简写:#000、#ccc

CSS选择器：用来选取需要设置样式的元素（标签）

元素选择器  元素名称{
        color: red;
}

h1 {

color: red;

}

 <h1> Hello css </h1>
id选择器

#id属性值{

color : red;
}

#id {

color: red;

}

 <h1> id = "hid"> CSS id Selector</h1>
类选择器

.class属性值{

color : red;

}

.cls {

color: red;

}

 <h1 class = "cls">CSS class Selector</h1>

·优先级：id选择器 > 类选择器 > 元素选择器

CSS属性

·color:设置文本的颜色
·font-siz:字体大小（注意：记得加px）

<span>标签
<span>是一个在开发网页时大量会用到的没有语义的布局标签
特点：一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

<!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>焦点访谈</title><style>h1{color: #4D4F53;}/* 元素选择器 *//* span{color: #968D92;} *//* 类选择器 *//* .cls{color: #968D92;} *//* ID选择器 */#time{color: #968D92;font-size: 13px;/* 设置字体大小 */}</style>
</head><body>   <img src="./img/news_logo.png">新浪政务>正文<h1>焦点访谈</h1><hr><span class="cls" id="time">2023年03月02日 21:50</span>  <span>xx网</span><hr></body>
</html>

超链接

·标签:
<a>-</a>
·属性:
href：指定资源访问的url
target：指定在何处打开资源链接
_self：默认值，在当前页面打开
_blank: 在空白页面打开

<!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>焦点访谈</title><style>h1{color: #4D4F53;}#time{color: #968D92;font-size: 13px;/* 设置字体大小 */}a{color: black;/* text-decoration:规定添加到文本的修饰，none表示定义标准的文本*/text-decoration: none;/* 设置文本为一个标准的文本 */}</style>
</head></body><img src="./img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a> >正文<h1>焦点访谈</h1><hr><span class="cls" id="time">2023年03月02日 21:50</span>  <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">xx网</a> </span><hr></body>
</html>

正文排版

·视频标签：<video>
        · src：规定视频的url
        · controls：显示播放控件
        · width：播放器的宽度
        · height：播放器的高度
·音频标签：<audio>
        · src：规定音频的url
        · controls：显示播放控件
·换行标签:  <br>
·段落标签：<p>
·文本加粗标签：<b>/<strong>
注意：在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符：&nbsp；

<!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>焦点访谈</title><style>h1{color: #4D4F53;}#time{color: #968D92;font-size: 13px;}a{color: black;text-decoration: none;}p{text-indent: 35px;/* 设置首行缩进 */line-height: 40px;/* 设置行高 */}#plast{text-align: right;/* 对齐方式 */}#center{width: 65%;/* margin: 0% 17.5% 0% 17.5%;外边距, 上 右 下 左 */margin: 0 auto;}</style>
</head></body><div id="center"><img src="./img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a> >正文<h1>焦点访谈</h1><hr><span class="cls" id="time">2023年03月02日 21:50</span> <span> <ahref="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">xx网</a> </span><hr><!-- 正文 --><!-- 视频 --><video src="video/1.mp4" controls width="950px"></video><!-- 音频 --><!-- <audio src="audio/1.mp3" controls></audio> --><p><b>xx网消息</b> 连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？</p><p>人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。</p><img src="img/1.jpg"><p>今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。</p><img src="img/2.jpg"><p>中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足国内，解决14亿多人吃饭的问题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。亿万中国人民辛勤耕耘、不懈奋斗，我们就一定能够牢牢守住粮食安全这一“国之大者”，把中国人的饭碗牢牢端在自己手中，夯实中国式现代化基础。</p><p id="plast">责任编辑：王树淼 SN242</p>
</div>
</body>
</html>

页面布局

·盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
·CSS盒子模型组成：内容区域（content）、内边距区域（padding）、边框区城（border）、外边距区域（margin）

·布局标签：实际开发网页中，会大量频繁的使用div和span这两个没有语义的布局标签。
·标签：<div> <span>
·特点：
        ·div标签：一行只显示一个（独占一行）
                ·宽度默认是父元素的宽度，高度默认由内容撑开
                ·可以设置宽高（width、height）
        ·span标签：
                · 一行可以显示多个
                ·宽度和高度默认由内容撑开
                ·不可以设置宽高（width、height）

注意：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上-位置，如：padding-top、padding-left、padding-right …

#center{width: 65%;/* margin: 0% 17.5% 0% 17.5%;外边距, 上 右 下 左 */margin: 0 auto;}

表格标签

· 场景：在网页中以表格（行、列）形式整齐展示数据，如：班级表。
· 标签：

标签 描述 属性/备注
<table> 定义表格整体，可以包裹多个<tr>

border:规定表格边框的宽度

width:规定表恪的宽度

cellspacing:规定单元之间的空间。
<tr> 表格的行，可以包裹多个<td>
<td> 表格单元格(普通)，可以包裹内容 如昊是表头单元格，可以替换为<th> 
<!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><style>td {text-align: center; /* 单元格内容居中展示 */}</style>
</head>
<body><table border="1px" cellspacing="0"  width="600px"><tr><th>序号</th><th>品牌Logo</th><th>品牌名称</th><th>企业名称</th></tr><tr><td>1</td><td> <img src="img/huawei.jpg" width="100px"> </td><td>华为</td><td>华为技术有限公司</td></tr><tr><td>2</td><td> <img src="img/alibaba.jpg"  width="100px"> </td><td>阿里</td><td>阿里巴巴集团控股有限公司</td></tr></table></body>
</html>

表单标签

· 场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。
· 标签：<form>
· 表单项：不同类型的 input 元素、下拉列表、文本域等。
        · <input>：定义表单项，通过type属性控制输入形式
        · <select>：定义下拉列表
        · <textareap>：定义文本域
· 属性：
        · action：规定当提交表单时向何处发送表单数据，URL
        · method：规定用于发送表单数据的方式。
                · get：表单数据拼接在ur后面，?username=java,大小有限制
                · post：表单数据在请求体中携带，大小没有限制

注意：表单项必须有name属性才可以提交。

<!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><!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.-->   <form action="" method="post">用户名: <input type="text" name="username">年龄: <input type="text" name="age"><input type="submit" value="提交"></form></body>
</html>

表单标签-表单项

· 表单项：
        · <input>：定义表单项，通过type属性控制输入形式
        · <select>：定义下拉列表
        · <textareap>：定义文本域

type取值 描述 形式
text 默认值，定义单行的输入字段
password 定义密码字段
radio 定义单选按钮
checkbox 定义复选框
file 定义文件上传按钮
date/time/ datetime-local 定义日期/时间/日期时间
number 定义数字输入框
email 定义邮件输入框
hidden 定义隐藏域
submit / reset / button 定义提交按钮/重置按钮/可点击按钮 
<!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: 表单项提交的值 -->
<label action="" method="post">姓名: <input type="text" name="name"> <br><br>密码: <input type="password" name="password"> <br><br> 性别: <label><input type="radio" name="gender" value="1"> 男 </label><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>

JS

什么是JavaScript?

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。
JavaScript和Java是完全不同的语言，不论是概念还是设计，但是基础语法类似。
JavaScript在1995年由Brendan Eich发明，并于1997年成为ECMA标准。
ECMAScript 6(E56)是最新的JavaScript版本（发布于2015年）.

JavaScript引入方式

· 内部脚本：将JS代码定义在HTML页面中
        · JavaScript代码必须位于<script</script>标签之间 
        · 在HTML文档中，可以在任意地方，放置任意数量的<script>
        · 一般会把脚本置于<body>元素的底部，可改善显示速度

· 外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中
        · 外部JS文件中，只包含JS代码，不包含<script>标签
        · <scripp>标签不能自闭合

<!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><!-- <script>alert("Hello JS");//定义弹出框</script> -->
</head>
<body><!-- 内部脚本 --><!-- <script>alert("Hello JS");//定义弹出框</script> --><!-- 外部脚本 --><script src="js/demo.js"></script>
</body>
</html><!-- <script>alert("Hello JS");//定义弹出框
</script> -->

书写语法

· 区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
· 每行结尾的分号可有可无
· 注释：
        · 单行注释：//注释内容
        · 多行注释：/*注释内容*/
· 大括号表示代码块

输出语句

使用 window.alert()                写入警告框
使用 document.write()           写入HTML输出
使用 console.log()                 写入浏览器控制台

<!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("JS"); *///方式一：弹出警告框window.alert("hello js");//方式二：写入html页面中document.write("hello js");//方式三：控制台输出console.log("hello js");
</script>
</html>

变量

· Javascript 中用 var 关键字(variable 的缩写）来声明变量。
· Javascript是一门弱类语言，变量可以存放不同类型的值。
· 变量名需要遵循如下规则：
        组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
        数字不能开头
        建议使用驼峰命名

注意事项
· ECMAScript 6新增了 let 关键字来定义变量。它的用法类似于var，但是所声名的变量，只在let关键字所在的代码块内有效，且不允许重复声名。
· ECMAScript 6新增了 const 关键字，用来声名一个只读的常量。一但声明，常量的值就不能改变。

<!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>//var定义变量//var a = 10;//a = "张三";//alert(a);//特点1：作用域比较大，全局变量//特点2：可以重复定义的// {//     var x = 1;//     var x = "A";// }// alert(x);// let:局部变量 ;不能重复定义// {//     let x = 1;//     alert(x);// }//const:常量 ， 不能被改变const pi = 3.14;pi = 3.15;alert(pi);</script>
</html>

数据类型

· JavaScript中分为：原始类型和引用类型。

原始类型
· number:数字（整数、小数、NaN(Not a Number))
· string：字符串，单双引皆可
· boolean:布尔。true、false
· null：对象为空
· undefined：当声明的变量未初始化时，该变量的默认值是undefined

·使用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); //numberalert(typeof 3.14);//numberalert(typeof "A"); //stringalert(typeof 'Hello');//stringalert(typeof true);//booleanalert(typeof false);//booleanalert(typeof null);//objectvar a ;alert(typeof a);//undefined?</script>
</html>

运算符

运算符
· 算术运算符：+，-，*，/，%，++，--
· 赋值运算符：=，+=，-=，*=，/=，%=
· 比较运算：；>，<，>=，<=，!=，==，===
· 逻辅运算符：&&，||，！
· 三元运算符：条件表达式? true_value:false_value

== 和 === 的区别
· =会进行类型转换，===不会进行类型转换

类型转换
· 字符串类型转为数字：
        · 将字符串字面值转为数字。如果字面值不是数字，则转为NaN。
· 其他类型转为boolean：
· Number:0 和 NaN为false，其他均转为true。
· String：空字符串为false，其他均转为true。
· Null 和 undefined：均转为false.

流程控制语句

· if.….else if .….else.…
· switch
· for
· while
· do ... while

参考官方文档：https://www.w3school.com.cn/jsref/jsref_statements.asp

函数

· 介绍：函数（方法）是被设计为执行特定任务的代码块。
· 定义：JavaScript 函数通过function关键字进行定义，语法为：
        functon functionName(参数1,参数2..){
                //需要执行的代码
}
· 注意：
        · 形式参数不需要类型。因为javaScript是弱类型语言
        · 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
· 调用：函数名称（实际参数列表）

· 定义方式二：
        var functionName = function(参数1,参数2...) {
                //需要执行的代码
}

注意事项 JS中，函数调用可以传递任意个数的参数。

<!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>//定义函数-1// function add(a,b){//    return  a + b;// }//定义函数-2var add = function(a,b){return  a + b;}//函数调用var result = add(10,20);alert(result);</script>
</html>

Array

· Javascript 中 Array对象用于定义数组。
· 定义

var 变量名 = new Array(元素列表]);//方式一 var arr =new Array(1,2,3,4);
var 变量名 = [元素列表];//方式二 var arr = [1,2,3,4];

· 访问

arr[索引] = 值; arr[10] = "hello";

注意事项
        JavaScript 中的数组相当于Java中集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意的类型的数据。

· 属性

属性 描述
length 设置或返回数组中元素的数量。

· 方法

方法 描述
forEach() 遍历数组中的每个有值的元素,并调用一次传入的函教
push() 将新元素添加到数组的末尾，并返回新的长度。
splice() 从数组中删除元素。

箭头函数(ES6):是用来简化函数定义语法的。具体形式为: (...) =>{...}，如果需要给箭头函数起名字:var xxx=(...) => {...}

<!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-对象-Array</title>
</head>
<body></body>
<script>//定义数组// var arr = new Array(1,2,3,4);// var arr = [1,2,3,4];// console.log(arr[0]);// console.log(arr[1]);//特点: 长度可变 类型可变// var arr = [1,2,3,4];// arr[10] = 50;// console.log(arr[10]);// console.log(arr[9]);// console.log(arr[8]);// arr[9] = "A";// arr[8] = true;// console.log(arr);var arr = [1,2,3,4];arr[10] = 50;// for (let i = 0; i < arr.length; i++) {//     console.log(arr[i]);// }// console.log("==================");//forEach: 遍历数组中有值的元素// arr.forEach(function(e){//     console.log(e);// })// //ES6 箭头函数: (...) => {...} -- 简化函数定义// arr.forEach((e) => {//     console.log(e);// }) //push: 添加元素到数组末尾// arr.push(7,8,9);// console.log(arr);//splice: 删除元素arr.splice(2,2);console.log(arr);</script>
</html>

string

· String字符串对象创建方式有两种:

var 变量名 = new String("..."); //方式一 var str = new String("Hello string");
var 变量名 = "..."; //方式二

var str = "Hello string";

var str = 'Hello string ';

· 属性:

属性 措述
length 字符串的长度。

· 方法:

方法 措述
charAt() 返回在指定位置的字符。
indexOf( 检索字符串。
trim( ) 去除字符串两边的空格
substring( 提取宇符串中两个指定的索引号之间的字符。 
<!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);//lengthconsole.log(str.length);//charAtconsole.log(str.charAt(4));//indexOfconsole.log(str.indexOf("lo"));//trimvar s = str.trim();console.log(s);//substring(start,end) --- 开始索引, 结束索引 (含头不含尾)console.log(s.substring(0,5));</script>
</html>

JavaScript自定义对象

· 定义格式:

var对象名={

属性名1:属性值1,

属性名2:属性值2,

属性名3:属性值吟

函数名称: function(形参列表）{}
}；

var user = {

name : "Tom",

age:20,

gender:"male",

eat: function(){

alert("吃饭")；

}

}；

var user = {

name : "Tom",

age:20,

gender:"male",

eat(){

alert("吃饭")；

}

}；

· 调用格式:

对象名.属性名; console.log(user，nane);
对象名.函数名(); user.eat();

JSON

JSON-介绍

· 概念：JavaScript Object Notation,JavaScript对象标记法。
· JSON是通过JavaScript对象标记法书写的文本。
· 由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

JSON-基础语法

· 定义
        var 变量名 = '{"key1": value1, "kay2": velue2}';
         >示例
        var userStr = '{"name":"Jerry","age":18,"addr": ["北京","上海", "西安"]}';

· JSON字符串转为JS对象
        var jsObject = JSON.parse(userStr);

· JS对象转为JSON字符串
        var jsonStr = JSON.stringify(jsObject);

<!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-对象-JSON</title>
</head>
<body></body>
<script>//自定义对象// var user = {//     name: "Tom",//     age: 10,//     gender: "male",//     // eat: function(){//     //     alert("用膳~");//     // }//     eat(){//         alert("用膳~");//     }// }// alert(user.name);// user.eat();//定义jsonvar 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

· 概念：Browser Object Model 浏览器对象模型，允许javaScript与浏览器对话，JavaScript 将浏览器的各个组成部分封装为对象。

· 组成：
        · Window:浏览器窗口对象
        · Navigator:浏览器对象
        · Screen：屏幕对象
        · History：历史记录对象
        · Location:地址栏対象

Window

· 介绍：浏览器窗口对象。
· 获取：直接使用window，其中 window.可以省略。
        window.alert("Hello Window")；  =  alert("Hello Window");
· 属性
        · history：对History对象的只读引用。请参阅History 对象。
        · location：用于窗口或框架的Location对象。请参阅Location 对象。
        · navigator：对Navigator 对象的只读引用。请参阅Navigator 对象。
· 方法
        · alert()：显示带有一段消息和一个确认按钮的警告框。
        · confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
        · setInterval()：按照指定的周期（以毫秒计）来调用的数或计算表达式
        · setTimeout()：在指定的毫秒数后调用函数或计算表达式。

Location

· 介绍：地址栏对象。
· 获取：使用window.location获取，其中window.可以省略。
        window.location.属性;    =     location.属性；

· 属性：
        · href：设置或返回完整的URL.
                location.href = "https://www.iknow.cn";

<!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-对象-BOM</title>
</head>
<body></body>
<script>//获取// window.alert("Hello BOM");// alert("Hello BOM Window");//方法//confirm - 对话框 -- 确认: true , 取消: false// var flag = confirm("您确认删除该记录吗?");// alert(flag);//定时器 - setInterval -- 周期性的执行某一个函数// var i = 0;// setInterval(function(){//     i++;//     console.log("定时器执行了"+i+"次");// },2000);//定时器 - setTimeout -- 延迟指定时间执行一次 // setTimeout(function(){//     alert("JS");// },3000);//locationalert(location.href);location.href = "https://www.itcast.cn";</script>
</html>

DOM

· 概念：Document Object Model，文档对象模型。

· 将标记语言的各个组成部分封装为对应的对象：
        · Document：整个文档对象
        · Element:元素对象
        · Attribute:属性对象
        · Text:文本对象
        · Comment:注释对象

· JavaScript 通过DOM，就能够对HTML进行操作：
        · 改变HITML元素的内容
        · 改变HTML元素的样式（CSS）
        · 对 HTML DOM 事件作出反应
        · 添加和删除HTML元素

· DOM是W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：
        1.Core DOM - 所有文档类型的标准模型
                · Document：整个文档对象
                · Element:元素对象
                · Attribute:属性对象
                · Text:文本对象
                · Comment:注释对象

2.XML DOM-XML 文档的标准模型

3.HTML DOM-HTML文档的标准模型
                · Image: <img>
                · Button : <input type = 'button'>

· HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
· Document对象中提供了以下获取Element元素对象的函数：
        1.根据id属性值获取，返回单个Elerment对象
                var h1 = document.getElementByTd('h1');
        2.根据标签名称获取，返回Element对象数组
                var divs = document.getElementsByTagName('div');
        3.根据name属性值获取，返回Element对象数组
                var hobbys = document.getElementsByName('hobby');
        4.根据class属性值获取，返回Element对象数组
                var clss = document.getElementsByClassNane('cls');

<!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-对象-DOM</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>//1. 获取Elenebt元素//1.1获取元素-根据ID获取// var img = document.getElementById('h1');// alert(img);// 1.2 获取元素-根据标签获取 - dir// var divs = document.getElementsByTagName('div');// for (let i = 0; i < divs.length; i++) {//     alert(divs[i]);// }// 1.3 获取元素-根据name属性获取// var ins = document.getElementsByName('hobby');// for (let i = 0; i < ins.length; i++) {//     alert(ins[i]);// }// 1.4 获取元素-根据class属性获取// var divs = document.getElementsByClassName('cls');// for (let i = 0; i < divs.length; i++) {//     alert(divs[i]);        // }// 2.查询参考手册，属性，方法var divs = document.getElementsByClassName('cls');var div1 = divs[1];div1.innerHTML = "阳光开朗大男孩";</script>
</html>

案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><img id="light" src="img/off.gif"> <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"> 游戏<br><script>//1. 点亮灯泡var img = document.getElementById('light');img.src = "img/on.gif";//2. 将所有的 div 标签的标签体内容替换为 非常好var divs = document.getElementsByTagName("div"); for (let i = 0; i < divs.length; i++) {const div = divs[i];div.innerHTML += "<font color = 'red'>非常好</font>";}//3. 使所有的复选框呈现被选中的状态var ins = document.getElementsByName('hobby');for (let i = 0; i < ins.length; i++) {const check = ins[i];check.checked = true;//选中}</script>
</body>
</html>

事件监听

· 事件：HTML事件是发生在HTML元素上的“事情”。比如：
        · 按钮被点击
        · 鼠标移动到元素上
        · 按下键盘按键

· 事件监听：JavaScript可以在事件被侦测到时执行代码。

事件绑定

方式一：通过HTML标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">

<script>

function on(){

alert('我被点击了!');

}

</script>

方式二：通过DOM元素属性绑定

<input type="button" id="btn" value="按钮2">

<script>

document.getElementById('btn').οnclick=function(){

alert('我被点击了!');

}

</script>

 
<!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><input type="button" id="btn1" value="事件绑定1" onclick="on()"><input type="button" id="btn2" value="事件绑定2">
</body><script>function on(){alert("按钮1被点击了。。。");}document.getElementById('btn2').onclick = function(){alert("按钮2被点击了。。。");}</script>
</html>

常见事件

事件名 说明
onclick 鼠标单击事件
onblur 元素失去焦点
onfocus 元素获得焦点
onload 某个页面或图像被完全加载
onsubmit 当表单提交时触发该事件
onkeydown 某个键盘的键被按下
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开 
<!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><input type="button" value="点亮" onclick="on()"> <input type="button"  value="熄灭" onclick="off()"><br> <br><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="clickAll()"> <input type="button" value="反选" onclick="reverse()"></body><script>//1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; function on(){// 1.获取img元素对象var img = document.getElementById("light");// 2.设置src属性img.src = "img/on.gif";}function off(){// 1.获取img元素对象var img = document.getElementById("light");// 2.设置src属性img.src = "img/off.gif";}//2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; function lower(){//a. 获取输入框元素对象var input = document.getElementById("name");//b. 将值转为小写input.value = input.value.toLowerCase();}function upper(){//a. 获取输入框元素对象var input = document.getElementById("name");//b. 将值转为小写input.value = input.value.toUpperCase();}//3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclickfunction clickAll(){//a. 获取所有复选框元素对象var hobbys = document.getElementsByName("hobby");//b. 设置选中状态for (let i = 0; i < hobbys.length; i++) {const element = hobbys[i];element.checked = true;}}function reverse(){//a. 获取所有复选框元素对象var hobbys = document.getElementsByName("hobby");//b. 设置选中状态for (let i = 0; i < hobbys.length; i++) {const element = hobbys[i];element.checked = false;}}</script>
</html>

Vue

什么是Vue?

· Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
· 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。 · 官网：https://v2.cn.vuejs.org/

框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。

Vue快速入门

· 新建HTML页面，引入Vue.js文件

<script src = "js/vue.js"></script>

· 在JS代码区域，创建Vue核心对象，定义数据模型

<script>

new Vue({

el:“#app”,

data: {

message: "Hello Vue!"

}

})

</script>

· 编写视图

<div id="app">

<input type="text" v-model="message">

{{ message }}

</div>

 
<!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"><input type="text" v-model = "message">{{message}}</div></body>
<script>//定义一个Vue对象new Vue({el:"#app", //vue接管区域data:{message:"Hello Vue"},})
</script>
</html>

常用指令

· 指令:HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。例如: v-if ，v-for...

· 常用指令

指令 作用
v-bind 为HTML标签绑定属性值，如设置href , css样式等
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
v-if 条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else-if
v-else
v-show 根据条件展示某元素，区别在于切换的是display属性的值
v-for 列表渲染，遍历容器的元素或者对象的属性

v-bing和v-model

<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>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{url:"https://www.baidu.com"}})
</script>

注意事项 通过v-bind或者v-model绑定的变量，必须在数据模型中声明。

v-on

<body><div id="app"><input type="button" value="点我一下" v-on:click="handle()"><input type="button" value="点我一下" @click="handle()"></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {handle:function(){alert("你点我一下...");}}})
</script>

v-if和v-show

<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>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{age: 20},methods: {}})
</script>

v-for

<body><div id="app"><div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{addrs:["北京", "上海", "西安", "成都", "深圳"]},methods: {}})
</script>

案例-通过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-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 v-else style="color: red;" >不及格</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>

生命周期

· 生命周期:指一个对象从创建到销毁的整个过程。

· 生命周期的八个阶段:每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

状态 阶段周期
beforecreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载完成
beforeupdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后

· mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）

<body><div id="app"></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {},mounted () {alert("vue挂载完成,发送请求到服务端")}})
</script>

JavaWeb前端学习相关推荐

  1. 基于JAVAWeb前端开发技术儿童教育网站计算机毕业设计源码+数据库+lw文档+系统+部署

    基于JAVAWeb前端开发技术儿童教育网站计算机毕业设计源码+数据库+lw文档+系统+部署 基于JAVAWeb前端开发技术儿童教育网站计算机毕业设计源码+数据库+lw文档+系统+部署 本源码技术栈: ...

  2. JavaWeb的学习(下)

    JavaWeb的学习 尚硅谷JavaWEB基础教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1jW411u7PZ 七.JavaBean • 用作JavaBean ...

  3. Web 前端学习 之js概述

    Web 前端学习 之js概述 1.JavaScript 介绍 Javascript 语言诞生主要是完成页面的数据验证.因此它运行在客户端,需要运行浏览器来解析执行JavaScript 代码. JS 是 ...

  4. [硬核]卷起来！两万六千字总结的JavaWeb核心技术学习笔记

    文章目录 前言 http协议笔记 JavaWEB笔记_1 JavaWEB笔记_2(JSP) JavaWEB笔记_3(web项目) Servlet Tomcat笔记 总结 前言 大家好,我是ChinaM ...

  5. 【FE前端学习】第二阶段任务-基础

    技能学习部分: 1.需要熟练掌握HTML标签以及CSS各个常用属性. 2.掌握CSS3 常用属性 3.掌握jquery的基本用法,对于JS基本逻辑语句需要熟练掌握 上文 [FE前端学习]第二阶段任务- ...

  6. Web前端学习有哪些技巧?

    想要学好web前端技术,在学习过程中找到合适的方法和技巧,那么在实际学习过程中会更加的容易和快速掌握知识重点,尤其是对于初学者尤为关键,下面小编就为大家详细的介绍一下Web前端学习有哪些技巧?希望能够 ...

  7. “计算机之子”winter：我的前端学习路线与方法

    你好,我是winter.今天我们一起来聊聊前端的学习路线与方法. 到现在为止,前端工程师已经成为研发体系中的重要岗位之一.可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更 ...

  8. python比前端好学吗_前端学习到底难不难？

    难易程度是相对的,不是绝对的. 前端学习相对于java,python等肯定是更为简单的.精通会有难度,而且更新速度很快,需要不断的充实自己,提升自己,这也是一个难点. 前端学习初期,不知道该怎么学,学 ...

  9. hbuilder前端需要的插件_最新web前端学习路线

    随着互联网的深入发展,前端开发工程师已成为市场上极具竞争力的人才.许多学生,包括以前的UI,java,或完全零基础,想学习的前端.下面的思维导图是在互联网上广泛传播的前端学习地图.许多初学者说,当他们 ...

最新文章

  1. django-pure-pagination 组件使用
  2. 对c语言课程的心得体会,C语言课程设计心得体会
  3. Oracle-维护存在主键的分区表时的注意事项
  4. 通过数组名遍历整个数组
  5. Angular 默认的Change detection策略及缺陷
  6. [家里蹲大学数学杂志]第041期中山大学数计学院 2008 级数学与应用数学专业《泛函分析》期末考试试题 A...
  7. cordova开发日记04 常用插件与使用(更新2016-05-19)
  8. Linux各个文件夹介绍
  9. CCF NOI1140 高精度乘法
  10. 基于better-scroll实现的类似ios选择器
  11. Unity3D脚印6——模型动画
  12. jmeter无法启动的解决办法
  13. 【OEIS】Xor Sum AtCoder2272
  14. NPDP产品经理小知识：财务分析与投资回报率
  15. 118、交换机配置规范
  16. 微信小程序仿今日头条小程序端界面和代码演示
  17. diskpart给u盘分区
  18. 运维 技术支持 人在香港 硬件维护 经验
  19. uni-app项目配置UrlSchemes在外部打开APP
  20. Espresso Test 3: Fragment Test

热门文章

  1. 软件工程：什么样的公司需要专职测试
  2. 最新一代智能垃圾分类系统的实施方案
  3. linux下的程序调试方法汇总
  4. cordova ,ionic 中cordova.js 提示deviceready has not fired after 5 seconds
  5. hadoop搭建好后，页面访问不了
  6. BurpSuit简单介绍
  7. UVM学习之路（5）— 完整的UVM验证平台
  8. MX-yolo模型训练
  9. Nginx基础知识体系
  10. gflags使用示例