0
点赞
收藏
分享

微信扫一扫

在NAS上部署.NET版本的WOL远程开机服务

晴儿成长记 2023-11-27 阅读 10
javascript前端vue.js
加载失败

vue介绍

vue知识点


    快速入门：


        1，引入Vue模板（在官网上面复制）

2，创建Vue程序的应用实例，控制试图的元素

        3，准备元素（div），被vue控制

        4，准备数据

       5， 通过插值表达式渲染页面

完整版代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue-快速入门</title>
</head>
<body>
  <div id="app">
      <h1>{{msg}}</h1>
  </div>
  
  <script type="module">
    import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
        data() {
          return {
            msg:'hello Vue'
          }
        },
    }).mount('#app')
  </script>
</body>
</html>

    常用指令：

        v-for

列表渲染，遍历容器的元素或者对象的属性

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-for入门</title>
</head>
<body>
  
  <div id="app">
    <p v-for="(name,index) in nameList"> {{index+1}}--{{name}}</p>
   
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          nameList: ['张无忌', '张三丰', '韦一笑', '殷天正']
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

        v-bind

                 为HTML标签绑定属性值，如设置 href , css样式等

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-bind入门</title>
</head>
<body>
  
  <div id="app">
    <a :href='url'>链接1</a>
    <br><br>
    <a :href='url'>链接2</a>
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          url:'http://www.jd.com'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

        v-if/v-else/v-else

                 条件性的渲染某元素，判定为true时渲染,否则不渲染

        <td>
          <span v-if="user.gender == 1">男</span>
          <span v-else-if="user.gender == 2">女</span>
          <span v-else>其他</span>
        </td>

        v-show  

根据条件展示某元素，区别在于切换的是display属性的值

       <td> 
          <span v-show="user.job == 1">班主任</span>
          <span v-show="user.job == 2">讲师</span>
          <span v-show="user.job != 1 && user.job != 2">其他</span>
       </td>

        v-model

 在表单元素上创建双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-model入门</title>
</head>
<body>
  
  <div id="app">
    <input type="text" v-model="msg">
    <span>{{msg}}</span>
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          msg:''
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

        v-on

 为HTML标签绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-on入门</title>
