正经夜光杯

这个屌丝很懒，什么也没留下！

热门标签

【学习日记2023.4.23】之JavaScript事件_Vue_Ajax(Axios)_javascript事件,通过element元素的事件属性进行绑定

作者：正经夜光杯 | 2024-07-10 05:49:10

踩

javascript事件,通过element元素的事件属性进行绑定

1. JavaScript事件

JavaScript事件是js非常重要的一部分，主要有两点：

事件绑定
常用事件

1.1 事件绑定

2种方式：

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

<input type="button" id="btn1" value="事件绑定1" onclick="on()">
<script>
    function on(){
        alert("按钮1被点击了...");
    }
</script>
1
2
3
4
5
6

浏览器打开，然后点击按钮，弹框如下：
请添加图片描述

方式2：通过DOM中Element元素的事件属性进行绑定

<input type="button" id="btn2" value="事件绑定2">
1

document.getElementById('btn2').onclick = function(){
    alert("按钮2被点击了...");
}
1
2
3

浏览器刷新页面，点击第二个按钮，弹框如下：
请添加图片描述

需要注意的是：事件绑定的函数，只有在事件被触发时，函数才会被调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-事件绑定</title>
</head>

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

<script>
    function on(){
        alert("按钮1被点击了...");
    }

    document.getElementById('btn2').onclick = function(){
        alert("按钮2被点击了...");
    }

</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

1.2 常见事件

事件属性名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

1.3 案例

需求如下3个：

点击 “点亮”按钮点亮灯泡，点击“熄灭”按钮熄灭灯泡
输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。
点击 “全选”按钮使所有的复选框呈现被选中的状态，点击 “反选”按钮使所有的复选框呈现取消勾选的状态。

<!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>16.JS-事件-DOM-案例事件操作</title>
</head>
<body>
    <img id="light" src="img/off.gif"> <br>

    <input type="button" value="点亮" onclick="on()"> 
    <input type="button"  value="熄灭" onclick="off()">
    <input type="button"  value="闪烁" onclick="flicker()">
    <input type="button"  value="终止闪烁" onclick="stop()">
    

    <br> <br>

    <input type="text" id="name" value="YISHOOO">
    <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="checkReverse()">
</body>
<script>
    var open;
    var close;
     //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; 
    function on(){
        document.getElementById("light").src="img/on.gif";
    } 
    function off(){
        document.getElementById("light").src="img/off.gif";
    }
    function flicker(){
        
        open = setInterval(on,500);//单位是毫秒
        console.log(open);
        close = setInterval(off,1000);//单位是毫秒
        console.log(close);

    }

    function stop(){
        clearInterval(open);
        console.log(open);
        clearInterval(close);
        console.log(close);
    }



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

    document.getElementById("name").onblur = function(){
        document.getElementById("name").value = document.getElementById("name").value.toUpperCase();
    }

    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    function checkAll(){
        var hobbies = document.getElementsByName("hobby");
        for (let i = 0; i < hobbies.length; i++) {
            hobbies[i].checked = true;            
        }
    }

    function checkReverse(){
        var hobbies = document.getElementsByName("hobby");
        for (let i = 0; i < hobbies.length; i++) {
            hobbies[i].checked = !hobbies[i].checked;            
        }
    }
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

浏览器打开如图所示：
请添加图片描述

2. Vue

2.1 Vue概述

MVVM(Model-View-ViewModel)的前端开发思想让开发者更加关注数据，而非数据绑定到视图这种机械化的操作，其具体释义如下：

Model: 数据模型，特指前端中通过请求从后台获取的数据
View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据
ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上

基于上述的MVVM思想，其中的Model可以通过Ajax来发起请求从后台获取;对于View部分，可以使用ElementUI框架来替代HTML+CSS来更加方便的搭建View;下面是侧重于ViewModel部分开发的vue前端框架，用来替代JavaScript的DOM操作，让数据展示到视图的代码开发变得更加的简单。

vue封装好了之前的DOM操作，使得编写代码更加简洁明了。

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

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

2.2 快速入门

在创建vue对象时，有几个常用的属性：

el: 用来指定哪些儿标签受 Vue 管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值
data: 用来定义数据模型
methods: 用来定义函数。这个我们在后面就会用到

第四步：在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的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>v-html和v-text指令</title>
    <script src="js/vue.js"></script>
