HTML

快速入门

新建文本文件，后缀名改为.html
编写 HTML 结构标签
在<body>中填写内容

<html>
 <head>
     <title>
         HTML快速入门
     </title>
    </head>
    <body>
  <h1>
      Hello World
  </h1>
 </body>
</html>

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器兼容性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>qianqianzyk</title>
</head>

<body>
    <!-- px: 像素 %: 相对于父元素的百分比 -->
    <img src="https://s21.ax1x.com/2024/08/22/pAiyIcn.png" width="300px" height="300px" alt=""> 浅浅&勿念

    <h1>初识前端</h1>

    <hr>
    2024年8月22日
    <hr>
</body>

</html>

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>qianqianzyk</title>
    <style>
        h1 {
            color: #4D4F53;
        }

        #time {
            color: #968D92;
            font-size: 13px;
        }

        a {
            color: black;
            /* 设置文本为一个标准的文本 */
            text-decoration: none;
        }
    </style>
</head>

<body>
    <img src="https://s21.ax1x.com/2024/08/22/pAiyIcn.png" width="300px" height="300px" alt=""> <a
        href="https://qianqianzyk.top/" target="_self">浅浅&勿念</a>

    <h1>初识前端</h1>
    <hr>
    <span class="cls" id="time">2024年8月22日</span> <span> <a href="https://qianqianzyk.top/"
            target="_blank">qianqianzyk</a> </span>
    <hr>
</body>

</html>

视频标签：<video>
- src：规定视频的url
- controls：显示播放控件
- width：播放器的宽度
- height：播放器的高度
音频标签：<audio>
- src：规定音频的url
- controls：显示播放控件
段落标签：<p>
文本加粗标签：<b> / <strong>
换行、段落标签：
- 换行：<br>
- 段落：<p>
文本加粗标签：<b> <strong>

在 HTML 中无论输入多少个空格，只会显示一个。可以使用空格占位符： 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>qianqianzyk</title>
    <style>
        h1 {
            color: #4D4F53;
        }

        #time {
            color: #968D92;
            font-size: 13px;
        }

        a {
            color: black;
            text-decoration: none;
        }

        p {
            /* 设置首行缩进 */
            text-indent: 2em;
            /* 设置行高 */
            line-height: 40px;
        }

        #plast {
            /* 靠右对齐 */
            text-align: right;
        }
    </style>
</head>

<body>
    <img src="https://s21.ax1x.com/2024/08/22/pAiyIcn.png" width="300px" height="300px" alt=""> <a
        href="https://qianqianzyk.top/" target="_self">浅浅&勿念</a>

    <h1>初识前端</h1>
    <hr>
    <span class="cls" id="time">2024年8月22日</span> <span> <a href="https://qianqianzyk.top/"
            target="_blank">qianqianzyk</a> </span>
    <hr>

    <!-- 正文 -->
    <!-- 视频 -->
    <video src="video/net.mp4" controls width="950px"></video>
    <!-- 音频 -->
    <audio src="" controls></audio>

    <p>
        <b>消息队列（MessageQueue）</b>，即MQ，是一种在分布式系统中用于在不同组件或服务之间传递消息的通信模式。多个进程可同时向一个消息队列发送消息，也可以同时从一个消息队列中接收消息。发送进程把消息发送到队列尾部，接受进程从消息队列头部读取消息，消息一旦被读出就从队列中删除。
    </p>

    <p>
        这里引入一个博主讲的例子【系统A是一个关键性的系统，产生数据后需要通知到系统B和系统C做响应的反应，三个系统都写好了，稳定运行；某一天，系统D也需要在系统A产生数据后作出反应，那就得系统A改代码，去调系统D的接口，好，改完了，上线了。假设过了某段时间，系统C因为某些原因，不需要作出反应了，不要系统A调它接口了，就让系统A把调接口的代码删了，系统A的负责人肯定会很烦，改来改去，不停地改，不同地测，还得看会不会影响系统B，系统D。没办法，这种架构下，就是这样麻烦。而且这样还没考虑异常情况，假如系统A产生了数据，本来需要实时调系统B的，结果系统B宕机了或重启了，没调成功咋办，或者调用返回失败怎么办，系统A是不是要考虑要不要重试？还要开发一套重试机制，系统A要考虑的东西也太多了吧。】
    </p>

    <p id="plast">
        作者：qianqianzyk
    </p>
