02-JS-Vue

YangeIT大约 36 分钟JavaWebweb开发JavaScript函数Vue生命周期

02-JS-Vue

跳转到页底(每日作业)[1]。

目标

  1. JS-函数定义和使用
  2. JS-基本对象-String对象的使用
  3. JS-基本对象-Array对象的使用
  4. JS-基本对象-JSON对象的使用
  5. JS-BOM对象和DOM对象的了解
  6. JS-事件理解
  7. 理解Vue的作用
  8. 理解Vue的指令和生命周期
  9. 能够理解Ajax和Axios的作用

知识准备

  1. js变量的定义和类型
  2. 知道网页开发三剑客的作用
  3. 对于java中的变量定义，方法定义，基本运算符，if for等操作熟练

1 JavaScript

1️⃣1.1 JS语法-函数 ✏️ 🍐

函数

  1. java中我们为了提高代码的复用性，可以使用方法
  2. 在JavaScript中可以使用函数来完成相同的事情
    • JavaScript中的函数被设计为执行特定任务的代码块 (封装)，通过关键字function 来定义
    • JS中定义函数有2中方式

Idea中创建教程动画：

第一种定义格式如下常用：

function 函数名(参数1,参数2..){
    要执行的代码
}

因为JavaScript是弱数据类型的语言，所以有如下几点需要注意： 👈

  • 形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。
  • 返回值也不需要声明类型，直接return即可

如下示例：

function add(a, b){
    return a + b;
}

接下来我们需要在Idea或者VS中编写代码来演示

第一步：新建名为js的文件夹，创建名为01. JS-函数的html文件，然后在<script>中定义上述示例的函数：

<script>
     function add(a,b){
        return  a + b;
     }
</script>

但是上述只是定义函数，**函数需要被调用才能执行！**所以接下来我们需要调用函数

第二步：因为定义的add函数有返回值，所以我们可以接受返回值，并且输出到浏览器上，添加如下代码：

let result = add(10,20);
alert(result);

查看浏览器运行结果：浏览器弹框内容如下图所示：

1668584359136
1668584359136

注意

我们在调用add函数时，再添加2个参数，修改代码如下：

var result = add(10,20,30,40);

浏览器打开，发现没有错误，并且依然弹出30，这是为什么呢？

因为在JavaScript中，函数的调用只需要名称正确即可，参数列表不管的。如上述案例，10传递给了变量a，20传递给了变量b,而30和40没有变量接收，但是不影响函数的正常调用。

课堂作业1

🚩 1. 定义一个能求出1-n累加的函数sum，如：

  1. 输入2：结果等于 3 （1+2）
  2. 输入3：结果等于 6（1+2+3）
  3. 输入4：结果等于 10（1+2+3+4）
  4. 输入n：结果等于 xxx（1+2+3+...+n）

2️⃣1.2 JS语法-基本对象 🍐

JavaScript中的对象有很多，主要可以分为如下3大类，我们可以打开W3school在线学习文档open in new window，来到首页，在左侧栏找到浏览器脚本下的JavaScript(具体步骤，点击下方)：

点击查看教程详情
1668587524509
1668587524509

然后进入到如下界面，点击右侧的参考书

1668587661914
1668587661914

然后进入到如下页面，此页面列举出了JavaScript中的所有对象

1668587855863
1668587855863

对象分类

1.2.1 基本对象

1.语法格式

Array对象时用来定义数组的。常用语法格式有如下2种：

//方式1：var 变量名 = new Array(元素列表); 
var arr = new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据（元素）

//方式2：var 变量名 = [ 元素列表 ]; 
var arr2 = [1,2,3,4]; //1,2,3,4 是存储在数组中的数据（元素）

// 数组中取值：和java一样，通过索引获取值，索引从0开始计数
// arr[索引] = 值;
var value=arr2[0];//value=1

