在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方，本来移动端开发H5应用，准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用，但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题，所以最后拍照上传功能还是使用input file方式里解决的。但是内心还是不甘心的，由于项目进度推进，迭代版本，所以不得不放弃，后续可能我将此功能使用调用H5+接口实现。 首先我来讲我实现这个拍照预览压缩上传的思路，准...
与上篇实践教程一样，在这篇文章中，我将继续从一种常见的功能——表格入手，展示Vue.js中的一些优雅特性。同时也将对filter功能与computed属性进行对比，说明各自的适用场景，也为vue2.0版本中即将删除的部分filter功能做准备。需求分析还是先从需求入手，想想实现这样一个功能需要注意什么、大致流程如何、有哪些应用场景。 表格本身是一种非常常用的组件，用于展示一些复杂的数据时表现很好。当数据比较多时，我们需要提供一些筛...
整理文档，搜刮出一个vuejs2.0运用原生js实现简单的拖拽元素功能示例，留作笔记。<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta charset="utf-8"> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /><style> .select-item {background-color: #5bc0de;displ...
注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。推荐使用npm安装。npm install vue-router一、使用路由在main.js中，需要明确安装路由功能： import Vue from vue import VueRouter from vue-router import App from ./App.vue Vue.use(VueRouter) //1.定义组件，这里使用从其他文件import进来 import index from ./components/index.vue import hello from ./components/hell...
简介 在使用vue1.x之前的版本的时候，页面中的拖拽功能，我在项目中是直接用的jquery ui中的sortable.js，只是在拖拽完成后，在update的回调函数中又重新排序了存放数据的数组。但是当把vue升级到2.0以上后发现拖拽功能失效了，于是使用了下面代码。 该案例主要是在用于vuejs2.0中实现的拖拽功能，用到的的js有Sortable.js，vuedraggable.js，当然还有vue.min.js，提供的案例使用的require.js加载。 实现效果 实现后的效果如图所示...
下面给大家分享vue自定义指令拖拽功能代码，具体代码如下所示：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>实例方法</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><script src="../js/vue1.0.js...
template代码： <template> <div class="hello"> <ul> <li v-for="(item, index) in proData"> <label for=""> <input type="checkbox" :value="index" v-model="selectArr"> </label>{{item.name}} </li>： </ul> <button type="" @click="del">删除</button>{{selectArr}} <label> <input type="checkbox" class="checkbox" @click="selectAll" />全选 </label> </div> </template>script部分： <script> var proDa...
无上下选择 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jsonp</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><script src="../js/Vue.js"></script><script src="../js/vue-resource.js"></scrip...
先来看一下效果图： 功能描述： 1. 点击页面序号跳转到相应页面； 2. 点击单左/单右，向后/向前跳转一个页面； 3. 点击双左/双右，直接跳转到最后一页/第一页； 4. 一次显示当前页面的前三个与后三个页面； 5. 始终显示最后一个页面； HTML：<!-- 分页开始 --> <div class="u-pages" style="margin-bottom:20px; margin-top:10px;"><ul><li v-if="showPre" class="crt"><a v-on:click="jumpFirst(cur)"> << </a></li><li v-if="s...
在项目中完成编辑功能时，遇到了这样一个问题：编辑的功能使用的是一个子组件作为弹出框，如图 这里涉及到从父组件向子组件传递数据的问题，这个项目使用的是v1.0，问题是当点击了编辑以后，弹出的子组件中没有获取到父组件传过来的数据，检查后没有发现代码错误，最后解决的方法就是在父组件中，把传递的数据中的每一项都初始化了一遍就好了 creatIssue (type,list,id){this.modelIssue=true;this.modeltype=type;if(type==creat)...
本篇文章是一篇Vue.js的教程，目标在于用一种常见的业务场景——分页/无限加载，帮助读者更好的理解Vue.js中的一些设计思想。与许多Todo List类的入门教程相比，更全面的展示使用Vue.js完成一个需求的思考过程；与一些构建大型应用的高阶教程相比，又更专注于一些零碎细节的实现，方便读者快速掌握、致用。 需求分析当一个页面中信息量过大时（例如一个新闻列表中有200条新闻需要展示），就会产生问题，例如： 》数据量过大，影响加...
使用vue制作加载更多功能，通过ajax获取的数据往data里面push经常不成功，原因是push是往数组中追加数据内容的，而不能用作数组之间的拼接，ajax获取的数据就是数组形式的，因此不成功，应该使用concat()拼接两个数组。 //这是错误的写法 $.ajax({ type:get,async:false,url:path+no/noticeMobile/getSendNoticeList?imToken=+ getToken +&pageFlag=2,dataType: "json",success: function(msg){_self.$set(loadMore, msg);_self.co...
有一段时间没更新文章了，主要是因为自己一直在忙着学习新的东西而忘记分享了，实在惭愧。 这不，大半夜发文更一篇文章，分享一个自己编写的一个Vue的小组件，名叫BootPage。 不了解Vue.js的童鞋可以移步我的上一篇文章《浅谈Vue.js》了解一下。 BootPage组件简介 其实也不是啥高大上的组件了，相反确实一个简单的表格分页组件而已，主要是自己最近项目中需要一个表格分页组件，而Vue官方组件库里分页组件都功能太强大或者没有适合...
因为刚开始接触vue不久，全选的实现参考了知乎上的实现方法： 1、从服务器拿到数据，为每个item设置checked属性 2、计算选中的数量selectCount,如果选中的数量与selectItems的数量相等，则全选selectAll选中 3、点全选时，将每个item的checked属性置为true，反选时置为false， 4、每次selectItems的属性发生变化时，都将checked的为true的item放入数组checkedGroups中 下面为实现代码：//全选data: function() {re...
这次给大家带来Vuejs如何实现搜索匹配功能，Vuejs实现搜索匹配功能的注意事项有哪些，下面就是实战案例，一起来看一下。最近一直在看vue，查了很多资料，看了很多文档和博客，大概半知半解了，然后利用所理解的知识写了一个简单的搜索匹配功能。大概长这个样子：数据都是假的代码部分（注意我引用的是本地vue.min.js文件，请注意文件路径。）<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Vue测试2</title><script ty...