</body>

</html>

<div>标签
- 一行只能显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高
<span> 标签
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
表格标签

标签	描述	属性/备注
`<table>`	定义表格整体，可以包裹多个`<tr>`	border(规定表格边框的宽度)，width(规定表格的宽度)，cellspacing(规定单元之间的空间)
`tr`	表格的行，可以包裹多个`<td>`
`td`	表格单元格（普通），可以包裹内容	如果是表头单元格，可以替换为`<th>`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML - 表格标签</title>
</head>

<body>
    <table border="1px" cellspacing="0" width="600px">
        <tr>
            <th>序号</th>
            <th>学号</th>
            <th>姓名</th>
        </tr>
        <tr>
            <td>1</td>
            <td>67</td>
            <td>光</td>
        </tr>
        <tr>
            <td>2</td>
            <td>00</td>
            <td>暗</td>
        </tr>
    </table>
</body>

</html>

表单标签 <form>
- 表单项
  - <input>: 定义表单项，通过type属性控制输入形式
  - <select>: 定义下拉列表，<option>定义列表项
  - <textarea>: 定义文本域
- 属性
  - action: 规定当提交表单时向何处发送表单数据，URL
  - method: 规定用于发送表单数据的方式。GET、POST

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: 表单项提交的值 -->
    <form action="" method="post">
        姓名: <input type="text" name="name"> <br><br>
        密码: <input type="password" name="password"> <br><br>
        性别: <input type="radio" name="gender" value="1"> 男
        <label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
        爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
        <label><input type="checkbox" name="hobby" value="game"> game </label>
        <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
        图像: <input type="file" name="image"> <br><br>
        生日: <input type="date" name="birthday"> <br><br>
        时间: <input type="time" name="time"> <br><br>
        日期时间: <input type="datetime-local" name="datetime"> <br><br>
        邮箱: <input type="email" name="email"> <br><br>
        年龄: <input type="number" name="age"> <br><br>
        学历: <select name="degree">
            <option value="">----------- 请选择 -----------</option>
            <option value="1">大专</option>
            <option value="2">本科</option>
            <option value="3">硕士</option>
            <option value="4">博士</option>
        </select> <br><br>
        描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br>
        <input type="hidden" name="id" value="1">

        <!-- 表单常见按钮 -->
        <input type="button" value="按钮">
        <input type="reset" value="重置">
        <input type="submit" value="提交">
        <br>
    </form>

</body>

</html>

CSS

引入方式

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

颜色表示形式

表示方式表示含义取值

关键字预定义的颜色名 red，green，blue······

rgb表示法红绿色三原色，每项取值范围：0-255 rgb(0,0,0),rgb(255,255,255),rgb(255,0,0)

十六进制表示法 #开头，将数字转换成十六进制表示 #000000,#ff0000,#cccccc 简写：#000,#ccc

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>qianqianzyk</title>
    <!-- 方式二: 内嵌样式 -->
    <style>
        h1 {
            /* color: red; */
            /* color: rgb(255, 0, 0); */
            color: #4D4F53;
        }
    </style>
    <!-- 方式三: 外联样式 -->
    <!-- <link rel="stylesheet" href="./css/study_1.css"> -->
</head>

<body>
    <img src="https://s21.ax1x.com/2024/08/22/pAiyIcn.png" width="300px" height="300px" alt=""> 浅浅&勿念

    <!-- 方式一: 行内样式 -->
    <!-- <h1 style="color: red;">初识前端</h1> -->
    <h1>初识前端</h1>
    <hr>
    2024年8月22日
    <hr>
</body>

</html>

选择器

元素选择器

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

#id属性值 { color: red; }

类选择器

.class属性值 { color: red; }

