java开发必备的Vue知识点和技能

已于 2023-12-02 08:49:42 修改
阅读量1.2k 收藏 2
点赞数 30
分类专栏： 前端技术分享 文章标签： javascript 前端 vue.js
于 2023-11-27 10:06:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64502989/article/details/134616163
版权

vue介绍


    什么是Vue？vue就是一款用于构建用户界面的渐进式的JavaScript框架。（官方：https://cn.vuejs.org/）

  •     框架：就是一套完整的项目解决方案，用于快速构建项目。
  •     优点：大大提升前端项目的开发效率
  •     缺点：需要理解记忆框架的使用规则。

vue知识点


    快速入门：


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


             import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
      

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


                  createApp({                                                        
                                                                              
          }）


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


              <div id="app">
   
                  </div>


        4，准备数据


            data() {
                  return {
                            msg:'hello Vue'
                       }
                }


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

          
                <h1>{{msg}}</h1>

完整版代码：

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

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

作用：列表渲染，遍历容器的元素或者对象
语法：v-for = "(item,index) in items"

  •      items:要遍历的数据
  •      item：要遍历出来的元素
  •      index：  为索引/下标，从0开始 ；可以省略，省略index语法： v-for = "item in  items"

  v-for中的key  
   给元素添加的唯一标识，便于vue进行列表项的正确排序复用。
   语法： v-for = "(item,index) in items" :key="唯一值"
 特点：

  •  key的值只能是字符串或或者数据类型
  •  key的值必须具有唯一性
  • 推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

代码：

<!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样式等

            语法：

  •                 v-bind:属性名='属性值'
  •                 简化：:属性名='属性值'
  •                 v-bind绑定的数据必须要在data中定义。
<!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时渲染,否则不渲染

  •             语法：v-if='表达式'，表达式值为true，显示。为：false（隐藏）
  •             原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
  •             场景：要么显示，要么不显示，不频繁的切换的场景
  •             可以配合v-else-if/v-else 进行链式调用判断
        <td>
          <span v-if="user.gender == 1">男</span>
          <span v-else-if="user.gender == 2">女</span>
          <span v-else>其他</span>
        </td>

        v-show  

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

  •             语法：v-show='表达式'，表达式的值为true，显示。为false：隐藏。
  •             原理：基于css样式的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

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

            在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单项数据
            语法：v-model='变量名'
            v-model绑定的值必须在data中定义

<!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标签绑定事件

            语法：
                v-on:事件名='内联语句'
                v-on:事件名='函数名'
                简写： @事件名='' "

<!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生命周期：

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)

八个状态：

        状态                                        阶段周期

beforeCreate                                创建前

created                                         创建后

beforeMount                                载入前

mounted                                       载入后

beforeUpdate                                数据更新前

updated                                        数据更新后

beforeUnmount                             组件销毁前

unmounted                                    组件销毁后

代码示例：


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

 介绍：


        Asynchronous JavaScript And XML，    的JavaScript和XML①。

        
  

 作用：

  •         数据交换：通过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 对原生的Ajax进行了封装，简化书写，快速开发。官网：https://www.axios-http.cn/

 使用步骤：

  •         引入axios的js文件（复制官网上）
  •         使用Axios发送请求，并且获取相应的结果
async和await：

通过 async和await，来解决回调函数的问题。

  •         async 就是声明一个异步方法。
  •         await 是用来等待异步任务执行。

        注意：

await关键字只在async函数内有效，await关键字取代then函数，等待获取到请求成功的结果值。

没有用async和await时：

<!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>
      #center {
        margin-bottom: 20px;
      }

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

  <body>
    <div id="app">
      <div id="center">
        省:
        <select v-model="province">
          <option v-for="p in provinces" :key="p.id" :value="p.id">{{p.name}}</option>
        </select>
        市:
        <select v-model="city">
          <option v-for="c in cities" :key="c.id" :value="c.id">{{c.name}}</option>
        </select>
        区:
        <select v-model="area">
          <option v-for="a in areas" :key="a.id" :value="a.id">{{a.name}}</option>
        </select>
      </div>
    </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 {
            province: '',
            city: '',
            area: '',

            provinces: [],
            cities: [],
            areas: [],
          };
        },
        methods: {
            search(){
                //获取所有的省
                axios.get(`http://47.98.197.202/api/province`).then((res) =>{
                  this.provinces = res.data.data;
                  this.province = this.provinces[0].id;
                  //获取所有市
                  axios.get(` http://47.98.197.202/api/city?pid=${this.province}`).then((res) =>{
                    this.cities = res.data.data;
                    this.city = this.cities[0].id;

                    //  获取所有的街道
                    axios.get(`http://47.98.197.202/api/area?cid=${this.city}`).then((res) =>{
                      this.areas = res.data.data;
                      this.area = this.areas[0].id;
                    })
                  })
                })
            }
        },
        mounted() {
          this.search()
        },
      }).mount("#app");
    </script>
  </body>
