青橙商城-day2 Element

最新推荐文章于 2023-02-25 18:17:51 发布

618GLOAL_COOK2237

最新推荐文章于 2023-02-25 18:17:51 发布

阅读量148

点赞数

分类专栏： ssm 青橙商城

本文链接：https://blog.csdn.net/GLOAL_COOK/article/details/115821541

版权

青橙商城同时被 2 个专栏收录

30 篇文章 5 订阅

订阅专栏

ssm

7 篇文章 0 订阅

订阅专栏

1.箭头函数

在这里插入图片描述

我是傻逼，那个el全是英文的，不是e1啊。
axios的get中的路径时反引号+${}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌管理</title>
    <link rel="stylesheet" href="../css/elementui.css">
</head>
<body>

<div id="app">
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="ID"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="letter"
                label="首字母">
        </el-table-column>
        <el-table-column
                label="图片"
                width="180">
            <template slot-scope="scope">
                <img :src="scope.row.image">
            </template>
        </el-table-column>
    </el-table>
</div>


<script src="../js/vue.js"></script>
<script src="../js/elementui.js"></script>
<script src="../js/axios.js"></script>

<script>
    new Vue({
        el:"#app",
        data(){
            return {
                tableData: []
            }
        },
        created(){
            axios.get("/brand/findAll.do").then(response=>{
                this.tableData=response.data;
            });
        }

    })
</script>
</body>
</html>

在这里插入图片描述效果如这：

2.v-model

v-model绑定searchMap给某个输入框，那么这个输入值就可以作为参数传过去给后端(前提在data定义searchMap对象)

3.axios.get.then()和catch

axios.get（）如果请求某个路径获得资源后，可以再用then()回调函数把这个资源赋值给前端的某个变量，不赋值数据给前端也可以，你也可以使用then()回调再刷新某个页面。then()回调就是你axios.get或者post发送请求后，再要干嘛的函数而已（一般在then写把你从后端得到的数据通过前端来展示的代码）。

在这里插入图片描述