Teo – 第4页 – Be a low-key





前端         - 2023.9.15 -


    VScode 下载地址　https://code.visualstudio.com/

    https://www.w3school.com.cn/tags/index.asp         // html 使用文档

VScode 使用

    变中文
        扩展(Extensions) --> chinese(搜索) --> install --> 右下角提示 重启
    中英文之间切换
        Ctrl+Shift+p  -->  configigure display language

    扩展 插件
        1. Chinese(Simplified)Language Pack   // 中文语言包
        2. Code Spell Checker                 // 拼写检查器  自动检测单词是否正确
        3. HTML CSS Support                   // 样式表的 自动补全
        4. JavaScript(ES6)code snippets       // 支持ES6 语法提示
        5. Mithril Emmet                      // 补全代码
        6. Path Intellisense                  // 路径提示插件
        7. Vue 3 Snippets                     // 快速创建常用的Vue组件和指令 可能与其他有冲突
        8. VueHelper                          // 最好的vue代码提示插件
        9. Auto Close Tag                     // 自动闭合HTML/XML标签
        10. Auto Rename Tag                   // 自动完成另一侧标签的同步修改
        11. beautify                          // 格式化 html js css
        12. Bracket Pair Colorizer            // 给括号加上不同的颜色
        13. open in browser                   // 快速打开浏览器  Alt + B
        14. Vetur                             // Vue多功能集成插件 包括 语法高亮 智能提示 错误提示 自动补全等
        15. InteIIiJ IDEA Keybindings         // 在 VScode中使用 IDEA快捷键

    快捷键
        0. !                          // 生成 网页的 基本配置
        1. Shift + Alt + F            // 格式化代码
        2. Alt + ↓                    // 向下移动一行
        3. Shift + Alt + ↓            // 复制一行
        4. Ctrl + H              
        5. Ctrl + Enter               // 光标指向下一行
        6. h$*5                       // 生成  1 - 5 标题标签
        7. Alt + b                    // 打开浏览器查看结果  需要安装 open in browser插件
        8. ul>li*3                    // 生成无序列表
        9. table>tr*3>td*2{单元格}     // 创建三行两列的表格 td里面的 文本信息是 单元格
        10. Ctrl + B                  // 隐藏目录栏

    注: 
        使用 VScode 编辑 vue 代码的时候 不能使用 快捷键 添加注释 首先检查有下角 选择语言模式是不是 vue类型  
        VScode 默认不支持vue 类型 如果其中没有vue类型 可能是插件冲突
        卸载有关 vue的插件. 重新按照 vetur 及 VueHelper插件