优先级：ID选择器 > 类选择器 > 元素选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>qianqianzyk</title>
    <style>
        h1 {
            color: #4D4F53;
        }

        /* 元素选择器 */
        /* span {
            color: #968D92;
        } */

        /* 类选择器 */
        /* .cls {
            color: #968D92;
        } */

        /* ID选择器 */
        #time {
            color: #968D92;
            /* font-size: 13px; 设置字体大小 */
        }
    </style>
</head>

<body>
    <img src="https://s21.ax1x.com/2024/08/22/pAiyIcn.png" width="300px" height="300px" alt=""> 浅浅&勿念

    <h1>初识前端</h1>
    <hr>
    <span class="cls" id="time">2024年8月22日</span> <span>qianqianzyk</span>
    <hr>
</body>

</html>

属性

color：设置文本的颜色
font-size：字体大小（注意：记得加px）
段落
- line-height：设置行高
盒子模型
- width：设置宽度
- height：设置高度
- box-sizing:border-box：指定width height为盒子的高宽
- background-color：背景色
- border：设置边框的属性，宽度线条类型颜色
- padding：内边距，上右下左
- margin：外边距，上右下左

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

文本
- text-decoration：规定添加到文本的修饰，none表示定义标准的文本
- text-indent：定义第一个行内容的缩进
- text-align：规定元素中的文本的水平对齐方式

盒子模型

盒子: 页面中所有的元素(标签)，都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

