黑马2023JAVAweb|JS、Vue

已于 2024-07-16 14:17:50 修改
阅读量911 收藏 28
点赞数 16
分类专栏： Javaweb（SpringBoot） 文章标签： javascript vue.js 前端
于 2023-12-05 18:10:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leeyayai_xixihah/article/details/134784919
版权

一：Js介绍

0aeac6d1047541028433d3de83c14365.png

二：js引入方式

（一）：内部脚本<script>标签

0b2b559b5871429aafcd405361851e6b.png

（二）：外部脚本

aca69bf3035c485591298ccec5d20c82.png

（三）：示例

<script>可以放置在任意位置

c1c29544df5d4ee4b8cd8ffeeb0c948d.png

1b7369db9fa74e58962a4c86a50e51f1.png

三：基础语法

b3cac121fa8c4f5eab7d9074029f25e5.png

（一）：书写语法

3d99dbf3c98d4190b047da0f91ae9c0a.png

2.输出语句

f5dc292d7cf84f13bb95e045f07f2402.png

// 方式一：弹出对话框
        window.alert("hello JS");
        // 方式二：写入HTML，在浏览器展示
        document.write("hello JS");
        // 方式三：写入浏览器控制台
        console.log("hello JS");

（二）变量

注意：JS的变量可以存放不同类型的值

e10e1fc18f974e039c88e301aecf8279.png

b64c5a67ffe347eeaab3f047e9e7fe7b.png

1.var变量特点

(1）全局变量，即使在代码块里被定义，也能在代码块外使用

(2)可以重复定义，会自动覆盖原来的值

4b213e9f542a497980fb0f5baafe7289.png

2.let变量

（1）局部变量

（2）不允许重复声明（同JAVA）

019a8db961b045b8824761f0f2a444b9.png

ec7f984d236c4ffdb93fa11c968aa96d.png

3.const常量

一个只读常量，一旦声明，常量值不可更改

<script>

        // 弱语言
        /* var x=10
        x="xixi"
        alert(x) */
        //var 变量的特点
        /* {
            var a=10
            var a="haha"//重复声明
        }
        alert(a)//全局使用 */
        //let变量
        /* {
            let a=10
            //let a="haha"//不能重复声明
            alert(a) //局部变量
        } */
        //const常量
        const a="xixi"
        //a="hha" //加上后也弹不出任何东西
        alert(a)
    script>

（三）数据类型&运算符

1.数据类型--5种数据类型

35556e2fe589482c87cfa9296a467e9a.png

b36cf964444a46c7a3a1c90102734496.png

2.类型转换

87e6113b441f43e1805a93de1c05dbc4.png

其它类型转数字：

6ce5e51225054a2d9e67afa244f13fd5.png

其它类型转boolean:

2ec06646db9e4a8f8a9f4aa05f056084.png

2.运算符

（1）==与===   返回值为true和false

===会比较二者的数据类型是否一致

3ea912150b5f486a8142583ca1834c99.png

四：函数

1：定义一

d550cd33c9c64fd4988d24b830f1ab1e.png

2：定义二

2cead560356b45a1a71225b0fb4b83cc.png

<script>

    //定义一
    function add(a,b){
        return a+b;
    }
    var result=add(1,2)
    alert(result)
    //定义二
    var add =function add(a,b){
        return a+b;
    }
    var result=add(1,2)
    alert(result)
    script>

五：对象

3a6dab6caae64f339f449cf536feda68.png

（一）：Array数组

1.定义

738f49fceadf4d888239deb184303b22.png

2.特点：长度可变，类型可变

22f676bfd8234f9cbf09d378dc3b0c64.png

3.属性与常用方法

b13e4744503a4feab1f0e8d9cdad2b20.png

（1）foreach

db4d5dad598640d09a23b2dc245daec2.png

箭头：简化函数定义

2bc7ae6f8ba245a48f2d2386e5659f02.png

（2）push和splice

fad77e5c037c4e769db9cc4c37784103.png

（二）：String字符串

f121e14dc01640799929a14ad9e50236.png

（三）：JSON

1.JS自定义对象

3a09181c344b4b88a9d812f0bc310c6b.png

2.JSON对象

前后端之间传输的对象数据是JSON对象数据，其是一个字符串

前端解析JSON数据，需要先将其转换为JS（自定义）对象，然后才可以通过JS对象的调用方法进行调用。

41a03968988845df9077fd56f3e2eb29.png

3.JSON对象的基本语法

106a115c0d8349b6b3f0f2768fdcb941.png

举例：注意，name与addr这类键字符串要双引号包裹。而对于值数字，字符串等不同类型，包裹类型不同

5e874d4d06454f45a5f0298430c14556.png

<script>
        var user='{"name":"Tom","age":"18","addr":["北京","上海"]}'
        var jsobject=JSON.parse(user);
        alert(jsobject.name)
    </script>

（四）：BOM（浏览器对象模型）

1.Window对象

aaf965b3655144d79e453ac8ebe15579.png

（1）confirm

//confirm方法，弹出有确定与取消的对话框
        // 确定，返回值为true，错误，返回值为false
        var re=confirm("确定删除吗？")
        document.write(re)

（2） 定时器

var i=0
        //定时器 每2秒执行一次
        setInterval(function(){
            i++
            document.write("定时器执行第"+i)
        } ,2000)

e008d9a58102457e9ea6424c6455ec99.png

（3）延时器

//延时器,延时3000毫秒
        setTimeout(function(){
            alert("延时执行")
        },3000)

2.Location对象（地址栏对象）

属性：掌握获取地址栏

8b7051abea514cf58f3a2e79052b08ff.png

//Location
        alert(location.href)//获取当前地址
        location.href="https://link.springer.com/journal/10489"
        alert(location.href)//获取当前地址，并在点击确认后跳转到上述新地址

（1）获取当前地址

f5c8d5d692bb4555a7c759de02b26631.png

（2）跳转网址----地址跳转

f41d50c55c284bb7a6d65abba7f9e206.png

b90885b5dac54f3fa2c8bfb593e8cd50.png

（五）：DOM(文档对象模型)

1.DOM的作用

JS操作标记型语言的模型（HTML，XML都是标记语言）

（简单说：JS通过DOM操作标记语言文档（如html文件）的文本，图片，视频元素，操作包括删减增加，更改内容，变换颜色等。

如何操作：通过文本视频的标签实现 如：标题标签<h>,<img>,<a>,<div>(CSS标签也可)

或者通过标签的id实现（不想让所有的<h>标签都变换，给其加id，通过id实现）

）

先获取元素（文本，图片，视频），再通过元素的属性值进行操作 

85ea3e9e4e0b42bdaab97bc7e315da7a.png

2.DOM树

8a7d466d6a024c65bf9c44dbce3ec9d0.png

举例：

2e020e4dbeeb49dba0159da902a81d24.png

3.DOM分类

8bebefb14b3343c1ab9a6188bb659440.png

4.DOM操作HTML内容的方法（id,class，标签，name）

（对应下面例子里的代码）

（1）获取元素（文本，图片，视频）

2b1c0ada522941dc8f48eb9022513c5d.png

举例：

0e05f0e23aeb4918a98ddb4c0e57589a.png

DOM操作

7116d2da77024641ad1e80d0d8a08a53.png

<body>
    <img id="h1" src="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 获取元素
    // 1.1 根据id获取
    var img=document.getElementById('h1');
    alert(img)
    // 1.2 根据标签获取
    var divs=document.getElementsByTagName('div')
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i])  
    }
    //根据name属性获取
    var ins=document.getElementsByName('hobby')
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i])  
    }
    //根据class属性获取
    var cll=document.getElementsByClassName('hobby')
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i])  
    }

