javascript - Interaction with jQuery's ajax background in vuejs

Question

I want to use vuejs to call jQuery's ajax, but the event on the page is triggered. I want it to be triggered as soon as the page is loaded. How to do it?
The code is as follows:
HTML:

<p id="app">
     <button id="but" v-on:click="showData">测试加载数据</button>
     <table border="1">
       <tr v-for="data in users">
           <td>{{data.name}}</td>
           <td>{{data.details1}}</td>
           <td>{{data.details2}}</td>
       </tr>
   </table>
</p>

js:

var vum = new Vue({
    el:"#app",
    data:{
        users:""
    },
    methods:{
        showData:function(){
            $.ajax({
                url:"请求路径",
                type:"post",
                dataType:"json",
                success:function(result){
                    if(result.state==0){
                        vum.users = result.data;
                    }
                },
                error:function(){
                    alert("请求失败");
                }
            });
        }
    }
});

What should I do to send an ajax request as soon as the page is loaded? Please give me some advice, thank you very much

Answer 1

var vum = new Vue({
    el:"#app",
    data:{
        users:""
    },
    created () {
        $.ajax({
            url:"请求路径",
            type:"post",
            dataType:"json",
            success:function(result){
                if(result.state==0){
                    vum.users = result.data;
                }
            },
            error:function(){
                alert("请求失败");
            }
        });
    },
    methods:{
        
    }
});

Answer 2

Then you write it outside, why write it inside the showData method?

Answer 3

You can read the vue documentation about the component life cycle. Mounted() or created() can be used to meet your needs