精华内容
下载资源
问答
  • vue 页面加载自动请求ajax加载数据
    千次阅读
    2020-09-04 09:06:14

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

    首先要引入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
            })
        }
    })

     

    更多相关内容
  • 本篇文章主要介绍了vue实现动态添加数据滚动条自动滚动到底部的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本篇文章主要介绍了Vue下滚动到页面底部无限加载数据的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue+elementUI table表格展示数据,当数据很多的时候,不能一页显示完,同时一次请求数据量太大,会增加网页渲染的时间,影响体验, 这个时候常常有两种方法处理, 1、分页,如下   2、如果我不想分页,又想在一页...
  • 什么是数据响应式 ...对于第一个问题,如何知道数据发生了变化,Vue3 之前使用了 ES5 的一个 API Object.defineProperty Vue3 中使用了 ES6 的 Proxy,都是对需要侦测的数据进行 变化侦测 ,添加 gett
  • 今天小编就为大家分享一篇Vue刷新修改页面中数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 但是这样的机械化步骤我们完全可以用代码帮我们执行,更进一步,对于一些简单的页面,我们甚至可以一键生成页面,包括从后端请求数据等操作。 接下来我就一步步讲一下怎么样自动生成页面。 自动生成页面
  • 如果想要支持数据自动刷新,必然需要一个监听器能够实时监听到数据的变化然后告知Echarts重新设置数据。 所幸Vue为我们提供了==watcher==功能,通过它我们可以很方便的实现上述功能: watch:{ option:function...
  • 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个...
  • 轮播第二次之后,首屏会自动跳过 网上找了很多资料,都不能解决这个问题。于是自己琢磨了很久终于灵光一闪。一个小技巧解决了这个问题。 使用方法应该很简单,去官网可以查看到方法。基本步骤如下 npm install vue-...
  • 1.数据 2.表格 3.相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf...

    1.数据
    2.表格
    3.相关代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<style type="text/css">
    			#app{
    				margin: 50px auto;
    				width: 600px;
    			}
    			fieldset{
    				border: 1px solid orangered;
    			    margin-bottom: 20px;
    		    }
    			fieldset input{
    				width: 200px;
    				height: 20px;
    				margin: 10px 0;
    			}
    			table{
    				width: 600px;
    				border: 2px solid orangered;
    				text-align: center;
    			}
    			thead{
    				background-color: orangered;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="app">
    			<fieldset>
    				<legend>学生信息录入系统</legend>
    				<div>
    					<span>姓名:</span>
    					<input type="text" placeholder="请输入姓名" v-model="newStudent.name"/>
    				</div>
    				<div>
    					<span>年龄:</span>
    					<input type="text" placeholder="请输入年龄" v-model="newStudent.age"/>
    				</div>
    				<div>
    					<span>性别:</span>
    					<select v-model="newStudent.sex">
    						<option value="男">男</option>
    						<option value="女">女</option>
    					</select>
    				</div>
    				<div>
    					<span>手机:</span>
    					<input type="text" placeholder="请输入手机号码" v-model="newStudent.phone"/>
    				</div>
    				<button @click="createNewStudent(index)">创建新用户</button>
    			</fieldset>
    			<table>
    				<thead>
    					<tr>
    						<td>姓名</td>
    						<td>姓别</td>
    						<td>年龄</td>
    						<td>手机</td>
    						<td>删除</td>
    					</tr>
    				</thead>
    				<tbody>
    					<tr v-for="(p,index) in persons">
    						<td>{{p.name}}</td>
    						<td>{{p.sex}}</td>
    						<td>{{p.age}}</td>
    						<td>{{p.phone}}</td>
    						<td>
    							<button @click="deleteStudentMsg(index)">删除</button>
    						</td>
    					</tr>
    				</tbody>
    			</table>
    		</div>
    	</body>
    	<script type="text/javascript">
    		var vm = new Vue({
    			el:"#app",
    			data:{
    				persons:[],
    				newStudent:{
    					name:'',
    					age:0,
    					sex:"男",
    					phone:""
    				}
    			},
    			methods:{
    				createNewStudent(){
    					if (this.newStudent.name==='') {
    						alert('姓名不能为空');
    						return;
    					}
    					if (this.newStudent.age<=0) {
    						alert("请输入正确的年龄");
    						return;
    					}
    					this.persons.push(this.newStudent);
    					console.log(this.persons)
    					this.newStudent={name:'',age:0,sex:"男",phone:''}
    				},
    				deleteStudentMsg(index){
    					this.persons.splice(index,1)
    				}
    			}
    		})
    	</script>
    </html>
    
    
    展开全文
  • 如下所示: var c = new Vue({ el: "#cartoon", data: data, mounted: { ...以上这篇vue加载完成后的回调函数方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • 主要介绍了VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新),本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
  • 在使用vue的过程中,很多时候会遇到数据更新但是界面却不刷新,这个附件代码可以帮你解决,看看吧
  • 当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去; 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测...
  • 主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue动态加载ECharts图表数据小结

    千次阅读 2020-12-30 16:55:30
    刚接触echarts只是知道他能辅助前端做数据展示,但是他的demo数据都是写死的,而正常数据都是通过axios请求服务器动态填充获取的啊,为此还一顿研究.....(真是傻了)。因为它本身是很简单的,echarts就是通过option...

    刚接触echarts只是知道他能辅助前端做数据展示,但是他的demo数据都是写死的,而正常数据都是通过axios请求服务器动态填充获取的啊,为此还一顿研究.....(真是傻了)。因为它本身是很简单的,echarts就是通过option进行无脑堆叠的,option本身就是json,你可以随意设置,设置好了之后重新刷新就行了啊。。。。。。。。。。下面简单说一下我的程序吧。


     动态数据基本分三步:

    ①在data中定义空的option:{}

    ②在created中为option图表设置赋值(数据项可为null)

    ③mounted中setoption展示图表的同时为option数据赋值(series中data数据赋值,legend图例数据赋值等)

    具体请看下面

    目录

    1.引入图表

    2.数据更改为动态获取

    3.效果图--动态填充数据总览页


    1.引入图表

    引入常用的条形柱状图和南丁格尔扇形图。

    2.数据更改为动态获取

    首先在data中定义一个option选项,用来设置echarts所有配置项,这里先让他为空json,随后在create中对其进行赋值。

    之后在created钩子函数中对option设置项进行赋值,也就是dom元素还没有挂载的时候就填充设置项及数据(里面的series),到这里你data中的option就已经赋值了。

    option如何设置很无脑(真的很方便),可以直接参考echarts官网:

    https://echarts.apache.org/examples/zh/index.html#chart-type-bar

    之后就是关键的setOption了,使用刚指定的配置项和数据,显示图表。这里我完全定义成一个方法了。方便多处调用【mounted初始化,新数据刷新等】。

    option设置项ok了,但是数据还没有传进去,所以下一步就是动态填充数据,这里我再data中模拟axios获取的数据【以扇形南丁格尔图说明】

    之后在method中定义一个方法,为之前的option中的数据进行填充,因为此前option中涉及的数组都是空的。之后再mounted中挂载数据。

    mounted挂载时候将获取的数据传给option中的数据就万事大吉了!!

    之后如果有新数据来了,就可以btnRefreshNanding方法就ok了,其本质还是重新setoption是 this.chartPie.setOption(this.optionNanding);

    3.效果图--动态填充数据总览页

    展开全文
  • 用jquery的时候你会发现,页面渲染后动态生成的dom,在生成之前的代码是没...但是vue基于数据绑定的特性让它能生成的时候直接绑定数据。 html: <input type=text v-model=item.val style=width:40px>
  • 今天小编就为大家分享一篇Vue实现用户自定义字段显示数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 简单的vue表单信息动态添加修改
  • } 触发模板为 methods: { demo() { } }, mounted: function () { alert('页面一加载,就会弹出此窗口') } 要在fuction() 前面用async修饰、外部调用前面用await修饰,不然就会获取不到数据

    实例:

    methods:{
         onCreate:async function()  {
          const router = useRouter()
          const route = useRoute()
          const { id = '', f = 1 } = route.query
          console.log("======="+id)
          const res = await reqGetOrderNumByClientId({
            clientId: id
          })
             console.log("-------------------"+res+res.msg)
          if (res.code === 200) {
             await router.push({
              path: '/app/create',
              query: {
                id: id,
                f: f
              }
            })
          } else {
            Dialog.alert({
              title: '提示',
              message: res.msg,
              showCancelButton: false,
              confirmButtonText: '确定'
            })
          }
        }
      },
      mounted:function () {   //自动触发写入的函数
        this.onCreate();
      }
    

    触发模板为

    methods: {
              demo() {
              
              }
    
          },
     mounted: function () {
      alert('页面一加载,就会弹出此窗口')
     }
    

    要在fuction() 前面用async修饰、外部调用前面用await修饰,不然就会获取不到数据。

    展开全文
  • 实例如下: vm.$watch('某data数据',function(val){ ...以上这篇Vue监听数据渲染DOM完以后执行某个函数详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • 主要为大家详细介绍了vue实现列表的添加点击,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 1.滚动事件的方法 ,其中currentpage是分页中的pagenum , 也就是第几页数据 人后调用列表数据接口 即可。 2. 在mounted中挂载一下滚动的事件 3. 在离开页面时,移出滚动事件,避免有其他的影响 这样就可以...
  • 加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。 也叫延迟加载,即在需要的...
  • 在项目开发中遇到这样需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,实现方法其实很简单的,下面小编给大家带来了基于Vue实现tab栏切换内容不断实时刷新数据功能,需要...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 69,335
精华内容 27,734
热门标签
关键字:

vue 自动加载数据