</script>

5.DOM练习

7a8fbadc320b410e87342e370c48399e.png

021c641836af42ca9ae9847560f3bdb8.png

（注意查看报错在网页-检查-控制台（看右上角的红色））

244dbaae4eb24e6a931663bd5b8a53ea.png

<script>
    // 1.1 点亮灯泡 改变src属性值
    var img=document.getElementById('h1');
    img.src="on.gif"
    // 1.2 所有div标签的内容后面加上very good
    // 红色字体 
    var divs=document.getElementsByTagName('div')
    for (let i = 0; i < divs.length; i++) {
        var div =divs[i]
        div.innerHTML+= "<font color='red';>very good</font>"
    }
    //1.3 使所有复选框呈选择状态
    var ins=document.getElementsByName('hobby')
    for (let i = 0; i < ins.length; i++) {
        var check =ins[i]
        check.checked=true //选中
    } 
    
</script>

（六）JS事件监听

1.简介

类似JAVA里的键盘监听

对网页上的内容进行点击，按键盘等内容进行捕捉，然后做出相应反应

4b466522e610495d9897fb47713e7335.png

2.事件绑定

对需要监听的元素绑定，动作行为（事件）

如：点击到了，绑定动作行为“我被点击到了”

e19ade7ef04942fba57937fb396f6689.png

cbeb9147d79d4edc859cee74d890264f.png

<body>
    <input type="button" id="btn1" onclick="on()" value="事件绑定1">
    <input type="button" id="btn2" value="事件绑定2">
</body>

<script>
    //方式一：通过HTML标签属性绑定
    function on(){
        alert('我被点击到了')
    }
    //方式二：通过DOM获取元素，再调用属性进行绑定
    document.getElementById('btn2').onclick=function on(){
        alert('我被点击到了')
    }

</script>

3.常见事件

3983d30ca9b341e9b60af59ab3f30b23.png

获得/失去焦点事件

获得就是在点入输入框时，有闪动

失去就是点其它地方，这个闪动会消失

6cf46ec93c824d6084bfc0867c873353.png

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

4.案例

86e243910d1a4e1db3de8fd151f74315.png