</head>
<body>

    <div id="app">
        <div>{{message}}</div>
        <div>{{message2}}</div>
        <!-- 
            v-text
                作用：将模型数据设置到标签体中
                语法：v-text="模型数据的属性名"
                特点：不支持子标签，只支持纯文本
         -->
         <div v-text="message"></div>
        <div v-text="message2"></div>
        <!-- 
            v-html：
                作用：将模型数据设置到标签的标签体中，支持子标签
         -->
        <div v-html="message2"></div>
    </div>
   
</body>
<script>
    new new Vue({
        //托管的区域
        el:"#app",
        //数据区
        data:{
            message : "Hello Vue",
            message2 : "<b>测试 加粗</b>"
        }
    })
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

效果如下图所示：
请添加图片描述

2.3 Vue指令

vue的常用指令，如下表所示：

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

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

2.3.1 v-bind和v-model

注意：html属性前面有:表示采用的vue的属性绑定！

v-model：在表单元素上创建双向数据绑定。什么是双向？

vue对象的data属性中的数据变化，视图展示会一起变化
视图数据发生变化，vue对象的data属性中的数据也会随着变化。

<!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-model</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            v-model：
                作用：完成表单标签和模型数据的双向绑定
                语法： v-model="模型数据" 
         -->
        请输入网址：<input type="text" v-model="url"><br/>
        <!-- {{}}不能作用于html的属性位置 -->
        <!-- <a href="{{url}}">跳转</a><br/> -->
        <!-- 
            v-bind:
                作用：为html标签绑定属性值
                语法：v-bind:属性名="模型数据"
                简写形式 -> :属性名="模型数据"
         -->
        <!-- <a v-bind:href="url">跳转</a><br/> -->
        <a :href="url">跳转</a><br/>
        {{url}}
    </div>
    
</body>
<script>
    //定义Vue对象
    new Vue({
        el:"#app",//vue接管区域
        data:{
            url:"",
        }
    })
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

请添加图片描述

视图可以发生数据变化是因为使用的是表单，所以双向绑定一定是使用在表单项标签上的。双向绑定的作用：可以获取表单的数据的值，然后提交给服务器

2.3.2 v-on

v-on: 用来给html标签绑定事件，需要注意如下2点：

v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数
v-on语法绑定事件时，事件名相比较js中的事件名，没有on

例如：在js中，事件绑定demo函数

<input onclick="demo()">
1

vue中，事件绑定demo函数

<input v-on:click="demo()">
1

<!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">
        <!-- 
            v-on:
                作用：给html标签绑定事件
                语法：v-on  事件名称="函数名|函数名())"
                注意事项：v-on所绑定的事件只能调用Vue中定义的函数，不能调用script标签中直接定义的函数
         -->
         <input type="button" value="点我一下" v-on:click="fn">
         <input type="button" value="点我一下" @click="fn">
    </div>
</body>
<script>
    new Vue({
        //托管区域
        el:"#app",
        //数据区
        data:{

        },
        //方法区
        methods:{
            /* fn:function(){
                alert("按钮被单击了");
            } */
            fn(){
                alert("按钮被单击了");
            }
        }
    })
</script>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

2.3.3 v-if和v-show

指令	描述
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-if-else
v-else
v-show	根据条件展示某元素，区别在于切换的是display属性的值

<!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">
        <!-- 
            v-if|v-else-if|v-else
                作用：进行条件渲染，当条件成立，则渲染(显示)对应的元素
                语法：v-if="条件判断表达式"
                原理：当条件判断表达式成立true，会在DOM上渲染对应的元素，条件不成立的元素会从DOM树上删除
                选择：如果条件判断表达式的值不会频繁的变化，建议使用v-if…
         -->
         年龄<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/>
        <!-- 
            v-show
                作用：进行条件渲染，当条件成立，则显示对应的元素，当条件不成立则隐藏对应的元素
                语法：v-show="条件判断表达式"
                原理：当条件成立，则显示对应的元素，当条件不成立在元素上添加一个display:none属性实现隐藏效果
                选择：如果条件判断表达式的值会频繁的变化，建议使用v-show
         -->
        年龄<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({
        //vue接管区域
        el:"#app",
        //数据区
        data:{
            age:""
        },
        //方法区
        methods: {
            
        },
    })
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

请添加图片描述

2.3.4 v-for

v-for 这个指令是用来遍历的。其语法格式如下：

<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>
1
2
3

需要注意的是：需要循环哪个标签，v-for 指令就写在那个标签上。