</head>
<body>
  
  <div id="app">
    <input type="button" v-on:click="name = '哈哈哈' " value="点我一下试试">
    <input type="button" @click="name = 'Vue'" value="再点我一下试试">
    <br>
    <br>
    <input type="button" v-on:click="console.log('试试就试试')" value="点我一下试试">
    <input type="button" v-on:click="handle" value="点我一下试试">
    <input type="button" @click="handle" value="点我一下试试">
    <span>{{name}}</span>
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          name: 'Vue'
        }
      },
      methods:{
        handle(){
          console.log('试试就试试~~');
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

综合案例：使用v-for遍历 v-model接收用户输入的值，使用v-if和v-show和v-on添加点击事件

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3-案例1</title>
  <style>
    table,th,td {
      border: 1px solid #000;
      border-collapse: collapse;
      line-height: 50px;
      text-align: center;
    }

    #center,table {
      width: 60%;
      margin: auto;
    }

    #center {
      margin-bottom: 20px;
    }

    img {
      width: 50px;
    }

    input,select {
      width: 17%;
      padding: 10px;
      margin-right: 30px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .btn {
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <div id="app">
    <div id="center">
      姓名: <input type="text" v-model="name">
      性别:
      <select name="gender" v-model="gender">
        <option value="1">男</option>
        <option value="2">女</option>
      </select>
      职位:
      <select name="job" v-model="job">
        <option value="1">讲师</option>
        <option value="2">班主任</option>
        <option value="3">其他</option>
      </select>

      <input class="btn" type="button" value="查询" @click="search">
    </div>
        <div style="text-align: center;">{{name}} --- {{gender}} --- {{job}}</div>
    <table>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>头像</th>
        <th>性别</th>
        <th>职位</th>
        <th>入职时间</th>
        <th>更新时间</th>
      </tr>


      <tr v-for="(user, index) in userList" :key="user.id">
        <td>{{index+1}}</td>
        <td>{{user.name}}</td>
        <td> <img :src="user.image"> </td>
        <td>
          <span v-if="user.gender == 1">男</span>
          <span v-else-if="user.gender == 2">女</span>
          <span v-else>其他</span>
        </td>
        <td> 
          <span v-show="user.job == 1">班主任</span>
          <span v-show="user.job == 2">讲师</span>
          <span v-show="user.job != 1 && user.job != 2">其他</span>
       </td>
        <td>{{user.entrydate}}</td>
        <td>{{user.updatetime}}</td>
      </tr>
<!-- 
      <tr v-for="(user, index) in userList" :key="user.id">
        <td>{{index+1}}</td>
        <td>{{user.name}}</td>
        <td> <img :src="user.image"> </td>
        <td>
          {{(user.gender==1 ? '男' : '女')}}
        </td>
        <td> <span  v-if="user.job == 1">老师</span>
              <span v-else-if="user.job == 2">班主任</span>
              <span v-else-if="user.job == 3">其他</span>
       </td>
        <td>{{user.entrydate}}</td>
        <td>{{user.updatetime}}</td>
      </tr> -->

    </table>
  </div>

  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
      data() {
        return {
          name:'',
          gender:'',
          job:'',
          userList: [
            {
              "id": 1,
              "name": "谢逊",
              "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg",
              "gender": 1,
              "job": 1,
              "entrydate": "2023-06-09",
              "updatetime": "2023-07-01 00:00:00"
            },
            {
              "id": 2,
              "name": "韦一笑",
              "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg",
              "gender": 1,
              "job": 1,
              "entrydate": "2023-06-09",
              "updatetime": "2023-07-01 00:00:00"
            },
            {
              "id": 3,
              "name": "黛绮丝",
              "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/3.jpg",
              "gender": 2,
              "job": 2,
              "entrydate": "2023-06-09",
              "updatetime": "2023-07-01 00:00:00"
            },
            {
              "id": 4,
              "name": "殷天正",
              "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg",
              "gender": 1,
              "job": 3,
              "entrydate": "2023-06-09",
              "updatetime": "2023-07-01 00:00:00"
            }
          ]
        }
      },
      methods:{
        search(){
          console.log(`用户要搜索的条件是：${this.name} --- ${this.gender} --- ${this.job}`)
        }
      }
    }).mount("#app");
  </script>
</body>

</html>

vue生命周期：
八个状态：

代码示例：


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

    <div id="app">

    </div>

    <script type="module">
         import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        
         createApp({

                    //组件创建之前执行
                beforecreated(){
                    console.log('组件创建之前执行');
                },

                created(){
                    console.log('组件创建后');
                },

                // 组件载入之前
                beforeMount(){
                    console.log('组件载入之前');
                },

                 // 组件挂载完执行
                mounted(){
                    console.log('组件挂载完毕，自动执行该函数');
                },

                // 组件销毁前
                beforeUnmount(){
                    console.log('组件销毁前');
                },

                // 组件销毁后
                unmounted(){
                    console.log('unmounted  ');
                }
              
         }).mount('#app')
    </script>
    
</body>
</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>原生Ajax</title>
</head>
<body>  
    <input id="btn1" type="button" value="获取数据">
    
    <div id="div1"></div>

    <script>
        document.querySelector('#btn1').addEventListener('click', ()=> {
          //1. 创建XMLHttpRequest 
          var xmlHttpRequest  = new XMLHttpRequest();
          
          //2. 发送异步请求
          xmlHttpRequest.open('GET', 'http://47.98.197.202/api/emps/list');
          xmlHttpRequest.send();//发送请求
          
          //3. 获取服务响应数据
          xmlHttpRequest.onreadystatechange = function(){
              if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                  document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
              }
          }
        })
    </script>