686a73c568194101a0d1351001389714.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件监听案例</title>
</head>
<body>
    <img id="light"   src="off.gif"><br>
    <input type="button" value="点亮" onclick="light()">
    <input type="button" value="熄灭" onclick="off()"><br>
    <input type="text"  id ="name" value="ITCAST" onfocus="lower()" onblur="upper()"><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="verse()">
    
</body>

<script>
    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; 
     //点亮灯泡,熄灭灯泡
     function light(){
        var img =document.getElementById("light")
        img.src="on.gif";
    }
    function off(){
        var img =document.getElementById("light");
        img.src="off.gif";
    }

    //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; 
    function lower(){
        var input=document.getElementById("name")
        input.value=input.value.toLowerCase()
    }
    function upper(){
        var input=document.getElementById("name")
        input.value=input.value.toUpperCase()
}

    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 
    //点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ;
    // -- onclick
    // 使用表单的name属性获取
    function checkall(){
        var bot=document.getElementsByName("hobby")
        for (let i = 0; i < bot.length; i++) {
            const element = bot[i]
            element.checked=true
        }
}
    function verse(){
        var bot=document.getElementsByName("hobby")
        for (let i = 0; i < bot.length; i++) {
            const element = bot[i]
            element.checked=false
        }
}


</script>
</html>

六：Vue

（一）Vue概述

13a4248c8b394fbaa207a7adad94f049.png

eb54d9f6963645708d110823806eaeec.png

 <script src="vue.js"></script>
<body>
    <div id="app">
        <input type="text" v-model="message">{{message}}
        <!-- 文本框后面直接跟一段文本 -->
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            message:"hello word"
        }
    })//里面是一个对象，用花括号
</script>

4d7daa02988c4ec28fffef1cb894face.png

（二）Vue指令

a27ca5d95a0942f1b94b9a6215390a1d.png

1.v-bind&v-model

4a54c3e7399547f29984644d00f00f37.png

5a548218b77343e999e9d8ef4d4f3122.png

<body>
    <div id="app">
        <a v-bind:href="url">Applied Intelligence</a>
        <a :href="url">Applied Intelligence</a>
        <input type="text" v-model="url"> 
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            url:"https://link.springer.com/journal/10489"
        }
    })//里面是一个对象，用花括号
</script>

2.v-on--绑定事件

dda5b28b108c46058e5bb6aeccaf893a.png

23a50bc6ae7947a9a20dc87cda80b902.png

<body>
    <div id="app">
        <!-- <a v-bind:href="url">Applied Intelligence</a>
        <a :href="url">Applied Intelligence</a>
        <input type="text" v-model="url">  -->
        <input type="button" value="点我一下" v-on:click="clic()">
        <!-- 简写 -->
        <input type="button" value="点我一下" @click="clic()">


    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
        
        },
        methods: {
            clic:function(){
                document.write("我被你点击到了")
            }
        },
    })

    /* new Vue({
        el:"#app",
        data:{
            url:"https://link.springer.com/journal/10489"
        }
    })//里面是一个对象，用花括号 */
</script>

3.v-if & v-show

012c6d30fb014decaf8f9bd26255e96b.png

a2f5266138914b6090bd7364c198924a.png

e50bd625a0b04171ab7f4ce227284c84.png

代码：

947276a8c60b4655b536e36e6f659534.png

    <div id="app">
        年龄<input type="text" v-model="age">经判定为：
        <span v-if="age<=35">年轻人（35以下）</span>
        <span v-else-if="age<=55 && age>35">中年人（35-55）</span>
        <span v-else="age>=55">老年人（55以上）</span>
        <br>
        年龄<input type="text" v-model="age">经判定为：
        <span v-show="age<=35">年轻人（35以下）</span>
        <span v-show="age<=55 && age>35">中年人（35-55）</span>
        <span v-show="age>=55">老年人（55以上）</span>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            age:20
        }
    })//里面是一个对象，用花括号
</script>

4.v-for

2f3f6b8d822845808fc466f5608a8a73.png

cf64315d0eb64c1a9774de4a5ed29494.png

<body>
    <!-- 标签唯一 -->
    <div id="app">
        <div  v-for="addr in addres">{{addr}}</div>
        <hr>
        <div  v-for="(addr,index) in addres">{{index+1}}:{{addr}}</div>
    </div>
    
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            addres:['北京','上海','广州']
        }
    })//里面是一个对象，用花括号
</script>

（三）Vue案例

677352d3e06144df9fee781c5d21da86.png

33d6f6dfa34c4026bd55c89f5b43635c.png

9abc9579a3574a9a8f53b55004d1429e.png

<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-else="user.gender==2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score>= 85">优秀</span>
                    <span v-else-if="user.score>= 65">及格</span>
                    <span v-else="user.score<65" 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>

（四）Vue周期

从创建到销毁的8个阶段

536fe843765c47229b95e6c78defd571.png

99b8f55fbc1e43eea0ff395f6c6ba8f8.png

d7e4be599c284eb498e170aac0cf2444.png

1dc193c1dcd64a43a50457991868788c.png

leeyayai_xixihah
关注
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值