特点

  1. JavaScript中数组相当于java中的集合，数组的长度是可以变化的。
  2. JavaScript是弱数据类型的语言，所以数组中可以存储任意数据类型的值。

案例代码：

//特点: 长度可变 类型可变
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);


 





 
 


浏览器控制台输出结果如下：

1668590895662
1668590895662

2.属性和方法

官网文档open in new window

  • 属性| length | 设置或返回数组中元素的数量。 |
  • 方法| forEach() | 遍历数组中的每个有值得元素，并调用一次传入的函数 |
  • 方法| push() | 将新元素添加到数组的末尾，并返回新的长度 |
  • 方法| splice() | 从数组中删除元素

重点看阴影区域的代码 👇

点击查看属性和方法代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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循环
    // 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>


































 
 
 
 




 
 
 
 
 
 
 
 


 
 


 
 



课堂作业2

🚩 1. 数组

课堂作业3

🚩 1. 阅读下列图片，定义一个天气数组，里面装上每天的天气对象

3️⃣1.3 JS语法-BOM对象 🚀

BOM对象

BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。

JavaScript将浏览器的各个组成部分封装成了对象。可以通过操作BOM对象的相关属性或者函数来完成对浏览器的功能。

  • 3秒跳转到百度

BOM中提供了如下5个对象：

重点学习：Window对象、Location对象 🎯

window对象官网介绍open in new window

常用函数：

函数描述
alert()open in new window显示带有一段消息和一个确认按钮的警告框。
comfirm()open in new window显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval()open in new window按照指定的周期（以毫秒计）来调用函数或计算表达式。 👈案例要用
setTimeout()open in new window在指定的毫秒数后调用函数或计算表达式。 👈 案例要用

可以点击每个函数的方法名，查看对应的案例 👍