盒子模型的组成：内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>qianqianzyk</title>
    <style>
        h1 {
            color: #4D4F53;
        }

        #time {
            color: #968D92;
            font-size: 13px;
        }

        a {
            color: black;
            text-decoration: none;
        }

        p {
            /* 设置首行缩进 */
            text-indent: 2em;
            /* 设置行高 */
            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="https://s21.ax1x.com/2024/08/22/pAiyIcn.png" width="300px" height="300px" alt=""> <a
            href="https://qianqianzyk.top/" target="_self">浅浅&勿念</a>

        <h1>初识前端</h1>
        <hr>
        <span class="cls" id="time">2024年8月22日</span> <span> <a href="https://qianqianzyk.top/"
                target="_blank">qianqianzyk</a> </span>
        <hr>

        <!-- 正文 -->
        <!-- 视频 -->
        <video src="video/net.mp4" controls width="950px"></video>
        <!-- 音频 -->
        <audio src="" controls></audio>

        <p>
            <b>消息队列（MessageQueue）</b>，即MQ，是一种在分布式系统中用于在不同组件或服务之间传递消息的通信模式。多个进程可同时向一个消息队列发送消息，也可以同时从一个消息队列中接收消息。发送进程把消息发送到队列尾部，接受进程从消息队列头部读取消息，消息一旦被读出就从队列中删除。
        </p>

        <p>
            这里引入一个博主讲的例子【系统A是一个关键性的系统，产生数据后需要通知到系统B和系统C做响应的反应，三个系统都写好了，稳定运行；某一天，系统D也需要在系统A产生数据后作出反应，那就得系统A改代码，去调系统D的接口，好，改完了，上线了。假设过了某段时间，系统C因为某些原因，不需要作出反应了，不要系统A调它接口了，就让系统A把调接口的代码删了，系统A的负责人肯定会很烦，改来改去，不停地改，不同地测，还得看会不会影响系统B，系统D。没办法，这种架构下，就是这样麻烦。而且这样还没考虑异常情况，假如系统A产生了数据，本来需要实时调系统B的，结果系统B宕机了或重启了，没调成功咋办，或者调用返回失败怎么办，系统A是不是要考虑要不要重试？还要开发一套重试机制，系统A要考虑的东西也太多了吧。】
        </p>

        <p id="plast">
            作者：qianqianzyk
        </p>
    </div>
</body>

</html>

JavaScript

JavaScript(简称:JS)是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互

引入方式

内部脚本:将JS代码定义在HTML页面中
- JavaScript代码必须位于<script></script>标签之间
- 在HTML文档中，可以在任意地方，放置任意数量的<script>
- 一般会把脚本置于<body>元素的底部，可改善显示速度
外部脚本:将JS代码定义在外部JS文件中，然后引入到 HTML页面中
- 外部JS文件中，只包含JS代码，不包含<script>标签
- <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>
    <!-- <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>
   
    
   <script>
    window.alert("Hello JS"); //弹出框

    document.write("Hello JS"); //写入HTML页面

    console.log("Hello JS"); //浏览器控制台
   </script>
</body>
</html>

变量

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

<!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>
  


<script>
    //定义变量
    // var a = 0;
    // a = "A";

    // alert(a);

    // var 定义的是一个全局变量， 还可以重复声明
    // {
    //     var a = 0;
    //     var a = "A";
    // }
    // alert(a);
    

    // let 定义的是一个局部变量， 不可以重复声明
    // {
    //     let a = 0;
    //     a = "A";

    //     alert(a);
    // }
    
    //const 定义的是一个常量
    const pi = 3.14;
    //pi = 3.15;

    alert(pi);

</script>
</body>
</html>

ECMAScript6 新增了 let 关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明

ECMAScript6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变

注意**变量提升 (Hoisting)**的问题

var: 变量声明会被提升到函数或全局作用域的顶部，但初始化不会提升。所以在代码执行前，变量名已经存在并被赋值为 undefined

let: 也会被提升，但不会初始化。在声明之前访问会导致 ReferenceError，这种行为称为暂时性死区（Temporal Dead Zone，TDZ

因为 var 允许重复声明同一个变量，并且这些声明会被提升，所以很容易不小心覆盖已有的变量，建议使用let

数据类型、运算符、流程控制语句

数据类型
- 使用 typeof 可以获取数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-数据类型</title>
</head>
<body>

</body>
<script>

    //原始数据类型
    alert(typeof 3); //number
    alert(typeof 3.14);//number

    alert(typeof "A"); //string
    alert(typeof 'Hello');//string

    alert(typeof true);//boolean
    alert(typeof false);//boolean

    alert(typeof null);//object

    var a ;
    alert(typeof a);//undefined?
        
</script>
</html>

运算符
- ==会进行类型转换，===不会进行类型转换
- 字符串类型转为数字:
  - 将字符串字面值转为数字。如果字面值不是数字，则转为NaN
- 其他类型转为boolean:
  - Number:0和NaN为false，其他均转为true
  - String:空字符串为false，其他均转为true
  - Null和 undefined :均转为false

<!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 age = 20;
    // var _age = "20";
    // var $age = 20;
    
    // alert(age == _age); //true
    // alert(age === _age); //false
    // alert(age === $age); //true



    // 类型转换 - 其他类型转为数字
    // alert(parseInt("12")); //12
    // alert(parseInt("1222A45")); //1222
    // alert(parseInt("A45")); //NaN


    // if(0){
    //     alert("If");
    // }






    // 类型转换 - 其他类型转为boolean
    // if(0){ //false
    //     alert("0 转换为false");
    // }

    // if(NaN){ //false
    //     alert("NaN 转换为false");
    // }

    // if(-1){ //true
    //     alert("除0和NaN其他数字都转为 true");
    // }

    // if(""){ //false
    //     alert("空字符串为 false, 其他都是true");
    // }
        
    // if(null){ //false
    //     alert("null 转化为false");
    // }

    // if(undefined){ //false
    //     alert("undefined 转化为false");
    // }

    /*
        false：
            0    NaN
            ""
            null
            undefined
    */

</script>
</html>

函数

语法：function functionName(参数1,参数2) { } / var functionName = function(参数1,参数2) { }

注意：形式参数不需要类型。因为JavaScript是弱类型语言；返回值也不需要定义类型，可以在函数内部直接使用return返回即可

<!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;
    // }

    //定义函数-2
    var add = function(a,b){
        return  a + b;
    }


    //函数调用
    var result = add(10,20);
    alert(result);
    


</script>
</html>

对象

Array

定义：var 变量名 = new Array(元素列表); var 变量名 = [元素列表];

属性：length设置或返回数组中元素的数量

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

<!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

定义：var 变量名 = new String("···"); var 变量名 = "···";

属性：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);

    //length
    console.log(str.length);

    //charAt
    console.log(str.charAt(4));

    //indexOf
    console.log(str.indexOf("lo"));

    //trim
    var s = str.trim();
    console.log(s);

    //substring(start,end) --- 开始索引, 结束索引 (含头不含尾)
    console.log(s.substring(0,5));