</body>
</html>

Axios

    介绍：

 使用步骤：

axios入门案例：
<!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>
</head>
<body>
    
    <input type="button" value="获取数据GET" id="btnGet">

    <input type="button" value="删除数据POST" id="btnPost">

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>

        // 发送get请求

        document.querySelector('#btnGet').addEventListener('click', () =>{
                    axios({
                    method:'GET',
                    url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
                }).then((result) => {
                    console.log(result.data);
                }).catch((err) => {
                    console.log(err);
                });
        });

        // 发送post请求
        document.querySelector('#btnPost').addEventListener('click', () =>{
                    axios({
                    method:'POST',
                    url:' https://mock.apifox.cn/m1/3083103-0-default/emps/update',
                }).then((result) => {
                    console.log(result.data);
                }).catch((err) => {
                    console.log(err);
                });
        });
    </script>
</body>
</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>
</head>
<body>
    
    <input type="button" value="获取数据GET" id="btnGet">

    <input type="button" value="删除数据POST" id="btnPost">

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>

        // 发送get请求

        document.querySelector('#btnGet').addEventListener('click', () =>{
                    axios.get('  https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => {
                    console.log(result.data);
                }).catch((err) => {
                    console.log(err);
                });
        });

        // 发送post请求
        document.querySelector('#btnPost').addEventListener('click', () =>{
                    axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update').then((result) => {
                    console.log(result.data);
                }).catch((err) => {
                    console.log(err);
                });
        });
    </script>
</body>
</html>
综合案例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>Vue3-案例1</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    table,th,td {
      border: 1px solid #000;
      border-collapse: collapse;
      line-height: 50px;
      text-align: center;
    }

    #center,table {
      width: 60%;
      margin: auto;
    }

    #center {
      margin-bottom: 20px;
    }

    img {
      width: 50px;
    }

    input,select {
      width: 17%;
      padding: 10px;
      margin-right: 30px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .btn {
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <div id="app">
    <div id="center">
      姓名: <input type="text" v-model="name">
      性别:
      <select name="gender" v-model="gender">
        <option value="1">男</option>
        <option value="2">女</option>
      </select>
      职位:
      <select name="job" v-model="job">
        <option value="1">讲师</option>
        <option value="2">班主任</option>
        <option value="3">其他</option>
      </select>

      <input class="btn" type="button" value="查询" @click="search">
    </div>
        <div style="text-align: center;">{{name}} --- {{gender}} --- {{job}}</div>
    <table>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>头像</th>
        <th>性别</th>
        <th>职位</th>
        <th>入职时间</th>
        <th>更新时间</th>
      </tr>


      <tr v-for="(user, index) in userList" :key="user.id">
        <td>{{index+1}}</td>
        <td>{{user.name}}</td>
        <td> <img :src="user.image"> </td>
        <td>
          <span v-if="user.gender == 1">男</span>
          <span v-else-if="user.gender == 2">女</span>
          <span v-else>其他</span>
        </td>
        <td> 
          <span v-show="user.job == 1">班主任</span>
          <span v-show="user.job == 2">讲师</span>
          <span v-show="user.job != 1 && user.job != 2">其他</span>
       </td>
        <td>{{user.entrydate}}</td>
        <td>{{user.updatetime}}</td>
      </tr>

    </table>
  </div>

  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
      data() {
        return {
          name:'',
          gender:'',
          job:'',
          userList: []
        }
      },
      methods:{
        search(){
            axios.get(`http://47.98.197.202/api/emps/list?name=${this.name}&gender=${this.gender}&job=${this.job}`).then((result) => {
                  this.userList = result.data.data;
            }).catch((err) => {
                console.log(err);
            });
        }
      },

      //声明一个钩子函数 挂载完成就调用search方法
      mounted(){
        this.search();
      }
      
    }).mount("#app");
  </script>