Avue 

    一. 在 Avue 中 添加 按钮 并 弹出窗口 需要的代码
        <avue-crud                       // 按钮 需要在 <avue-crud> 标签中添加
            <template #menu-left>        // 添加一个按钮 有多个按钮 在里面添加 <el-button>  其中 #menu-left 在窗口的 左侧添加按钮
                <el-button type="primary" v-if="permission.recruitBasisAmount_modify" @click="handleRecruitBasisAmount">批量修改招募基础金额</el-button>
            </template>
        </avue-crud>

        // 对话框窗口信息 (点击按钮后 弹出的 对话框窗口信息) 在 <avue-crud> 外添加
        <el-dialog :title="'批量修改招募基础金额'" append-to-body v-model="boxRecruitBasisAmount" width="600px" :fullscreen="dialogFull" v-if="boxRecruitBasisAmount">
          <div class="avue-crud__dialog__header">
            <div style="padding-right:40px" @click="dialogFull ? dialogFull = false : dialogFull = true">
              <i class="el-icon-full-screen"></i>
            </div>
          </div>
          <avue-form :option="optionRecruitBasisAmount" v-model="recruitBasisAmountModel"></avue-form>
          <div style="text-align:center; color: #f6a60c;">
            招募基础金额为普通合伙人每笔订单收益金额,当每日交易单数满足系统设置交易单数时,(普通合伙人分红金额=招募基础金额*单数)
          </div>
          <div style="text-align:center; margin-top: 10px">        // 新增了 确定 和 取消 按钮 隐藏溜原来的 提交 按钮
            <el-button type="primary" @click="confirmRecruitBasisAmount">确定</el-button>
            <el-button type="primary" @click="cancelRecruitBasisAmount">取消</el-button>
          </div>
        </el-dialog>

        <script>
            import { recruitBasisAmountModify } from "@/api/account/custReachStandardCaptain";  // recruitBasisAmountModify 导入 发送后端的接口
            import { optionRecruitBasisAmount } from "@/option/account/captain";   // 导入 option 这里option在另一个文件中. 如果在同一文件中则不用导入

        export default {
          data () {
          return {
              optionRecruitBasisAmount: optionRecruitBasisAmount,         // 指明 option 
              recruitBasisAmountModel: {},                                // 代表 option 从后端 获取到的数据
              boxRecruitBasisAmount: false,                               // 对话框窗口 默认设置为关闭

        methods: {
            // 批量修改招募基础金额  点击按钮后的 操作
            handleRecruitBasisAmount(){
              if (this.selectionList.length === 0) {             // 如果没有选择复选框 则给出提示
                this.$message.warning("请选择需要修改的合伙人");
                return;
              }
              this.recruitBasisAmountModel = {};                 // 在 option 中 字段中的数据
              this.boxRecruitBasisAmount = true;                 // 显示 弹出窗口对话框    
            },
            confirmRecruitBasisAmount(){                         // 点击确定按钮后的操作
              const basisAmount = this.recruitBasisAmountModel.recruitBasisAmount ;   // 获取文本框或下拉列表框中的数据
                                                             // .recruitBasisAmount 是 option 中 字段名 prop: "recruitBasisAmount", 的数据
              const reg = /^\d{1,4}(\.\d{1,4})?$/;           // 正则表达式规则，确保输入为数字（整数或小数,小数点前后个最多四位）最多万位以下
              if (!reg.test(basisAmount)) {                  // 检测 获取到的数据 是否符合
                this.$message.warning('输入有误,请重新输入');
                return;
              }
              const custIdArr = this.selectionList.map(item => item.custId).filter(id => id);
              const custId = custIdArr.join(',');            // 数组 转成 字符串 使用 逗号 分割
              recruitBasisAmountModify({                     // 调用 传入后端的接口 把 数据 传递给后端
                custId: custId,
                basisAmount: basisAmount,
              })
              .then(response => {                            // 前端返回 成功后的 处理
                console.log(response.data);
                this.$message.success('修改成功');
                this.boxRecruitBasisAmount = false;
                this.onLoad(this.page, this.query);           // 重新加载当前页面
              })
              .catch(error => {                               // 前端返回 失败后的 处理
                console.error('修改失败', error);
                this.boxRecruitBasisAmount = false;
              });
            },
            cancelRecruitBasisAmount() {                      // 点击 取消按钮 的操作
              this.recruitBasisAmountModel = {};
              this.boxRecruitBasisAmount = false;
            },


        custReachStandardCaptain.js
            export const recruitBasisAmountModify = (params) => {
              return request({
                url: '/api/fss-account/CustReachStandardCaptain/recruitBasisAmountModify',
                method: 'get',
                params: {
                  ...params,
                }
              })
            }


        captain.js
            export const optionRecruitBasisAmount = {
              menuBtn: false,
              column: [
                {
                  label: "招募基础金额",
                  prop: "recruitBasisAmount",
                  rules: [
                    {
                        required: false,
                        message: "请输入招募基础金额",
                        trigger: "blur",
                    },
                  ],
                  labelWidth: 190,
                  span: 24,
                },
              ]
            };


        注: 
            this.selectionList                                             // 可以获取到 页面中 复选框中的 数据
            this.selectionList.length                                      // 复选框中的 数据 的长度
            this.selectionList.map(item => item.custId).filter(id => id);  // 可以获取到 custId
            this.$message.warning("请选择需要修改的合伙人");                 // 警告 提示信息  会在页面显示警告信息
            const reg = /^\d{1,4}(\.\d{1,4})?$/;
                reg.test(basisAmount)                                      // 检测 正则的规则是否匹配
            custIdArr.join(',');                                           // 数组类型 转成 字符串
            this.onLoad(this.page, this.query);                            // 重新加载当前页面



    Avue3 报错解决: 
        1. 错误提示: TypeError: Cannot read properties of null (reading 'style') at TableLayout.setHeight 
            在Avue中  新添加的页面vue2 转成vue3 会出现这种情况
            解决: 在 option 中  calcHeight: "auto",    去掉就好


标签

    骨架标签
        <!DOCTYPE html>        // H5 的声明 网页必备组成部分 用于浏览器识别

        <html>
            <head>
                <title>java html python</title>      // title标签是 head里必须包括的 一般写关键字 seo优化利于
                <meta charset="utf-8">               // utf-8 是程序的通用语言
            </head>
        </html>


    标题标签
        <h1>aaaaa</h1>         // 标题标签   1最大   6最小
        <h2>bbbb</h2>
        <h3>cccc</h3>

        <h1 align="left">
        align="left|center|right"    // align 就是一个属性 "left" 是属性值
        标签的属性   在标签<h1 align="left">里面的是属性  不是两个<h1>不是属性</h1>中间的

    段落格式标签
        <p></p>                      // 段落标签      双标签  
        <br>                         // 换行标签           单标签 <br /><br>  都可以
        <hr>                         // 水平线标签
            color="red" : 设置水平线的颜色
            width="300px" : 设置水平线的长度
            size="20px" :  设置水平线的高度
            align="left|right": 设置水平线的对齐方式 默认居中 可取值 left|right

    图片标签
        <img>                    // 图片标签
            src="1.jpg"          // 图片路径
            alt="图片走丢了..."  // 当图片路径不存在时 会显示碎裂的效果并 加上这段文字
            width="300px"        // 规定图片的宽度 单位是 px  另一个但是百分比 相当于父元素的百分比
            height="100px"       // 高度 设置图片会变形 一般不设置这个属性 宽度和高度设置其中一个另一个会等比例缩放
            title="哇"           // 鼠标悬停在图片上给于的提示信息

    超链接标签
        <a></a> 超链接标签   可以嵌套其他标签 如 <img>实现图片跳转
            href="#"      // 跳转本页

            <a href="https://www.baidu.com/">超链接</a>  // 超链接标签 地址也写全 否则不能跳转
                href="https://www.baiu.com"   // 必须的属性 跳转的链接  如果没有 会以文本显示
        
        href="https://baidu.com"  // 跳转的链接
        target="_blank"           // 打开方式
            _blank                // 新开窗口
            _self                 // 当前窗口  默认的

    文本标签                      // 可以互相嵌套
        <em>大米粥</em>           // 定义着重文字
        <b>大米粥</b>             // 定义粗体文本
        <i>大米粥</i>             // 定义斜体字
        <strong>大米粥</strong>   // 定义加重语气
        <del>大米粥</del>         // 定义删除字
        <span>大米粥</span>       // 没有特定含义 可在CSS中方便调整样式

    有序列表                      // 可以嵌套列表
        <ol type="I">                     // 定义一个有序列表  有顺序标号
            <li>哈哈</li>
            <li>嘎嘎</li>
        </ol>
            type="I"              // <ol></ol> 的属性 可调整 显示样式 默认 1 2 3

    无序列表
        <ul type="none">                     // 一般多用于 导航 可用CSS调整
            <li>哈哈</li>
            <li>嘎嘎</li>
        <ul>
            type="disc|circle|square|none"   // 默认disc 小黑原点|实心圆|空心圆|什么都没有

    表格标签: 
        <tr></tr> 行
        <th></th> 表头  就是 行里面的文字 加粗 居中显示
        <td></td> 单元格 列 (一般所有列的数目相等)
            <table>                        // 三行两列
                <tr>
                    <td>单元格</td>
                    <td>单元格</td>
                </tr>
                <tr>
                    <td>单元格</td>
                    <td>单元格</td>
                </tr>
                <tr>
                    <td>单元格</td>
                    <td>单元格</td>
                </tr>
            </table中属性>

            table中属性
                border="1"            边框
                cellspacing="0"       设置边框中间的空白是0
                width="400px"         宽度 px可以省略
                height="200px"        高度

            表格合并 <td> 中的属性
                colspan="3"         // 水平合并3个单元格 合并3个列 有这个属性就少写2个列
                    <td colspan="2">单元格</td>    // 此单元格 占两个位置
                    <td>单元格</td>                // 一共3个列
                rowspan="2"         // 垂直合并2个单元格  合并以坐上为基准 其他删除

    Form表单
    <form action="" method="get"></form>  // 表单容器
        action="https://www.baidu.com"    // 必须有 请求给到后端服务器
        method="get|post"                 // 必须有 请求的方式 get提交的数据url可以看到,post看不到  默认是get

    <form action="https://www.baidu.com" method="get|post" name="myform">
        <input>                                       // 输入框  默认type是 text类型
        <input type='text'>                           // 文本输入框 type是表单类型
        <input type="submit">                         // 提交按钮
        用户名:<input type="text" name="username">     // 文本输入框 那么值是标记 用于调用
        密码:<input type="password" name="pwd">        // 密码输入框
    </form>

    <input>   单标签   用于 form表单里面
        <input type="text" name="username">
            name="username"                  // 用于用户名或密码必须有 名字 用于后面调用 样式等
            type='text|password|submit'      // 必须有 类型 定义 <input>标签的类型
                text       文本输入框
                password   密码输入框
                submit     提交按钮
            value="登录"                     // 更改 提交按钮的 文本 把提交改成登录. 配合submit使用  

    块元素  换行  独占一行(自上而下垂直排列) 可以设置 width height 属性 一般块元素可以包含行元素和其他块级元素
        
        <div></div>
        <form action=""></form>
        <h1></h1>
        <hr>
        <p></p>
        <table></table>
        <ol></ol>
        <ul></ul>

    内联元素(行内元素)  不换行 行元素会不占页面中的一行, 只占自身的大小,可以设置width.  
                       不能设置height 一般内联元素包含内联元素,不包含

        <a href="#"></a> 
        <b></b>
        <em></em>
        <i></i>
        <span></span>
        <strong></strong>

        行内块级元素     不换行   能够识别宽高

        <button></button>
        <img src="" alt="">
        <input type="text">

    容器标签
        <div> 容器 结构标签       本身没有任何效果 可以理解为 没有边的方框

    视频 video
        <video src="1.mp4"></video>
            controls="controls"     // 播放控件 如果 属性 = 属性值 可把属性值省略 如下
        <video src="./video/1.mp4" controls width="200px"></video>

    音频 audio
        <audio src="" controls></audio>      // 用法跟video 一样


    div 盒子模型
        <div></div>

        盒子模型组成:
            content: 内容区域
            padding: 内边距区域
            border:  边框区域

            margin: 外边框区域    不属于 盒子模型里面的  外边距
        
        div 中 CSS的样式
        div{
                width: 200px;                 // 盒子的宽  定义了内容区域的宽
                height: 200px;                // 盒子的高  定义了内容区域的高
                box-sizing: border-box;       // 边界 如果有此代码 上面定义的宽高是 整个盒子的大小 前三区域的
                background-color: #33cfeb;    // 盒子的背景色 便于观察而已 前三区域的
                padding: 20px 20px 20px 20px; // 内边距大小 分别是 上 右 下 左 的距离 如果都相同 可只写一个 padding: 20px;
                border: 10px solid red;       // 边框大小 solid red 线条的颜色
                margin: 30px 30px 30px 30px;  // 外边距大小 不属于盒子内部的大小 也是上右下左的顺序 如果指定一个值是 上右下左
                margin: 0 auto;               // 如果指定三个值是 上 右 下   如果指定两个值是 上下 和 左右 . 
            }                                 // 此设置是居中 上下是0 左右自动设置 自动就是居中


CSS样式:

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

    style  是 css 的样式 行内样式和内嵌样式
    
    选择器
        <h1 id="idname" class="cls">set id CSS<h1/>
        元素选择器
            h1 { ... }
        id选择器   根据id的属性 设置   id是唯一值
            #idname { ... }
        类选择器   根据class属性 设置  class 可以重复
            .cls { ... }
        优先级: id > 类 > 元素

    属性

        color: 颜色的三种表示方法
            color: hotpink;
            color: rgb(155, 0, 155);
            color: #2235ff
        font-size: 24px;
        text-decoration-line
            a {text-decoration-line: none;}        // 定义 超链接 没有下划线


JavaScript                        // 用于和 后端 交互

    <script></script>             // 在html页面的任意地方 放置任意数量的<script>  一般会放在<body>底部
    <script>                      // 第一种 内部脚本 直接写 js 代码
        alert('hello js');        // 代码结尾以 ; 结尾 但是可以省略 不建议省略
    </script>
    
    <script src="./js/demo.js"></script>    // 第二种 外部脚本 同css一样 在文件中不用写<script></script>


    注释: //  和    /* ... */

    { ... }  代码块  作用域

    输出语句
        window.alert("aaaaaa");       // 提示框
        alert("aaaaaa");              // 上面的 window 可以省略
        document.write("bbbbbb");     // 输出到 html 页面
        console.log("ccccccc");       // 输出到 控制台  控制台在 F12的console页面

    变量的定义
        var 定义一个全局变量  可重复声明  即使在 代码块中{  }声明变量 在外面也可调用
            var a = 10;                   // var 是定义一个全局变量 并赋值 10  
            a = "张三";                    // JS是弱类型语言 变量可存储不同类型的值
            var a = 100;                   // 可以重复声明
        let 定义一个局部变量  只在代码块中有效 不可以重复声明
            let b = 10;
            alert(b);
        const 定义一个常量  不可以改变
            const c = 200;
            alert("c=" + c);

    数据类型
        number:     // 数字     可直接 定义
        string:     // 字符串   使用 单引号或 双引号定义的 是字符串
        boolean:    // 布尔     true false
        null:       // 对象为空 会返回 object 类型
        undefined:  // 当声明的变量未初始化时, 该变量的默认值是undefined
    
    typeof 变量            // 可以获取变量值的类型
        var a = 10;
        alert(typeof a);   // 获取到类型 输出

    运算符                  // 同java一样
        算术运算符: +   -   *    /    %    ++   --
        赋值运算符: =   +=  -=   *=    /=   %=
        比较运算符: >   <   >=   !=    ==   ===         // == 会进行类型转换   ===不会进行类型转换
        逻辑运算符: &&   ||  !
        三元运算符: 条件表达式?true_value:false_value

    类型转换

        字符串转数字 parseInt
            1. 如果是纯数字的字符串 会转换成 数字
            2. 如果开头是数字 中间有字母 只会转换前面的数字
            3. 如果开头是字母 结果为 NaN
            parseInt("100")                   // 将 string 转换成 number
            parseInt("12a45");         // 结果为 12  会从头匹配 遇到字母 取之前匹配的值
            parseInt("a45");           // 结果为 NaN   不是一个字母 not a number 
                var a = '1231456';
                alert("a=" + typeof(a));
                a = parseInt(a);
                alert("a=" + typeof(a));

        其他类型转换为boolean
            1. number: 0和NaN 为false 其他均为 true
            2. string: 空字符串为false 其他均为 true
            3. null 和 undefined: 为 false

    流程控制
        if(0){}         // 这里会把 0 转换成 boolean 类型
        if(null){}
        switch

        for
        while
        do ... while

    函数
        定义函数: 
            1. 定义函数 不需要 指明  参数类型  使用 function 定义函数
            2. 不需要指明 方法返回值 有返回值 直接return就可以
            方式一:
                function 函数名(参数1,参数2){}
            方式二:
                var fname = function (参数1,参数2){}     // 相当于 使用 变量 去接收函数

        调用函数:
            函数名(实际参数列表)
        方式一:
            function add(a,b){
                return a + b;
            }
            var result = add(10,20);
            alert(result);

        方式二:
            var fname = function(c,d){
                return c - d;
            }
            var result2 = fname(50,33,40,50);      // 传参的时候可以传递多个，但是只有前两个能接收，其他忽略
            alert(result2);

        箭头函数:  当函数作为参数的时候 可以简写 函数
            (...) => {...}        // function(...){...}   function可以省略 

    JS对象
      基础对象
        
        1. Array  数组对象
            定义数组对象
                方式一: var 变量名 = new Array(元素列表);
                    # var arr = new Array(1,2,3,4);
                方式二: var 变量名 = [元素列表];
                    # var arr = [1,2,3,4];
            调用数组
                arr[索引]=值;
                # arr[10] = "hello";

                # var arr = new Array(1,3,5,7);
                # alert("第二个元素是：" + arr[1]);
                # alert(arr[9]);                    // 未被赋值的变量的值是 undefined
                # arr[10] = 15;                     // 没有10号索引 也可以赋值 不会报错
                # alert(arr[10]);

            属性 
                length: 获取数组的长度

                for循环遍历数组     遍历数组的所有元素 包括没有值的元素 和 forEach 方法有所区别
                    # var arr= [2,4,6,8,9];
                    # for (let i = 0; i < arr.length; i++) {
                    #     alert(arr[i]);
                    # }
            方法:
                forEach(函数)  遍历数组中的每个有值的元素,并调用一次传入的函数.
                    # var arr= [2,4,6,8,9];
                    # arr.forEach(function(e) {
                    #     console.log(e);
                    # })

                push()     将新元素添加到数组的末尾,并返回新的长度. 
                    # var arr= [2,4,6,8,9];
                    # arr.push(7,8,9);
                    # console.log(arr);
                splice(2,2)   从数组中删除元素.  从第2号索引开始删除  删除2个元素
                    # var arr= [2,4,6,8,9];
                    # arr.splice(2,2);
                    # console.log(arr);

        2. String  字符串对象
            定义数字符串对象
                方式一: var 变量名 =  new String("变量值");
                    # var s = new String("哈哈");
                方式二: var 变量名 = "变量值";
                    # var s = "嘎嘎";

            属性:
                length: 获取字符串的长度
                # var s ="aaaa";
                    # console.log(s.length);
            方法:
                charAt(num.)   返回指定位置的字符
                indexOf(string)  检索字符串位置 查找字符 在字符串中的位置
                    # var s ="abcdefg";
                    # console.log(s.length);
                    # console.log(s.charAt(2));
                    # console.log(s.indexOf("c"));
                trim()     去除字符串两边的空格  返回一个新字符串
                    # var s1 = "  爆米花呀真好吃！ "
                    # var ss = s1.trim();
                    # console.log(s1);
                    # console.log(ss); 
                substring(start,end)       字符串截取  开始索引和结束索引 函头不含尾  空格也算
                    # var s1 = "  爆花米呀真好吃！ "
                    # var s2 = s1.substring(3,6);
                    # console.log(s2);

        自定义对象
            var 对象名 = {
                属性名1: 属性值,
                属性名2: 属性值，
                属性名3: 属性值，
                函数名称: functio(参数){},

            }


            # var user = {
            #     name: "tom",
            #     age: 10,
            #     eat: function(){
            #         alert("吃");
            #     },
            #     play(){              // 函数的 简写方法
            #       alert("玩");
            #     },                   // 最后一个逗号可省略 最好加上
            # }

            # alert(user.name);
            # user.eat();

        3. JSON 对象     与自定义对象大致相同 都是"key": "value",  成对查询 但是需要所有的key都引号
                      以逗号,结尾  在最后一个值的时候 不加 逗号, 
                      在定于数组中最后一个值 不加逗号,
            {
                "key1": "value1",
                "key2": "value2",
                "key3": "value3"

            }

            JSON 中的 value值 的数据类型  及  书写方式
                数字(整数或浮点数)  直接写
                字符串             双引号中   "janice"
                逻辑值             直接写 true false
                数组               方括号中  值加引号 最后一个值不加逗号,   ["北京","上海","广州"]  
                对象               花括号中
                null
                手

        JSON方法     将 json对象 转换成  js的对象
            JSON.parse(json);
                # var jsonstr1 = '{"name":"janice","age":"22"}';
                # var jsonstr2 ='{"name":"Teo","age":"18","addr":["北京","上海","广州"]}';
                # var j = JSON.parse(jsonstr1);
                # console.log(j.name);
                # var jsonstr3 = JSON.stringify(j);
                # console.log(jsonstr3);

      BOM对象 浏览器对象模型
        1. Window       可直接使用 window.  调用
          属性 
            history
            location
            navigator
          方法
            alent()                        弹出 消息框  警告框
            confirm()                      弹出 确认框  带有确定和取消按钮 返回一个 boolean值
                # window.alert("Hello bom");
                # var flag = window.confirm("您确认删除改记录吗?");
                # window.alert(flag);

            setInterval(Function,Number)   定时器 重复调用函数  参数分别是 函数 和  毫秒数
            setTimeout(Function,Number)    定时器 调用函数一次
                # var i = 0;
                # function f(){
                #     i++;
                #     console.log("执行第" + i + "次");
                # };
                # window.setInterval(f,2000);
                # window.setTimeout(f,5000);    

        2. Locaton  地址栏对象
          属性 
            href  获取浏览器的地址
                # var i = location.href;                  // 获取浏览器地址
                # alert(i);
                # location.href = "https://www.baidu.com";  // 可实现跳转

        3. Navigator     浏览器对象
        4. Screen        屏幕对象
        5. History       历史记录对象  上一步  下一步

    DOM 文档对象    把整个 html 的 每一个部分 封装成了对象 通过对象来改变 数据
        Document:  整个文档对象
            document.getElementById('id')            根据 id 属性 获取  返回一个Element 对象
            document.getElementsByTagName('标签')     根据 标签 获取 返回一个数组
            document.getElementsByName('name')        根据 name 属性 获取 返回一个数组   
            document.getElementsByClassName('class')  根据 class 属性 获取 返回一个数组
        
            # <img id="img1" src="./img/news_logo.png">
            # <div class="food">爆米花</div>
            # <div class="food">大米粥</div>
            # <input type="checkbox" name="hobby">旅游
            # <input type="checkbox" name="hobby">学习
            # <input type="checkbox" name="hobby">英语# 

            # var j = document.getElementById('img1');
            # alert(j);
            # var arr1 = document.getElementsByTagName('div');
            # for (let i = 0; i < arr1.length; i++) {
            #     alert(arr1[i]);
            # }
            # var arr2 = document.getElementsByName('hobby');
            # for (let i = 0; i < arr2.length; i++) {
                alert(arr2);
            # }
            # var arr3 = document.getElementsByClassName('food');
            # for (let i = 0; i < arr3.length; i++) {
            #     alert(arr3[i]); 
            # }

            # var v1 = arr1[1];      取出数组的数据 类型为  Element对象
            # v1.innerHTML = "火龙果呀真好吃";    调用           innerHTML 设置或返回元素的内容。

        查询 标签封装成对应属性的方法
            Browser Side --> 参考书 --> HTML对象 --> <div> --> Div 对象支持标准属性和事件 --> 属性 --> innerHTML
            Browser Side --> 参考书 --> HTML对象 --> Image 对象属性

        给 img 换图片  div追加字  input 勾选复选框
            # <img src="./img/1.png">
            # <div>爆米花</div>
            # <div>大米粥</div>
            # <div>棉花糖</div>
            # <div>火龙果</div>
            # <input type="checkbox" name="hobby">睡觉
            # <input type="checkbox" name="hobby">学习
            # <input type="checkbox" name="hobby">发呆

            # var arr1 = document.getElementById('img1');
            # arr1.src = './img/2.png';

            # var arr2 = document.getElementsByTagName('div');
            # for (let i = 0; i < arr2.length; i++) {
            #     const e = arr2[i];
            #     e.innerHTML += "<font color='red'>呀真好吃</font>";           //<font> 可给字体加红色
            # }

            # var arr3 = document.getElementsByName('hobby');
            # for (let i = 0; i < arr3.length; i++) {
            #     const e = arr3[i];
            #     e.checked = true;
            # }

        Element:   元素对象
        Attribute: 属性对象
        Text:      文本对象
        Comment:   注释对象

    JS事件绑定
        两种单机绑定方式
            1. 在标签内 添加 onclick 属性 , 属性值是调用函数  对应函数在 JS中给出即可
            2. 直接在JS中 根据id绑定到标签 element对象调用 onclick 属性, 此属性值是 函数
            # <input type="button" value="不要点我呀！！" onclick="on()">
            # <input type="button" value="点我呀！！" id = "click_me">

            # function on() {
            #     alert("不要点我呀 ...");
            # }

            # var cl = document.getElementById('click_me');
            # cl.onclick = function(){
            #     alert("使劲点呀 ...  ")
            # }

        常用事件
            onclick        鼠标单机事件
            onblur         元素失去焦点
            onfocus        元素获得焦点
            onload         某个页面或图像被完成加载
            onsubmit       当表单提交时触发该事件
            onkeydown      某个键盘的键被按下
            onmouseover    鼠标被移动到某元素之上
            onmouseout     鼠标从某元素移开


..................................................................................................................

VUE
    
    vue2 官网: https://v2.cn.vuejs.org/v2/guide/
        两种方式 引入  vue 
            1. 使用  脚手架
            2. 使用 <script> 引入
                在官网 https://v2.cn.vuejs.org/v2/guide/ --> 下载 vue.js 的开发版本
                参考下面的 根据入门程序中的引入 
        安装 谷歌浏览器的开发者共计 Devtools 工具  
            可以在 此网站 下载  https://chrome.zzzmh.cn/  -->  Devtools
            谷歌浏览器 --> 扩展程序 --> 管理扩展程序 --> 开发者模式 --> 把下载好的拖入即可 --> 打开 开关

        关于 首次 打开 浏览器 --> 控制台的 两个提示
            1. 提示 安装 Devtools 工具 . 安装上面的步骤安装上就会消失.
            2. 提示 不要在成产环境中使用 开发版本. 可以在 Vue.config 配置文件中 改变 productionTip:false 即可
                设置为false以阻止vue在启动时生成生产提示。  // 我用没生效 我也不知道为什么
                <body>
                    <script type="text/javascript" >
                        Vue.config.productionTip = false
                    </script>
                </body>


  VUE 入门程序
    <head>
        <script src="js/vue.js"></script>    // 使用 <script> 引入
    </head>                                  // 引入后 在浏览器的控制台中 键入 Vue  可以看到函数


    <div id="app">
        <input type="text" v-model="message">   // v-model 为 vue中的 指令
        {{message}}
    </div>

    <script>
    new Vue({           // 创建个 vue 对象
        el: "#app",     // el 是 element 简写 意思是 元素 相当于css的 id选择器 把 id是app的标签交到 vue代管
        data: {
            message: "hello vue"
        }
    })

    </script>

    指令
        v-bind       可简化为: 省略v-bing 为HTML标签绑定属性值，如设置href css 样式等
        v-model      在表单元素上创建双向数据绑定
        v-on         为HTML标签绑定事件 click为单机事件
            <script src="js/vue.js"></script>
            <div id="app">
                <a v-bind:href="url">最牛逼的网站！！！！</a>    // url 相当于 变量
                <a :href="url">最牛逼的网站！！！！</a>          // v-bind 可以省略
                <input type="text" v-model="url">  // 双向数据绑定 会获取 下面的 url的值 如果这个值改变了 其他值也会跟着改变
                <input type="button" value="点我点我！！" v-on:click="handle()">
                  <input type="button" value="点我点我啊！！" @click="handle()">      // v-on 的缩写
            </div>

            <script>
            new Vue({
                el: "#app",
                data: {                                      // 数据模型中 声明 变量值的地方
                    url: "https://www.syk.my"            // 定义 url 的值
                },
                methods: {                                   // 声明方法的地方 与变量值的地方同级别             
                    handle: function(){                      // handle 方法
                        alert("讨厌... 你点我了一下...");
                    }
                }
            })
            </script>

        v-if
        v-else-if    条件性的渲染某元素，判定为true时渲染，否则不渲染
        v-else
        v-show       根据条件展示某元素，区别在于切换的是display属性的值
            <script src="js/vue.js"></script>

            <div id="app">
                <input type="text" v-model="age">
                <span v-if="age <= 40">年轻人</span>
                <span v-else-if="age > 40 && age < 60 ">中年人</span>
                <span v-else>老年人</span>
                <br><br>
                <input type="text" v-model="age">
                <span v-show="age <= 40">年轻人</span>                  // v-show的使用
                <span v-show="age > 40 && age < 60 ">中年人</span>
                <span v-show="age > 60">老年人</span>
            </div>

            <script>
                new Vue({
                    el: "#app",
                    data: {
                        age: 75,
                    },
            })
            </script>

        v-for        列表渲染，遍历容器的元素或者对象的属性
            <script src="js/vue.js"></script>

            <div id="app">
                <div v-for="addr in addrs">{{addr}}</div>  
            </div>           // 第一个addr 是 变量 名字随便起  in 是关键字固定  addrs是数组的名字

            <script>
                new Vue({
                    el: "#app",
                    data: {
                        addrs:["北京", "上海", "西安", "成都", "深圳"]
                    },
                })
            </script>
            
    vue 的生命周期   vue从创建到 销毁的 都会执行对应的方法
        | 状态          | 阶段周期 |
        | ------------- | -------- |
        | beforeCreate  | 创建前   |
        | created       | 创建后   |
        | beforeMount   | 挂载前   |
        | mounted       | 挂载完成 |
        | beforeUpdate  | 更新前   |
        | updated       | 更新后   |
        | beforeDestroy | 销毁前   |
        | destroyed     | 销毁后   |

    mounted  方法 

    Ajax 是 异步请求 早期的技术 
    Axios  封装了 Ajax 简化了Ajax操作

        使用 Axios 发送 get 和 post 请求
            <script src="js/axios-0.18.0.js"></script>

            <input type="button" value="get" onclick="get()">
            <input type="button" value="post" onclick="post()">

            <script>
                function get(){
                    axios({
                        method: "get",
                        url: "https://mock.apifox.cn/m1/3128855-0-default/emp/list"
                    }).then(result => {
                        console.log(result.data);
                    })
                }

                function post(){
                    axios({
                        method: "post",
                        url: "https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById",
                        data: "id=1"
                    }).then(result => {
                        console.log(result.data);
                    })
                }
            </script>

        使用 axios的 get 和 post方法 简化 代码
            <script>
                function get(){
                    axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then(result => {
                        console.log(result.data);
                    })
                }

                function post(){
                    axios.post("https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById","id=1").then(result => {
                        console.log(result.data);
                    })
                }
            </script>


    Vue 项目 创建
        # node -v                             // 需要安装node 环境
        # npm config get prefix               // 获取 nodejs 安装目录
        # npm install -g @vue/cli             // 安装vue 脚手架 功能
        # set-ExecutionPolicy RemoteSigned    // 修改 power shell 权限
        # vue --version

        # vue create vue-project         // 第一种 命令行 创建vue项目
        # vue ui                         // 第二种 图形化界面 创建vue项目

        .vue 文件  组成
        <template>       模板部分 由它生成HTML代码
        </template>

        <script>        JS 代码 控制模板的数据来源和行为
        </script>
        <style>         CSS样式部分
        </style>

        public/index.html      入口文件 在这里定义了div id="app" 引入main.js 
        src/main.js  入口文件   在此文件中 引入 App.vue 组件 代码由 vue 接管
        src/App.vue  入口文件

    安装 Vue element
        https://element.eleme.cn/#/zh-CN/component/installation    // 官网

        # npm install element-ui@2.15.3          // 在项目根目录下安装
        # vim src/main.js                        // 引入 element 组件 官网-->快速上手 有此代码
            import ElementUI from 'element-ui';
            import 'element-ui/lib/theme-chalk/index.css';
            Vue.use(ElementUI);
        # mkdir -p src/views/element
        # vim src/views/element/ElementView.vue      // 写入基本内容
            <template>
                <el-row>
                  <el-button round>圆角按钮</el-button>
                  <el-button type="primary" round>主要按钮</el-button>
                  <el-button type="success" round>成功按钮</el-button>
                  <el-button type="info" round>信息按钮</el-button>
                  <el-button type="warning" round>警告按钮</el-button>
                  <el-button type="danger" round>危险按钮</el-button>
                </el-row>
            </template>

            <script>
            export default {
                
            }
            </script>

        # vim src\App.vue
            <template>
              <div>
                <element-view></element-view>
              </div>
            </template>

            <script>
            export default {          // 声明出口 只有在这 export 才能在其他地方 import 导入 
              
            }
            </script>
            <style>

            </style>


    注: 
        api接口管理网址 https://apifox.com/

        修改 power shell 权限
            # set-ExecutionPolicy RemoteSigned
            # set-ExecutionPolicy Default

......................................................................................................................




https://v2.cn.vuejs.org/


引包: 
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>         // 开发环境   包括一些注释 警告
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>                     // 生成环境   去掉了注释 警告




插值表达式{{ }}
    插值表达式是一种Vue的模板语法
    1.作用：利用表达式进行插值，渲染到页面中
    表达式：是可以被求值的代码，JS引擎会将其计算出一个结果
    2.语法：{{ 化表达式 }}

(1)使用的数据必须存在（data)
(2)支持的是表达式，而非语句，比如：if for.…
(3)不能在标签属性中使用{{ }}插值
    

    <div id="app">
        <p>{{nickname }}</p>
        <p>{{nickname.touppercase()}}</p>
        <p>{nickname+'你好'}</p>
        <p>{age>=18?'成年'：'未成年'}</p>
        <p>{{friend.name }}</p>
        <p>{{friend.desc }}</p>
    </div>


    const app new Vue({
        el:'#app',
        data:{                      // data 提供数据   变量:值
            nickname:'tony',
            age:18,
            friend: {
                name:'jepson',
                desc:'热爱学习Vue'
            }
        },
        methods: {                  // methods 提供方法

        }


        }
    )}

谷歌浏览器安装 插件Vue Devtools
极简插件：https://chrome.zzzmh.cn/ --> Vue Devtools --> 下载 --> 开发者模式 --> 拖拽安装 --> 插件详情允许访问文件


vue 指令
    v - 前缀的特殊 标签属性

v-html : 将这个元素的内容解析为 HTML 而不是纯文本
    如果你有一个包含 HTML 标签的字符串，你可以使用 v-html 将其渲染为真实的 HTML，而不是简单的文本。
    作用：设置元素的innerHTML
    语法：V-html="表达式"

v-show
    1.作用：控制元素显示隐藏
    2.语法：v-show="表达式"表达式值true显示，false隐藏
    3.原理：切换display:none控制显示隐藏
    4.场景：频繁切换显示隐藏的场景
v-if
    1.作用：控制元素显示隐藏 (条件渲染)
    2.语法：V-f="表达式”表达式值true显示，false隐藏
    3.原理：基于条件判断，是否创建或移除元素节点 根据判断条件控制元素的创建和移除(条件渲染)
    4.场景：要么显示，要么隐藏，不频繁切换的场景

v-else 
v-else-if
    1.作用：辅助V-f进行判断渲染
    2.语法：v-else
v-else-if="表达式'
    3.注意：需要紧挨着v-f一起使用

v-on
    1.作用：
        注册事件
        添加监听+
        提供处理逻辑
    2.语法：
        v-on:事件名="内联语句"
        v-on:事件名="methods中的函数名"

    v-on:click       单机事件
        @click       可以省略 v-on:
    v-on:mouseenter  鼠标划入事件
 
        <button v-on:click="count++">按钮</button>

    @c1ick="fn(参数1，参数2)"
    fn (a,b){}

    <body>
    <div id="app2">
        <button @click="fn">切换显示隐藏</button>
        <h1 v-show="isShow">黑马程序员</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue
    <script>
        const app2 new Vue({         // 可理解为 创建个vue的对象 app2 , 
            el:'#app2',              // 管控的 <div>模块 对应 上面的 id="app2"
            data:
                isShow:true          // 变量:值
            },
            methods:
                fn (){
                    app2.isshow = !app2.isshow
                    //让提供的所有methods中的函数，this都指向当前实例 当前为 app2
                    this.isshow = !this.isshow

                }
        })
    </script>
    </body>

v-bind
    1. 作用：动态的设置html的标签属性  src   url    title
    2. 语法：v-bind:属性名="表达式”
    3. 注意：简写形式  :属性名="表达式”

     v-bind:src="imgUrl"    绑定属性.  把 src的属性.绑定 imagUrl变量上.  下面必须有变量的赋值
        可简写 :src="imgUrl"

    <body>
    <div id="app">
        <img v-bind:src="imgUrl" v-bind:title="msg alt="">   
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app new Vue({
            el:'#app',
            data:
            imgUr1:'./imgs/10-02.png',
            msg:'hello波仔'
        })
    </script>
    </body>
按钮点击 上一页 下一页 切换图片
    <body>
    <div id="app">
        <button @click="index-">上一页</button>
    <div>
        <img v-show="index > 0" src="list[index]" alt="">
    </div>
        <button v-show="index list.length - 1" @click="index+">下一页</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app new Vue({
            el:'#app',
            data: {
                index:0,
                list: [                     // list: [ ]  数组
                    './imgs/11-00.gif',
                    './imgs/11-01.gif',
                    ./imgs/11-02.gif',
                    "./imgs/11-03.gif',
                    ./imgs/11-04.png',
                    ./imgs/11-05.png',
                ] 
            }
        })
    </script>
    </body>

v-for
    1.作用：基于数据循环，多次渲染整个元素 → 数组、对象、数字.…

    2.遍历数组语法：
        v-for="(item,index) in 数组"
        v-for="(item) in 数组"           // 如果index用不上 可以 只写一个参数
        v-for="item in 数组"             // 如果只有一项 () 也可省略掉
            item  是对象   表示 每一项
            index 下标

        <p v-for="...">我是一个内容</p>


        <div id="app">
            <h3>小黑水果店</h3>
            <u1>
                <li v-for="(item,index)in list">    // 在下面需要定义 list 数组  
                    {{ item }} - {{ index }}
            </1i>
            </u1>
        </div>

        data: {
            1ist:['西瓜','苹果','鸭梨','榴莲']
        }

    3.
        v-for中的key
        key作用：  给元素添加的唯一标识，便于Vu进行列表项的正确排序复用。
        注意点：
        1.key的值只能是字符串或数字类型
        2.key的值必须具有唯一性
        3.推荐使用id作为key(唯一)，不推荐使用index作为key（会变化，不对应)


    实现删除 功能
        <div id="app">
            <h3>小黑的书架</h3>
            <u1>
            <li v-for="(item,index)in booksList" key="item.id">         // v-for中的key 
                <span>{{item.name }}</span>
                <span>{{item.author }}</span>
                    <!-~注册点击事件→通过d进行删除数组中的对应项-->
                <button @click="del(item.id)"></button>
            </1i>
            </u1>
        </div>


        data:
        booksList: [
            {id:1,name:'《红楼梦》',author:'曹雪芹'}，
            {id:2,name:'《西游记》',author:'吴承恩'}，
            {id:3,name:'《水浒传》',author:'施耐庵'}，
            {id:4,name:'《三国演义》',author:'罗贯中'}

        ]


        methods:{
            del (id){
                this.booksList.filter(item => item.id !== id)       // 传过来的id 不等于 item 的id  则保留
                // this.booksList = this.booksList.filter(item = item.id !== id)     // 把得到的数组赋值给原数组

        }



        filter:根据条件，保留满足条件的对应项，得到一个新数组。 不会改变原来的数组
        this.list.filter(item = item.id !=id)


v-model:
    1.作用：给表单元素使用，双向数据绑定→可以快速获取或设置表单元素内容
        数据变化→视图自动更新
        视图变化→数据自动更新
    2.语法：V-mode='变量'

    用户名 密码 登录 重置 框
        <div id="app">
        <!-
        v-model可以让数据和视图，形成双向数据绑定
        (1)数据变化，视图自动更新
        (2)视图变化，数据自动更新
        可以快速[获取]或[设置]表单元素的内容
        账户：<input type="text"v-model="username'"><br><br>
        密码：<input type="password"v-model-="password"><br><br>
        <button@click="1ogin">登录</button>
        <button@click="reset">重置</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></sc
        <script>
        const app new Vue({
        el:'#app',
        data:
        username
        password:
        },
        methods:
        login ()
        console.log(this.username,this.password)
        reset(){
            
        }

综合 案例  小黑记事本


功能需求：
列表渲染
删除功能
添加功能
底部统计和清空



思维导图 制作

chat  生成一个 PlantUML

https://app.diagrams.net/?src=about  --> +号 --> 高级 --> PlantUML
作者：Teo

前端

Youtube 视频下载