有时我们遍历时需要使用索引，那么v-for指令遍历的语法格式如下：

<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
   {{索引变量 + 1}} {{变量名}}
</标签>
1
2
3
4

<!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">
        <!-- 
            v-for:
                作用：列表渲染，遍历数组，根据数组的长度显示数据量的元素
                语法：
                    1.不包含索引：v-for="临时变量名 in 被遍历的容器"
                    1.包含索引：v-for="(临时变量名,索引名) in 被遍历的容器"
         -->
         <div v-for="addr in addrs">{{addr}}</div>
         <hr>
         <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}
    </div>
</body>
<script>
    new Vue({
        //托管区域
        el:"#app",
        //数据区
        data:{
            addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        //方法区
        methods:{
            
        }
    })
</script>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

请添加图片描述

2.3.5 案例

需求：
请添加图片描述

如上图所示，提供好了数据模型，users是数组集合，提供了多个用户信息。然后需要将数据以表格的形式，展示到页面上，其中，性别需要转换成中文男女，等级需要将分数数值转换成对应的等级。

<!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>
    <style>
        table{
            text-align: center;
        }
    </style>
    <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 v-for="(user, index) in users">
                <td>{{index+1}}</td>
                <td v-for="item in user">{{item===1?"男": item === 2 ? "女":item}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60 && user.score < 85">及格</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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

2.4 生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

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

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数：

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的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>Vue-生命周期</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script>
    //定义vue对象
    new Vue({
        //托管区域
        el:"#app",
        //数据区
        data:{

        },
        //方法区(编写的是自己定义的函数)
        methods: {
            
        },
        //生命周期函数(钩子函数)必须和methods同级，不能写在methods中
        created() {
            console.log("Vue对象被创建完成了");
        },
        mounted() {
            console.log("DOM树已经挂在完成了");
        },
    })
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

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

3. Ajax

3.1 Ajax介绍

3.1.1 Ajax概述

Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。其作用有如下2点：

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

3.1.2 Ajax作用

与服务器进行数据交互

如下图所示前端资源被浏览器解析，但是前端页面上缺少数据，前端可以通过Ajax技术，向后台服务器发起请求，后台服务器接受到前端的请求，从数据库中获取前端需要的资源，然后响应给前端，前端在通过vue技术，可以将数据展示到页面上，这样用户就能看到完整的页面了。此处可以对比JavaSE中的网络编程技术来理解。

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

如下图所示，当在百度搜索java时，下面的联想数据是通过Ajax请求从后台服务器得到的，在整个过程中，Ajax请求不会导致整个百度页面的重新加载，并且只针对搜索栏这局部模块的数据进行了数据的更新，不会对整个页面的其他地方进行数据的更新，这样就大大提升了页面的加载速度和用户体验度。

3.1.3 同步异步

针对于上述Ajax的局部刷新功能是因为Ajax请求是异步的，与之对应的有同步请求。

同步请求发送过程如下图所示：

浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。

异步请求发送过程如下图所示：

浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

3.2 原生Ajax

采用原生的Ajax代码来演示。因为Ajax请求是基于客户端发送请求，服务器响应数据的技术。需要提供服务器端和编写客户端。

服务器端

后台服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/list

客户端

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

请添加图片描述

3.3 Axios

Axios是对原生的AJAX进行封装，简化书写。Axios官网是：https://www.axios-http.cn

3.3.1 Axios的基本使用

Axios的使用比较简单，主要分为2步：
引入Axios文件
<script src="js/axios-0.18.0.js"></script>
1
使用Axios发送请求，并获取响应结果，官方提供的api很多，此处给出2种，如下
发送 get 请求
axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
    alert(resp.data);
})
1
2
3
4
5
6
发送 post 请求
axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
    data:"username=zhangsan"
}).then(function (resp){
    alert(resp.data);
});
1
2
3
4
5
6
7
axios()是用来发送异步请求的，小括号中使用 js的JSON对象传递请求相关的参数：

method属性：用来设置请求方式的。取值为 get 或者 post。
url属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
data属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

then() 需要传递一个匿名函数。将then()中传递的匿名函数称为 回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

3.3.2 Axios快速入门

后端实现

查询所有员工信息服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/list

根据员工id删除员工信息服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/deleteById

前端实现

在html中引入axios所依赖的js文件，并且提供2个按钮，绑定单击事件，分别用于点击时发送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-Axios</title>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <button type="button" onclick="get()">获取数据GET</button>
    <button type="button" onclick="post()">删除数据POST</button>
    <div id="div1">

    </div>
    <div id="div2">

    </div>
