vue小练习之记事本

    <div id="Book" style="background-color: cornflowerblue;">
        <h2 style="text-align: center;">记账本</h2>
        <div style="text-align: center;">
            支出:<input type="text" v-model="one.name">
            金额:<input type="text" v-model="one.price">
            <button @click="add()">添加</button>
        </div>
        <table style="margin: auto auto;width: 60%;" border="0" cellspacing="0">
            <tr>
                <th style="width: 30%;">支出</th>
                <th style="width: 30%;">金额</th>
                <th style="width: 40%;">操作</th>
            </tr>
            <tr v-for="(item , index) in good" :key="index.id">
                <td>{{ item.name }}</td>
                <td>{{ item.price }}</td>
                <td>
                    <a href="javascript:">修改</a>
                    <a href="javascript:" @click="del(item.id)">删除</a>
                </td>
            </tr>
        </table>
        <div id="main" style="width: 600px;height:400px;text-align: center;"></div>
    </div>
    <script>
        const Book=new Vue({
            el:'#Book',
            data:{
                good:[],
                one:{
                    creator:'小牛',
                    name:'',
                    price:''
                }
            },
            mounted(){
                this.refresh()

                this.e = echarts.init(document.getElementById('main'));
                this.e.setOption(
                    {
                        title: {
                            text: '消费账单',
                            subtext: '',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: '单项消费',
                                type: 'pie',
                                radius: '40%',
                                data: [],
                                emphasis: {
                                    itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    }
                )
            },
            methods:{
                async refresh(){
                    const res = await axios.get('https://applet-base-api-t.itheima.net/bill',{
                        params:{
                            creator:'小牛'
                        }
                    })
                    this.good=res.data.data
                    console.log(res)
                    this.e.setOption({
                            series: [{
                                    data: this.good.map(item => ({ value : item.price , name : item.name }))
                                }]
                        })
                },
                async add(){
                    const res = await axios.post('https://applet-base-api-t.itheima.net/bill',this.one)
                    this.refresh()
                    this.one.name=''
                    this.one.price=''
                },
                async del(id){
                    const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
                    this.refresh()
                }
            }
        })
    </script>

    <div id="test">
        <button @click="gggg()">1111</button>
    </div>
    <script>
        const test=new Vue({
            el:'#test',
            data:{
                num:''
            },
            methods:{
                async gggg(){
                    console.log('11111111')
                    const response = await axios.get(
                        'http://localhost:8080/login'
                    )
                    console.log(response)
                }
            }

        })
    </script>
</BODY>
</HTML>