学习记录(day04-axios增删改查、v-for循环、页面加载成功处理函数)

[TOC]

1.1 基本语法：插值表达式

<template>
  <div>
      {{username}}  <br/>
      {{1+2+3}} <br/>
      {{'你的名字是：' + username}} <br/>
      {{'abc'.split('')}}
  </div>
</template>

<script>
export default {
    //data区域
    data() {
        return {
            username:'jack123'
        }
    },
}
</script>
<style>
</style>

1.2基本语法：v-for循环

<template>
  <div>
    {{allUser}}  <br/>

      
    <!-- v-for进行遍历，必须依托标签 
        v-for="遍历 in 集合"
    -->
    <span v-for="user in allUser" :key="user">{{user.username}} --- {{user.password}} </span>

    <!-- v-for="(遍历,索引) in 集合" -->
    <table>
        <tr v-for="(user,index) in allUser" :key="index">
            <td>{{index+1}} </td>
            <td>{{user.username}} </td>
            <td>{{user.password}} </td>
        </tr>
    </table>
  </div>
</template>

<script>
export default {
    data() {
        return {
            allUser : [
                {username:'jack',password:'1234'},
                {username:'rose',password:'6666'},
            ]
        }
    },
}
</script>
<style>
</style>

1.3 基本语法：页面加载成功处理函数

<template>
  <div></div>
</template>

<script>
export default {
    created () {
        //页面加载成功执行
        console.info('我加载了。。。。')
    }
}
</script>

<style>

</style>

1.4 基本功能：查询所有，vue显示

1. 导入axios组件
2. 页面加载成功后发送ajax，查询所有
3. 将查询结果存放data区域中
4. 使用v-for遍历data区域数据

<template>
    <div>
          <!-- 4 遍历data区域的数据 -->
        <table border="1" width="400">
         <th>编号</th>            
         <th>姓名</th>
         <th>密码</th>
         <th>操作</th>
         <tr v-for="(user,index) in ulist" :key="index">
            <td>{{index+1}}</td>
            <td>{{user.username}}</td>
            <td>{{user.password}}</td>
            <td>
 <a href="">查询</a> <a href="">删除</a> <a href="">修改</a>
            </td>
         </tr>
        </table>
    </div>
</template>

<script>
//1.1 导入axios组件
const axios = require('axios');
//1.2 基本路径
axios.defaults.baseURL='http://localhost:8080';
export default {
        data() {
            return {
                //3.1 定义变量
                ulist:[],
            }
        },
        created() {
            //2 页面加载成功,发送ajax查询所有
            axios.get('/user').then(res => {
                //3.2 将查询结果存放data区域
               this.ulist = res.data;
            })
            .catch(err => {
                console.error(err); 
            })
        },
}
</script>

<style>

</style>

---

日常学习的总结，主要是为了自己以后看，当然大家有什么好的建议，欢迎评论留言。