</body>
<script>
    function get(){
        axios({
            //请求方式
            method:"get",
            //请求路径
            url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"
        }).then(result=>{
            console.log(result);
            document.getElementById("div1").innerHTML = JSON.stringify(result.data);
        })
    }

    function post(){
        axios({
            //请求方式
            method:"post",
            //请求路径
            url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
            //请求参数
            data:"id=1"
        }).then(result=>{
            console.log(result);
            document.getElementById("div2").innerHTML = JSON.stringify(result.data);
        })
    }
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

浏览器打开，f12抓包，然后分别点击2个按钮，查看控制台效果如下：
请添加图片描述

3.3.3 请求方法的别名

Axios还针对不同的请求，提供了别名方式的api,具体如下：

方法	描述
axios.get(url [, config])	发送get请求
axios.delete(url [, config])	发送delete请求
axios.post(url [, data[, config]])	发送post请求
axios.put(url [, data[, config]])	发送put请求

可以将get请求代码改写成如下：

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

post请求改写成如下：

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

<!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>
    <button type="button" onclick="get()">GET请求</button>
    <button type="button" onclick="post()">POST请求</button>
    <div id="div1">

    </div>
    <div id="div2">

    </div>
</body>
<script>
    function get(){
        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result=>{
            document.getElementById("div1").innerHTML = JSON.stringify(result.data);
        }).catch(err=>{//处理响应失败的数据
            alert("响应失败！");
        });
    }

    function post(){
        axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result=>{
            console.log(result);
            document.getElementById("div2").innerHTML = JSON.stringify(result.data);
        })
    }
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

3.3.4 案例

需求：基于Vue及Axios完成数据的动态加载展示，如下图所示
请添加图片描述

其中数据是来自于后台程序的，地址是：http://yapi.smart-xwork.cn/mock/169327/emp/list

分析：

前端首先是一张表格，缺少数据，而提供数据的地址已经有了，所以意味着需要使用Ajax请求获取后台的数据。但是Ajax请求什么时候发送？页面的数据应该是页面加载完成，自动发送请求，展示数据，所以需要借助vue的mounted钩子函数。拿到数据了，该怎么将数据显示表格中？这里就得借助v-for指令来遍历数据，展示数据。
步骤：
1. 首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入
2. 我们需要在vue的mounted钩子函数中发送ajax请求，获取数据
3. 拿到数据，数据需要绑定给vue的data属性
4. 在<tr>标签上通过v-for指令遍历数据，展示数据

代码实现：

首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入
在vue的mounted钩子函数，编写Ajax请求，请求数据
ajax请求的数据应该绑定给vue的data属性，之后才能进行数据绑定到视图

<!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>
    <style>
        img{
            width: 100px;
        }
        table{
            margin: auto;
        }
        div{
            text-align: center;
            margin-left: 15%;
            margin-right: 15%;
        }
    </style>
    <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 v-for="(emp,index) in emplist">
                <td>{{index+1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image"/>
                </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>
    //定义Vue对象
    let app = new Vue({
        //托管的区域
        el:"#app",
        //数据区
        data:{
            emplist:[]
        },
        //方法区
        methods: {
            
        },
        //钩子函数
        mounted() {
            axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list")
            .then(res => {
                this.emplist = res.data.data;//或者app.emplist = res.data.data;
            })
            .catch(err => {
                console.error(err); 
            })
        },
    })
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

4. 总结

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】

【学习日记2023.4.23】之JavaScript事件_Vue_Ajax(Axios)_javascript事件,通过element元素的事件属性进行绑定

文章目录

1. JavaScript事件

1.1 事件绑定

2种方式：

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

方式2：通过DOM中Element元素的事件属性进行绑定

1.2 常见事件

1.3 案例

2. Vue

2.1 Vue概述

2.2 快速入门

2.3 Vue指令

2.3.1 v-bind和v-model

2.3.2 v-on

2.3.3 v-if和v-show

2.3.4 v-for

2.3.5 案例

2.4 生命周期

3. Ajax

3.1 Ajax介绍

3.1.1 Ajax概述

3.1.2 Ajax作用

3.1.3 同步异步

3.2 原生Ajax

3.3 Axios

3.3.1 Axios的基本使用

3.3.2 Axios快速入门

3.3.3 请求方法的别名

3.3.4 案例

4. 总结