单HTML文件集成Vue2+axios的使用

bjzhang75

已于 2024-08-25 18:54:24 修改

阅读量59

点赞数 1

文章标签： vue axios

于 2024-08-25 17:57:57 首次发布

本文链接：https://blog.csdn.net/bjzhang75/article/details/141531476

版权

1、下载vue2.js和axios.js到本地
2、建一个HTML文件，内容如下：

<html>
<head>
    <meta charset="UTF-8">
    <script src="./js/vue2.js"></script>
    <script src="./js/axios.js"></script>
</head>

<body>
    <div id="app">
        <p>vue2+axios</p>
        <div>{{ info }}</div>
        <button @click="getInfo">getInfo</button>
    </div>

    <script>
        new Vue({
            el: "#app",
            data:{
                info:''
            },
            methods: {
                getInfo() {
                    that = this
                    axios.get("https://127.0 0.1/getInfo")
                        .then(response => {
                            console.log(response.data)
                            that.info=response.data
                        })
                        .catch( error => {
                            console.log(error)
                        });
                    }
            }
        })
    </script>
</body>

</html>