</html>

使用async和await：

<!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>
      #center {
        margin-bottom: 20px;
      }

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

  <body>
    <div id="app">
      <div id="center">
        省:
        <select v-model="province">
          <option v-for="p in provinces" :key="p.id" :value="p.id">{{p.name}}</option>
        </select>
        市:
        <select v-model="city">
          <option v-for="c in cities" :key="c.id" :value="c.id">{{c.name}}</option>
        </select>
        区:
        <select v-model="area">
          <option v-for="a in areas" :key="a.id" :value="a.id">{{a.name}}</option>
        </select>
      </div>
    </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 {
            province: '',
            city: '',
            area: '',

            provinces: [],
            cities: [],
            areas: [],
          };
        },
        methods: {
            async search(){
    
                  //获取所有的省
                  let presult = await axios.get(`http://47.98.197.202/api/province`);
                  this.provinces = presult.data.data;
                  this.province = this.provinces[0].id;

                  //获取所有的市
                  let cresult = await axios.get(` http://47.98.197.202/api/city?pid=${this.province}`);
                  this.cities = cresult.data.data;
                  this.city = this.cities[0].id;

                    // 获取所有的街道
                   let aresult = await axios.get(`http://47.98.197.202/api/area?cid=${this.city}`);
                   this.areas = aresult.data.data;
                  this.area = this.areas[0].id;
                  
            }
        },
        mounted() {
          this.search()
        },
      }).mount("#app");
    </script>
  </body>
</html>

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：

  1. 要求在vue中，基于axios发送异步请求加载员工数据，并渲染展示在表格中。

  2. 点击查询时，还要根据条件动态实现查询功能。

  3. 请求url（GET请求）：http://47.98.197.202/api/emps/list

  4. 请求参数：name，gender，job

效果图：

代码：

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

  • 完成数据绑定 （将表单项的值绑定到对应的数据模型）。

  • 在上面区域 （p标签部分） 展示数据模型中的各项数据（通过插值表达式的形式）。

  • 点击保存时，需要获取到表单数据，并将其以弹出框形式展示出来（要看到对应中的每一项数据）。

 效果图：

 代码：

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

  • 将数据模型中定义的数组内容，遍历展示在table表格中

  • 表格中的 序号，需要从1开始

  • 状态 如果为1，展示启动；如果未0，展示禁用

效果图：

代码：

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

需求：Vue挂载完成后,通过axios发送异步请求到服务端,获取学生列表数据,并通过Vue展示在页面上。

获取数据url：https://mock.apifox.com/m1/3128855-0-default/student

 效果图：

代码：

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