</body>

</html>
综合案例2：

效果图：

代码：

<!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>Vue3-案例1</title>
  <style>
    table,th,td {
      border: 1px solid #000;
      border-collapse: collapse;
      line-height: 50px;
      text-align: center;
    }

    #center,table {
      width: 60%;
      margin: auto;
    }

    #center {
      margin-bottom: 20px;
    }

    img {
      width: 50px;
    }

    input,select {
      width: 17%;
      padding: 10px;
      margin-right: 30px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .btn {
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <div id="app">
    <div id="center">
      姓名: <input type="text" v-model="name">
      性别:
      <select name="gender" v-model="gender">
        <option value="1">男</option>
        <option value="2">女</option>
      </select>
      职位:
      <select name="job" v-model="job">
        <option value="1">讲师</option>
        <option value="2">班主任</option>
        <option value="3">其他</option>
      </select>

      <input class="btn" type="button" value="查询" @click="search">
    </div>

    <table>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>头像</th>
        <th>性别</th>
        <th>职位</th>
        <th>入职时间</th>
        <th>更新时间</th>
      </tr>

      <tr v-for="(user, index) in userList" :key="user.id">
        <td>{{index + 1}}</td>
        <td>{{user.name}}</td>
        <td> <img :src="user.image"> </td>
        <td>
            <span v-show="user.gender == 1">男</span>
            <span v-show="user.gender == 2">女</span>
        </td>
        <td>
            <span v-if="user.job == 1">班主任</span>
            <span v-else-if="user.job == 2">讲师</span>
            <span v-else>其他</span>
        </td>
        <td>{{user.entrydate}}</td>
        <td>{{user.updatetime}}</td>
      </tr>
    </table>
  </div>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

    createApp({
      data() {
        return {
            name:'',
            gender:'',
            job:'',

          userList: []

        }
      },

      methods:{
        search(){
                axios.get(`http://47.98.197.202/api/emps/list?name=${this.name}&gender=${this.gender}&job=${this.job} `).then((result) => {
                    this.userList = result.data.data;
                }).catch((err) => {
                    console.log(err);
                });
           }
      },
      mounted(){
            this.search();
      }
    }).mount("#app");
  </script>
</body>

</html>
综合案例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>作业5</title>
</head>

<body>
    <!--3 将模型数据和视图进行绑定-->
    <div id="app">
        <!-- 展示模型数据 -->
        <p>输入的姓 名是：{{user.name}}</p>
        <p>输入的年 龄是：{{user.age}}</p>
        <p>选择的性 别是：{{user.gender}}</p>
        <p>选择的爱 好是：{{user.hobby}}</p>

        <hr>
        
        <form action="">
            姓名:<input type="text" v-model="user.name"><br><br>

            年龄:<input type="text"  v-model="user.age"><br><br>

            性别:<input type="radio" value="man"  v-model="user.gender">男
                <input type="radio" value="woman"  v-model="user.gender">女<br><br>
                
            爱好:<input type="checkbox" value="sing" v-model="user.hobby">唱
                <input type="checkbox" value="dance"  v-model="user.hobby">跳
                <input type="checkbox" value="basketball"  v-model="user.hobby">篮球<br><br>
                
                <input type="button" id="btn" value="保存" v-on:click="save">
        </form>
    </div>



<!--2 定义Vue对象，初始化模型数据-->
<script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        createApp({
            data() {
                return {
                    user:{
                        name:'',
                        age:'',
                        gender:'',
                        hobby:[]
                    }
                }
            },

            methods:{
                save(){
                    alert(
                        '姓名：'+this.user.name+
                        '年龄:'+this.user.age+
                        '性别：'+this.user.gender+
                        '爱好：'+this.user.hobby
                    )
                }
            }
        }).mount('#app')

</script>

</body>
</html>

综合案例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>作业4</title>
</head>

<body>
    <!--3 将模型数据和视图进行绑定-->
    <div id="app">
        <!--扩展需求：在下方表格中展示品牌信息-->
        <table id="brandTable" border="1" cellspacing="0" width="100%">
            <tr>
                <th>序号</th>
                <th>品牌名称</th>
                <th>企业名称</th>
                <th>排序</th>
                <th>品牌介绍</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            
            <tr align="center" v-for=" (brand,index) in brands">
                <td>{{index + 1}}</td>
                <td>{{brand.brandName}}</td>
                <td>{{brand.companyName}}</td>
                <td>{{brand.ordered}}</td>
                <td>{{brand.description}}</td>
                <td> 
                    <font color="gree" v-show="brand.status == 1">启用</font>
                    <font color="red" v-show="brand.status == 0">禁用</font>
                </td>
                <td><a href="#">修改</a> <a href="#">删除</a></td>
            </tr>
        </table>
    </div>

  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data() {
        return {
          brands: [{
                brandName: "三只松鼠",
                companyName: "三只松鼠",
                ordered: "100",
                description:"三只松鼠，好吃不上火",
                status: 1
            }, {
                brandName: "优衣库",
                companyName: "优衣库",
                ordered: "10",
                description:"优衣库，服适人生",
                status: 0
            }, {
                brandName: "小米",
                companyName: "小米科技有限公司",
                ordered: "1000",
                description:"为发烧而生",
                status: 0
            }, {
                brandName: "华为",
                companyName: "华为科技有限公司",
                ordered: "100",
                description:"没有伤痕累累，哪来皮糙肉厚，英雄自古多磨难",
                status: 1
            }]
        }
      }
    }).mount('#app')
  </script>
