当前位置：首页 > article >正文

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

article 2025/2/26 18:55:13

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>