异步交互员工列表案例(Vue)

 

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

 

      createApp({
        data() {
          return {
                searchForm: {
                    name: '',
                    gender: '',
                    job: ''
                },
                empList: []//这里要保留一个空结构
            }
        },
        methods:{
            async search(){
                //根据用户输入的搜索条件，基于axios发送异步请求(https://web-server.itheima.net/emps/list)到服务端...
                let result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);
                this.empList = result.data.data;
            },
            clear(){
                this.searchForm={name:'',gender:'',job:''};//给赋值别忘了写属性名和冒号
                this.search;//()这里少了个括号 Vue中v-on调用不带括号的 但是js中调用是要带括号的
            }
        },
        mounted(){//钩子函数 既然是函数就别忘了带上(){} 不是冒号：{} 但注意一点本钩子函数和data平齐 是一个级别的
            this.search();//调用本js中的函数别忘了带上this.
        }
            
                
            
      }).mount('#container');
    </script>