</body>
</html>
综合案例5：

 效果图：

代码：

<!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>作业5</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    
    <!-- 需求: Vue挂载完成后,通过axios发送异步请求到服务端,或者学生列表数据,并通过Vue展示在页面上. -->
    <div id="app">
        
        <table border="1" cellspacing="0" width="80%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(stu, index) in students" :key="stu.id">
                <td>{{index + 1}}</td>
                <td>{{stu.name}}</td>
                <td><img :src="stu.image" height="50" width="70"></td>
                <td>{{stu.age}}</td>
                <td>
                    <span v-if="stu.gender == 1">男</span>
                    <span v-else-if="stu.gender == 2">女</span>
                </td>
                <td>{{stu.score}}</td>
                <td>
                    <span style="color: green;" v-if="stu.score>= 85">优秀</span>
                    <span style="color: yellow;" v-else-if="stu.score >= 60 && stu.score < 85">及格</span>
                    <span style="color: red;" v-else-if="stu.score < 60">不及格</span>
                </td>
            </tr>
        </table>
    </div>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data() {
        return {
          students: []   
        }
      },
      mounted(){
        axios.get('https://mock.apifox.com/m1/3128855-0-default/student').then((result) => {
                    this.students = result.data.data;
                }).catch((err) => {
                    console.log(err);
                });
      }
    }).mount('#app')
  </script>
  </body>
</html>
举报

相关推荐

使用.NET实现WOL唤醒远程开机

java前端服务器

ASP.NET版本WOL服务的使用

vue.jsjavascript前端

在Tomcat上部署WebService服务

webservicejavatomcat部署xmltomcat

在Ubuntu上部署 Misskey 服务器

ubuntulinux运维

在Mono 2.8上部署ASP.NET MVC 2

mvcasp.netapacheOpenStack云计算

在window上部署ElasticSearch并注册成服务

elasticsearch搜索引擎大数据

在Linux服务器上部署Spring Boot

javaspring bootlinux服务器

在腾讯云云函数计算上部署.NET Core 3.1

.netbootstrap封装虚拟化云计算

在服务器上部署pycharm上的fastapi项目

pythonpycharm

在VSCode上部署CodeWhisperer

AWSGenAICodeWhisperer云服务云计算
0 条评论
加载失败