烛照103
关注
  • 30
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Java零基础——vue篇
m0_47946173的博客
12-01 2141
它是一个构建用户界面的框架 Vue是一个前端框架 js jq https://www.pmdaniu.com/#file UI网站 UI 一般开发者使用蓝湖 工具 看着UI图 写接口。
java-Vue
qq_40301475的博客
03-15 2850
标题
前后端分手大师——MVVM 模式
weixin_34130389的博客
11-15 552
阅读目录简而言之组成部分没有什么是一个栗子不能解决的 简而言之 之前对 MVVM 模式一直只是模模糊糊的认识，正所谓没有实践就没有发言权，通过这两年对 Vue 框架的深入学习和项目实践，终于可以装B了有了拨开云雾见月明的感觉。 Model–View–ViewModel(MVVM) 是一个软件架构设计模式，由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Pet...
Java程序员入门Vue基础（一）
GalenGao
06-17 7086
文章目录1.为什么要学习VUE2. Vue的架构3. HelloWorld4. VUE-devtools 1.为什么要学习VUE 最近公司的领导让我抽空学习一下VUE，下一个项目要用到它。这么多年开发中也知道有VUE这个东西发展很迅猛，基本上国内的互联网企业用VUE的越来越多，而且面试招聘中也要求熟练和使用VUE的需求。 2. Vue的架构 在学习VUE之前了解过其是一个MVVM模型架构，JAVA程序员一定对MVC软件架构模式很清晰。MVC分为 Model（模型）、Controller（控制器）、Vie
vue3使用指南
qq_42880714的博客
05-11 2240
vue3使用指南
java开发实习周记12篇.doc
11-23
java开发实习周记12篇是关于java开发实习的周记文章，共有12篇文章，从实习第一周到实习第十二周，每篇文章都记录了实习生的实习经历和java开发知识点。下面是每篇文章的知识点总结： 实习第一周 了解公司背景、...
开发工程师 架构师,知识图谱
05-25
2. **Java架构师图谱**：针对Java开发的高级知识，涵盖了Java平台的高级特性、企业级应用开发、JVM优化、分布式系统设计等，是成为Java架构师必备的知识。 3. **微服务架构秘籍**：讲解了微服务架构的设计原则、...
java面试题，面试必备知识
11-09
Java面试题，作为面试必备知识，涵盖了广泛的领域，...对于每个知识点，都需要深入学习和实践，才能在面试中展现出扎实的技能和经验。Java开发者应持续学习，保持对新技术的关注，以便在竞争激烈的IT行业中脱颖而出。
Java Web项目开发案例精粹18-航空订票系统
07-16
本项目以航空订票系统为背景，涵盖了多种核心技术和关键概念，下面将详细阐述其中涉及的知识点。 1. **Java Web基础**：首先，你需要掌握Java Web的基础知识，包括Servlet、JSP（JavaServer Pages）以及它们在HTTP...
最新 Java全栈高级开发 就业班（完结）
07-07
通过以上知识点的学习，学员将具备完整的Java全栈开发能力，能够在就业市场中脱颖而出。"Java全栈高级开发 就业班（完结.txt）"可能是课程的结业证书或者学习总结，记录了学员在课程中的学习成果和经验。
vue 基础（一）
youhaiguo的博客
07-26 303
VUE 一. 开发工具 VUE开发环境个人推荐使用VS code, 然后安装特定的插件即可开发，可用插件如下： Vetur —— 语法高亮、智能感知、Emmet等 EsLint—— 语法纠错 Auto Close Tag —— 自动闭合HTML/XML标签 Auto Rename Tag —— 自动完成另一侧标签的同步修改 Path Intelli...
第四章：Ajax
m0_72232218的博客
01-18 576
效果一样上面是准备工作下面是具体的操作result.data表示整个JSON数据result.data.data表示其中的key为data的那个部分的数据就是下面这一部分this表示当前的vue对象this.emps表示中vue这个对象的emps这个数据模型（emps这个数据模型是用来处理数组的）下面我们只要遍历展示这个emps数据模型中的数据即可v-bind被省略了。
狂神说 Vue笔记
热门推荐
DDDDeng_的博客
07-20 3万+
狂神说 Vue 笔记 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管理：vuex Vue-UI : ICE , Element UI 一、前端核心分析 1. VUE 概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注
Vue入门
weixin_43587055的博客
06-23 884
Vue是一套用于构建用户界面的渐进式框架，Vue被设计为可以自底向上逐层应用。
vue ajax axios
qq_21279815的博客
06-20 54
加载html页面时自动触发vue——>vue挂载时自动触发异步请求，axios调用get方法，在回调函数中将data数据放到emps数据模型。
JavaWeb——Vue
mxyjsu2021的博客
04-30 1488
Vue.js是一个流行的前端JavaScript框架，用于构建单页应用程序和可重用组件。Vue.js的设计目标是提供一种简单的方法来构建Web应用程序，同时尽可能地灵活和高效。Vue.js也被称为MVVM(Model-View-ViewModel)框架，因为它将应用程序的状态和行为分离成模型(model)、视图(view)和视图模型(viewmodel)的组件。官网：Vue.js修改变量的值，标签值自动变化；反过来，修改标签的值，变量的值也跟着更新，这就是双向绑定。
【前端内容学习】vue的引用，下载，语法
weixin_62697030的博客
11-25 1731
原版本应该是三种使用方式，但是现在vue官网好像已经找不到关于本地下载的内容了1，直接在官网上引用网络CDN文件，注意这种引用方式，要把这一段写在所有使用vue的部分前面2.对于大型文件，例如开发前后端分离程序（手绘组管理系统），使用npm下载我这里使用的应该是的。。。。这样会直接创建一个完整的前端部分，注意，为了后面不被卡住，我们最好使用一下淘宝镜像在命令行窗口使用指令如果想知道自己是否成功安装镜像，可以用指令验证然后再下载vue。
vue基础——java程序员版(vue入门)
最新发布
陨石的博客
03-19 1619
​ 这是一个java程序员的vue学习记录。
Java-Vue基础
baidu_40924406的博客
10-11 575
//创建组件步骤//1.创建一个组件对象template:"<h1>欢迎来到王者荣耀</h1>"})//2.注册组件el:"#app",})
Java Web面试必备知识点汇总
在Java Web开发面试中，面试官通常会考察候选人的基础知识、编程技能以及实际项目经验。以下是一些可能的面试知识点： 1. **Java基础知识**： - **面向对象特征**：包括抽象、继承、封装和多态。抽象关注核心功能...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值