.html引入vue.js及axios

怼烎@ 2022-12-19 06:14 244阅读 0赞

<!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>