案例：输出奇数和偶数

  setInterval(displayHello, 1000);
  var a=1;
  function displayHello() {
    a++;
    if(a%2==0){
      console.log(a+"是偶数");
    }else{
      console.log(a+"是奇数");
  }

4️⃣1.4 JS语法-DOM对象 🚀

DOM介绍

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。 如下图，左边是 HTML 文档内容，右边是 DOM 树

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

我们学习DOM技术有什么用呢？主要作用如下：

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

总而达到动态改变页面效果目的 🎯完成轮播图案例即可

我们先体验下下面程序带来的效果，等学完JS事件后，在做一个综合案例

// 将下列代码粘贴到浏览器中运行（先打开百度首页)
    setTimeout(function () {
document.getElementById("s_lg_img").src="http://i0.sinaimg.cn/lx/zc/p/2009/0107/U3394P8T1D822022F913DT20090107064253.jpg"
    },3000)

代码操作步骤：

思考

  1. 如果要修改图片，是不是要找到对应的图片标签对象？
  2. 找到了标签对象，接下来修改什么？才能够把图片改掉？
点击查看如何获得元素对象的方法

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。document对象提供的用于获取Element元素对象的api如下表所示：

函数描述
document.getElementById() 用这个根据id属性值获取，返回单个Element对象
document.getElementsByTagName()根据标签名称获取，返回Element对象数组
document.getElementsByName()根据name属性值获取，返回Element对象数组
document.getElementsByClassName()根据class属性值获取，返回Element对象数组

5️⃣1.5 JavaScript事件

事件介绍

如下图所示的百度注册页面，当我们用户输入完内容，百度可以自动的提示我们用户名已经存在还是可以使用。那么百度是怎么知道我们用户名输入完了呢？这就需要用到JavaScript中的事件了。

1668802830796
1668802830796

HTML事件是发生在HTML元素上的 “事情”，例如：

  • 按钮被点击
  • 鼠标移到元素上
  • 输入框失去焦点
  • ........

本节主要学习2点知识点

  • 常用事件
  • 事件绑定

常用的事件属性

事件属性名说明
onclick鼠标单击事件案例用
onblur元素失去焦点
onfocus元素获得焦点
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件案例用
onmouseover鼠标被移到某元素之上
onmouseout鼠标从某元素移开

课堂作业

🚩 1. 点击一个按钮，开始每隔 3 秒，换一张图片

  • 需求和目的：

    • 目的：熟悉事件绑定和 dom 操作元素属性
    • 需求：点击一个按钮，开始每隔 3 秒，换一张图片

  • 分析

    • 书写一个按钮，给按钮写好id
    • 通过id找到按钮元素，设置该按钮的点击事件
    • 在点击事件中调用延时方法，方法被调用后，每隔3秒钟换一张图片
    • 图片标签提前定义在body中，图片地址提前放到数组中

2 Vue

1️⃣1.1 概述

背景

通过我们学习的html+css+js已经能够开发美观的页面了，但是开发的效率还有待提高，那么如何提高呢？

  1. 我们先来分析下页面的组成。
  • 一个完整的html页面包括了视图和数据，数据是通过请求 从后台获取的，
  • 那么意味着我们需要将后台获取到的数据呈现到页面上，很明显， 这就需要我们使用DOM操作。
  • 正因为这种开发流程，所以我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想，而Vue框架就是实现了这种思想的前端框架

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

我们之前也学习过后端的框架 log ，单元测试 是用来简化代码，提高开发效率的；而 VUE 是前端的框架，是用来简化 JavaScript 代码编写的。前一天我们做了案例，里面进行了大量的 DOM 操作，如下:

点击查看详细image-20210831112115508

学习了 VUE 后，这部分代码我们就不需要再写了。那么 VUE 是如何简化 DOM 书写呢？

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

之前我们是将关注点放在了 DOM 操作上；如下图就是 MVC 思想图解

image-20210831113940588

C 就是咱们 js 代码，M 就是数据，而 V 是页面上展示的内容，如下图是我们之前写的代码

image-20210831114227585

MVC 思想是没法进行双向绑定的。双向绑定是指当数据模型数据发生变化时，页面展示的会随之发生变化，而如果表单数据发生变化，绑定的模型数据也随之发生变化。接下来我们聊聊 MVVM 思想，如下图是三个组件图解

image-20210831114805052

图中的 Model 就是我们的数据，View 是视图，也就是页面标签，用户可以通过浏览器看到的内容；Model 和 View 是通过 ViewModel 对象进行双向绑定的，而 ViewModel 对象是 Vue 提供的。接下来让大家看一下双向绑定的效果，下图是提前准备的代码，输入框绑定了 username 模型数据，而在页面上也使用 {{}} 绑定了 username 模型数据

image-20210831115645528
Vue 体验下MVVM的效果吧

2️⃣1.2 快速入门

Vue使用步鄹

  1. 新建 HTML 页面，引入 Vue.js 文件
  2. 在 JS 代码区域，创建 Vue 核心对象，进行数据绑定
  3. 编写视图
  1. 新建 HTML 页面，引入 Vue.js 文件
<!-- 本地的js -->
<script src="js/vue.js"></script>

课堂作业

🚩 1. 模仿vue入门案例

效果：体会 MVVM 双向数据绑定的效果

步鄹

  1. 新建 HTML 页面，引入 Vue.js 文件
  2. 在 JS 代码区域，创建 Vue 核心对象，进行数据绑定
  3. 编写视图

3️⃣1.3 Vue 指令

Vue 指令

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

常用的指令：

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

v-bind & v-model 指令

image-20210831150101736 该指令可以给标签原有属性绑定模型数据。这样模型数据发生变化，标签属性值也随之发生变化

例如：

<a v-bind:href="url">百度一下</a>

上面的 v-bind:" 可以简化写成 : ，如下：

<!--
	v-bind 可以省略
-->
<a :href="url">百度一下</a>

课堂作业

Vue指令练习代码

点击查看指令练习代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="js/vue.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>

<div id="app">

    <hr>
    <h3>遍历数组 v-for</h3>
    <!--无索引    -->
    <div v-for="item in addrs">
        {{item}}
    </div>
    <!--有索引 -->
    <div v-for="(item,i) in addrs">
        {{i+1}} {{item}}
    </div>

    <hr>
    <h3>条件显示v-show</h3>
    <div v-show="count == 2">总经理</div>

    <h3>条件显示v-if</h3>
    <div v-if="count == 2">启用</div>
    <input type="text" v-model="count"></input>

    <hr>
    <h3>v-on</h3>
    <input type="button" value="一个按钮" v-on:click="show()" />
    <img :src="imgurl" @click="show2" width="10%">


    <hr>
    <h3>v-bind</h3>
    <a v-bind:href="url">点击一下</a>
    <img :src="imgurl" width="10%">

    <hr>
    <h3>v-model</h3>
    {{imgurl}}
    <input type="text" v-model="imgurl"></input>

</div>


<script>
    new Vue({
        el:"#app",
        data(){
            return {
                username:"fangjun",
                url:"https://www.zhipin.com/web/geek/job?query=java&city=101190100&salary=405",
                imgurl:"../imgs/ji1.png",
                count:2,
                addrs:["长沙","北京","南京","杭州","深圳"]
            }
        },
        mounted(){
        //    当vue对象加载完成，可以加载后台的数据了
            this.getAlllist();
        },

        methods:{
        //    其他的自定方法
            show(){
                alert("提示")
            },
            show2(){
                alert("真不错！")
            },
            getAlllist(){
            //    axios代码
            //     alert("正在加载后台数据....")
                console.log("正在加载后台数据....")
            }
        }
    });




</script>

</body>
</html>






 






 










 







 





 




 







 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 








Vue 案例效果演示

安装vue.js插件方便编写vue指令

4️⃣1.4 生命周期

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。

image-20210831160239294

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

点击查看image-20210831160335496

看到上面的图，大家无需过多的关注这张图。这些钩子方法我们只关注 mounted 就行了。

mounted：挂载完成，Vue 初始化成功，HTML 页面渲染成功。而以后我们会在该方法中 发送异步请求，加载数据。 简单实用 👈 🍐​

课堂作业

🚩 1. 在mounted方法中输出一句话"网页已经加载完毕，我要网络请求数据了..."

3. Ajax和Axios

1️⃣3.1 Ajax概述和作用 🍐

Ajax

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

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

我们前端页面中的数据，如下图所示的表格中的学生信息，应该来自于后台，那么我们的后台和前端是互不影响的2个程序，那么我们前端应该如何从后台获取数据呢？因为是2个程序，所以必须涉及到2个程序的交互，所以这就需要用到我们接下来学习的Ajax技术。

1669103527446
1669103527446

  • 与服务器进行数据交互

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

    1669104661340
    1669104661340

2️⃣ 3.2同步异步 🍐

针对于上述Ajax的局部刷新功能是因为Ajax请求是异步的，与之对应的有同步请求。接下来我们介绍一下异步请求和同步请求的区别。

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

    1669105385944
    1669105385944

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

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

    1669105479350
    1669105479350

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

3️⃣ 3.3 Axios的简介和基本使用

原生的Ajaxopen in new window请求的代码编写起来还是比较繁琐的，所以接下来我们学习一门更加简单的发送Ajax请求的技术Axios 。Axios是对原生的AJAX进行封装，简化书写。 Axios官网open in new window

点击查看案例资料准备

  • 前端实现

    首先在Idea或VSCode中创建js文件夹，与html同级，然后将资料/axios-0.18.0.js简单实用 文件拷贝到js目录下，然后创建名为02. Ajax-Axios.html的文件，工程结果如图所示：

    1669108792555
    1669108792555

    然后在html中引入axios所依赖的js文件，并且提供2个按钮，绑定单击事件，分别用于点击时发送ajax请求，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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
    }

    function post(){
        //通过axios发送异步请求-post
    }
