vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListener('scroll', this.onScroll) }) }, 2: methods: { // 获取滚动条当前的位置 getScrollTop () { var scrollTop = 0 if (document.documentElement && document.documentE…

vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axios引入方法: import Axios from 'axios' Vue.prototype.$axios = Axios 必须要这样引入才能使用 全部的main.js方法如下 // The Vue build version to load with the `import` command /…

vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.(但是目前它已经停止更新了) 1.在vue中安装vue-resource插件 打开vue项目文件夹下的package.json 添加vue-resource版本 再打开src下的main.js文件,import一下vue-resource 然后运行一下vue的项目,项目会提示你下载vue-resource插件,npm install一下即可 2.创建一个新的vue页面,用来测试…

为什么要请求本地的数据?模拟后台的请求数据,验证页面的逻辑是否存在问题,抛开后台提前开发等. 常用的说来有:jq的方式 约等于 axios的方式,vuex状态管理的方式 个人认为最好用的就是jq的方式,应为jq请求使用最为频繁. 1.jq方式 1.1 首先在vue中引入全局 jq  常见引入jq的方法有:直接在根目录的index.html中引入jq 这样引入jq存在一个问题,有时候没有被加载,就会造成jq不能使用: 引入全局jq的较优方案:更改build下的配置文件,详情链接. 1.2  在组件…

mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.adjustTable(event); }); }, ...... // target中的属性很多,可以通过控制台查看—-clientWidth可以获取除滚动条外的可视区域宽度 adjustTable(event) { this.clientWidth = event.target.cli…

<el-table-column prop="isstate" label="状态"></el-table-column> 以上是显示后台返回的1 or 0 需求是要求从1和0 改成已审核和未审核 <el-table-column prop="isstate" :formatter = "stateFormat" label="审核状态"></el-table-co…

今天发现了个很奇怪的问题,我在做一个:点击列表  使点中的列表项变色的功能,而且是多个大列表项,在每个大列表项里点击切换列表项的时候不影响其他大列表项的选项. 解决思路,因为这些大列表项是请求到的数据v-for出来的,大列表项里的小列表项也是用大列表项里的数据v-for出来的,所以我选择在请求导数据时,给每个小列表项数据加一个isSelect属性,赋值false, 然后在小列表项上面绑定一个class,条件是判断isSelect属性等于某个值,然后这个class就绑定上去,上个代码看看: <li…

http://pan.baidu.com/s/1hrJfpli  demo下载地址 前言 在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据.用户的登录状态等等.vue父元素是可以通过props向子元素传递参数,子元素也可以通用smit向父元素传递参数.但是像购物车这种在项目中多个位置的引用时就会变得很麻烦.例如项目中使用了三个购物车的组件,那么当其中一个组件的值发生改变时,就要通过自身告诉父组件我的值发生改变了,然后父组件在通知其他两个购物车组件值发生改变了,需要进行同步,…

$('#allUsingProductTable').datagrid({  加载数据时,第二加载时table会发生变化会出现找不到问题.如果是弹框没有影响,弹框出现出现列表每次都会执行销毁方法. 解决办法 发送ajax请求获取数据,用$('#usingProductTableUpdate').datagrid('loadData', data.rows);加载数据 $(function(){ $('#usingProductTableUpdate').datagrid({ width: 'au…

table:表格元素及属性 <table width="80%" border="1" cellspacing="1" cellpadding="4" bgcolor="#CC99FF" bordercolor="#0000FF" align="center"><tr><td> </td><td> </…