</script>
</html>

JSON(通过JavaScript对象标记法书写的文本)

自定义对象：定义var 对象名={ 属性名1:属性值1, 属性名2:属性值2, 属性名3:属性值3, 函数名称:function(形参列表){} };

调用对象名.属性名；对象名.函数名；

JSON：var 变量名 = '{"key1": value1, "key2": value2 }';

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();


    //定义json
    var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
    alert(jsonstr.name);

    //json字符串--js对象
    var obj = JSON.parse(jsonstr);
    alert(obj.name);

    //js对象--json字符串
    alert(JSON.stringify(obj));


</script>
</html>

BOM

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

组成：

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

Window

获取：直接使用window，其中 window. 可以省略

属性：

history: 对 History 对象的只读引用
location: 用于窗口或框架的 Location 对象
navigator: 对Navigator 对象的只读引用

方法：

alert(): 显示带有一段消息和一个确认按钮的警告框
confirm(): 显示带有一段消息以及确认按钮和取消按钮的对话框
setlnterval(): 按照指定的周期(以毫秒计)来调用函数或计算表达式
setTimeout(): 在指定的毫秒数后调用函数或计算表达式

Location

属性：

href: 设置或返回完整的URL

<!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);




    //location
    alert(location.href);

    location.href = "https://www.itcast.cn";

</script>
</html>

DOM

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

将标记语言的各个组成部分封装为对应的对象

Document: 整个文档对象
Element: 元素对象
Attribute: 属性对象
Text: 文本对象
Comment: 注释对象

JavaScript 通过DOM，就能够对HTML进行操作

改变 HTML 元素的内容
改变 HTML元素的样式(CSS)
对 HTML DOM 事件作出反应
添加和删除 HTML 元素

DOM是 W3C 的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分

Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML文档的标准模型
- Image：<img>
- Button：<input type='button'>

获取Element元素对象

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的
Document对象中提供了以下获取Element元素对象的函数
- 根据id属性值获取，返回单个Element对象 var h1 = document.getElementById('h1');
- 根据标签名称获取，返回Element对象数组 var divs = document.getElementsByTagName('div');
- 根据name属性值获取，返回Element对象数组 var hobbys = document.getElementsByName('hobby');
- 根据clas属性值获取，返回Element对象数组 var clss= document.getElementsByClassName('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">123</div>   <br>
    <div class="cls">456</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>

<script>
    //1. 获取Element元素

    //1.1 获取元素-根据ID获取
    // var img = document.getElementById('h1');
    // alert(img);

    //1.2 获取元素-根据标签获取 - div
    // 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[0];
    
    div1.innerHTML = "666";

</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-对象-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. 点亮灯泡 : src 属性值
    var img = document.getElementById('h1');
    img.src = "img/on.gif";


    //2. 将所有div标签的内容后面加上: very good (红色字体) -- <font color='red'></font>
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        const div = divs[i];
        div.innerHTML += "<font color='red'>very good</font>"; 
    }


    //3. 使所有的复选框呈现选中状态
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        const check = ins[i];
        check.checked = true;//选中
    }

</script>
</html>

事件监听

事件绑定

方式一：通过 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').onclick=function(){
  alert('我被点击了!');
    }
</script>

常见事件

事件名
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="checkAll()"> 
    <input type="button" value="反选" onclick="reverse()">

</body>