</script>
</html>

get请求代码如下：

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

然后分别使用Axios的方法，完整get请求和post请求的发送

点击查看完整代码
<!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);
        })


    }

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

    }
</script>
</html>

上述请求还可以使用别名方式简写可读性稍差

点击查看请求方法的别名

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和post请求，所以在上述的入门案例中，我们可以将get请求代码改写成如下：

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

post请求改写成如下：

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

4️⃣3.4 案例 ✏️

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

    1669139756551
    1669139756551

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

  • 分析：

    前端首先是一张表格，我们缺少数据，而提供数据的地址已经有了，所以意味这我们需要使用Ajax请求获取后台的数据。但是Ajax请求什么时候发送呢？页面的数据应该是页面加载完成，自动发送请求，展示数据，所以我们需要借助vue的mounted钩子函数。那么拿到数据了，我们该怎么将数据显示表格中呢？这里就得借助v-for指令来遍历数据，展示数据。

  • 步骤：

    1. 首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入
    2. 我们需要在vue的mounted钩子函数中发送ajax请求，获取数据
    3. 拿到数据，数据需要绑定给vue的data属性
    4. 在<tr>标签上通过v-for指令遍历数据，展示数据

  • 代码实现：

    1. 首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入

      1669140682300
      1669140682300
点击查看 提供初始代码
 ```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" >
                 <td>1</td>
                 <td>Tom</td>
                 <td>
                     <img src="" width="70px" height="50px">
                 </td>
                 <td>
                     <span>男</span>
                    <!-- <span>女</span>-->
                 </td>
                 <td>班主任</td>
                 <td>2009-08-09</td>
                 <td>2009-08-09 12:00:00</td>
             </tr>
         </table>
     </div>
 </body>
 <script>
     new Vue({
        el: "#app",
        data: {
         
        }
     });
 </script>
 </html>
 ```

  1. 在vue的mounted钩子函数，编写Ajax请求，请求数据，代码如下：

    mounted () {
    //发送异步请求,加载数据
    axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
        
    })
}

  2. ajax请求的数据我们应该绑定给vue的data属性，之后才能进行数据绑定到视图；并且浏览器打开后台地址，数据返回格式如下图所示：

    1669141982809
    1669141982809

    因为服务器响应的json中的data属性才是我们需要展示的信息，所以我们应该将员工列表信息赋值给vue的data属性，代码如下：

     //发送异步请求,加载数据
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
    this.emps = result.data.data;
})

    其中，data中生命emps变量，代码如下：

    data: {
    emps:[]
},

  3. 在<tr>标签上通过v-for指令遍历数据，展示数据，其中需要注意的是图片的值，需要使用vue的属性绑定，男女的展示需要使用条件判断，其代码如下：

    <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>
点击查看完整代码
<!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 => {
            console.log(result.data);
            this.emps = result.data.data;
          })
       }
    });
</script>
</html>

作业

🚩 1. 重点完成上述的课堂作业

  1. 晚自习第一节课的前30分钟，总结完毕之后，每个同学先必须梳理今日知识点 (记得写不知道的，以及感恩三件事)；整理好的笔记可以发给组长，组长交给班长，意在培养大家总结的能力）

  2. 晚自习第一节课的后30分钟开始练习（记住：程序员是代码堆起来的）：

    • 先要把今天的所有案例或者课堂练习，如果没练完的，练完他
    • 独立书写今日作业

  3. 剩余的时间：预习第二天的知识，预习的时候一定要注意：

  • 预习不是学习，不要死看第二天的视频（很容易出现看了白看，为了看视频而看视频）
  • 预习看第二天的笔记，把笔记中标注重要的知识，可以找到预习视频，先看一遍，如果不懂的 ，记住做好标注。

  1. 页底标记 ↩︎

焱哥的博客
Copyright © 2025 YangeIT