vue 页面加载完自动请求ajax加载数据

vue 专栏收录该内容
3 篇文章 0 订阅

第一种方法(这种方法数据会重复,不知道啥原因,知道的可以评论告诉我)

首先要引入vue.js

再引入axios.js 

<script src="/static/vue/kf_vue.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>
new Vue({
	el: '#vue_list',
	data: {
		list: {}
	},
    // 事件区域
    created(){
      // 点击事件
    },
    //存放方法区域
    methods: {
    	// 创建convert方法
		convert:function () {
			axios.post("{:url('indexApi/client')}").then(res => {
                //ajax返回值赋值给 data中list
				this.list=res
			})
		}
    },
    //页面加载完自动加载区域
    mounted(){
        //自动加载convert方法
        this.convert();
    }
})
</script>

第二种方法

new Vue({
	el: '#vue_list',
	data: {
		list: {}
	},
    //数据渲染后的操作
    created(){
      // 点击事件
    },
    // 方法存放区
    methods: {
    	/*var that=this;
		convert:function () {
			axios.post("{:url('indexApi/client')}").then(res => {
				that.list=res
			})
		}*/
		/*function i_list(data){
			$.post("{:url('indexApi/client')}",data,function(e){
	        	console.log(e)
	        	that.list=e
	        })
		}*/
    },
    //页面加载完自动执行
    mounted(){
    	var that=this,data={}
        $.post("{:url('indexApi/client')}",data,function(e){
            // 赋值给data 中list
        	that.list=e
        })
    }
})

 

  • 3
    点赞
  • 0
    评论
  • 4
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:黑客帝国 设计师:我叫白小胖 返回首页

打赏作者

微齐天大圣.

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值