.html引入vue.js及axios

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html> -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<body>
    233
    <div id="app">
        {{ message }}
        <div @click="test">按钮</div>
        <div @click="test2">按钮2</div>
        <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
        {{testGetData}} ===
    </div>
</body>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            todos: [
                { text: '1212' },
                { text: '21312' },
                { text: '1233' }
            ],
            testGetData: ''
        },
        methods: {
            test2() {
                this.message = 'change'
            },
            test() {
                console.log(11)
                this.testGet()
            },
            testGet() {
                axios
                    .get('/pc/center/mall', {
                        params: {
                            cat: 2,
                            isfromajax: 1
                        }
                    })
                    .then(response => {
                        console.log(response);
                        this.testGetData = response.data.return_data[0].content
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
        },
        mounted() {
            this.testGet()
            console.log('钩子')
        }
    })
</script>

</html>

 

版权声明：本文为Lakeson原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。