<script>

    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclick
    function on(){
        //a. 获取img元素对象
        var img = document.getElementById("light");

        //b. 设置src属性
        img.src = "img/on.gif";
    }

    function off(){
        //a. 获取img元素对象
        var img = document.getElementById("light");

        //b. 设置src属性
        img.src = "img/off.gif";
    }



    //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblur
    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. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    function checkAll(){
        //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.js - 渐进式 JavaScript 框架

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写

基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上

快速入门

新建 HTML 页面，引入Vue.js文件
在JS代码区域，创建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">
        <input type="text" v-model="message">
        {{message}}
    </div>

</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>
</html>

插值表达式

形式：

内容可以是：

变量

三元运算符

函数调用

算术运算

常用指令

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

v-bind和v-model

<!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-指令-v-bind</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>

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

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           url: "https://www.baidu.com"
        }
    })
</script>
</html>

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

v-on

<!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-指令-v-on</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <input type="button" value="点我一下" v-on:click="handle()">

        <input type="button" value="点我一下" @click="handle()">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            handle: function(){
                alert("你点我了一下...");
            }
        }
    })
</script>
</html>

v-if、v-show

<!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-指令-v-if与v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>

        <br><br>

        年龄<input type="text" v-model="age">经判定,为:
        <span v-show="age <= 35">年轻人(35及以下)</span>
        <span v-show="age > 35 && age < 60">中年人(35-60)</span>
        <span v-show="age >= 60">老年人(60及以上)</span>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
</script>
</html>

v-for

<!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-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <div v-for="addr in addrs">{{addr}}</div>

        <hr>

        <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {
            
        }
    })
</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>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 style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>
</html>

生命周期

生命周期：指一个对象从创建到销毁的整个过程
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)

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

<!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-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

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

Ajax

概念：Asynchronous JavaScript And XML，异步的JavaScript和XML

作用

数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想、用户名是否可
用的校验等等

原生Ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生Ajax</title>
</head>
<body>
    
    <input type="button" value="获取数据" onclick="getData()">

    <div id="div1"></div>
    
</body>
<script>
    function getData(){
        //1. 创建XMLHttpRequest 
        var xmlHttpRequest  = new XMLHttpRequest();
        
        //2. 发送异步请求
        xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
        xmlHttpRequest.send();//发送请求
        
        //3. 获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
            }
        }
    }
</script>
</html>

Axios

请求方式别名

axios.get(url [,config])

axios.delete(url [,config])

axios.post(url [,data[,config]])

axios.put(url [,data[,config]])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    
    <input type="button" value="获取数据GET" onclick="get()">

    <input type="button" value="删除数据POST" onclick="post()">

</body>
<script>
    function get(){
        //通过axios发送异步请求-get
        // axios({
        //     method: "get",
        //     url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
        // }).then(result => {
        //     console.log(result.data);
        // })


        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            console.log(result.data);
        })
    }

    function post(){
        //通过axios发送异步请求-post
        // axios({
        //     method: "post",
        //     url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
        //     data: "id=1"
        // }).then(result => {
        //     console.log(result.data);
        // })

        axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
            console.log(result.data);
        })
    }
</script>
</html>

表格案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios-案例</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>

            <tr align="center" v-for="(emp,index) in emps">
                <td>{{index + 1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span v-if="emp.gender == 1">男</span>
                    <span v-if="emp.gender == 2">女</span>
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
       el: "#app",
       data: {
         emps:[]
       },
       mounted () {
          //发送异步请求,加载数据
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            this.emps = result.data.data;
          })
       }
    });
</script>
</html>

Element

Element - 基于Vue2

Element - 基于Vue3

Element：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的桌面端组件库
组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等

快速开始

下载：npm install element-ui

引入：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

HTML

快速入门

标签

CSS

引入方式

选择器

属性

盒子模型

JavaScript

引入方式

基础语法

书写语法

输出语句

变量

数据类型、运算符、流程控制语句

函数

对象

Array

String

JSON(通过JavaScript对象标记法书写的文本)

BOM

Window

Location

DOM

获取Element元素对象

事件监听

事件绑定

常见事件

Vue

快速入门

常用指令

生命周期

Ajax

Axios

Element

快速开始

常见组件

Table表格

Pagination分页

Dialog对话框

Form表单