本文介绍了Vue2.0利用vue-resource上传文件到七牛，分享给大家，希望对大家有帮助 关于上传，总是有很多可以说道的。16年底，公司项目番茄表单的前端部分，开始了从传统的jquery到vue 2.0的彻底重构。但是上传部分，无论是之前的传统版本，还是Vue新版本，都是在使用着FileAPI这款优秀的开源库，只是进行了简单的directive化。为什么呢？因为兼容性。没办法，公司项目不等同于个人项目，必须要考虑大多数浏览器。否则，上传部分完全...
前言在开发项目的过程中，经常会需要开发一些弹出框效果，但原生的alert和confirm往往都无法满足项目的要求。这次在开发基于Vue.js的读书WebApp的时候总共有两处需要进行提示的地方，因为一开始就没有引入其他的组件库，现在只好自己写一个模态框组件了。目前只是一个仅满足当前项目需求的初始版本，因为这个项目比较简单，也就没有保留很多的扩展功能。这个组件还是有很多扩展空间的，可以增加更多的自定义内容和样式。这里只介绍...
本文实例教大家如何编写一个vue上传图片组件，具体如下 1.首先得有一个[type=file]文件标签并且隐藏，changge事件来获取图片： <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/> 2.触发隐藏的文件标签：（通过原生的click来触发） document.getElementById(upload_file).click() 3.获取file文件里面的值方法：fileChange($event) fileChange(el){ if (!el.target.files[0].si...
这个功能我感觉在任何项目中都会涉及到，今天我就把我的实现方法跟大家分享一下，有不对的地方还请指出，我好更新。下面是整体代码，我把轮播图单独做了一个组件，大家可以拿来就用，具体代码如下： <template><div class="content"><div class="focus"><!-- focus begin --><swiper :options="swiperOption"> <!-- map是数组 这里我们用v-for把数据循环出来 --><swiper-slide v-for="item in map"><a :href="item.i_route" rel="e...
整理文档，搜刮出一个vue2.0的contextmenu右键弹出菜单的实例代码，稍微整理精简一下做下分享。 1.事情对象 <!DOCTYPE html> <html> <head><title></title><meta charset="utf-8"><script src="http://unpkg.com/vue/dist/vue.js"></script><script type="text/javascript">window.onload = function(){var vm = new Vue({el:#box,methods:{show:function(event){console.log(event); //event 这个就是事件对象了}}});}</script>...
前言：vue-resource 使用比 jQuery 更加简洁的方式实现了异步请求功能，还提供了比如 interceptors 这样处理请求过程中行为的功能。下面介绍下vue-resource中常用的GET与POST请求使用与封装方法。 访问 Github 获取最新的开发文件与文档 特征： 支持 Promise API 和 URI Templates支持请求过程中使用拦截器（interceptoers）支持 Firefox，Chrome，Safari，Opera 和 IE9+非常的小（压缩后之后14KB，在启用 gzipped后只有5.3KB）参数...
本文介绍了vue Render中slots的使用的实例代码，有需要了解vue Render中slots用法的朋友可参考。希望此文章对各位有所帮助。render 中 slot 的一般默认使用方式如下：this.$slots.default 对用 template的<slot>的使用没有name 。想使用多个slot 的话。需要对slot命名唯一。使用this.$slots.name 在render中添加多个slot。 <body> <div class="" id="app"> <myslot> <div>this is slot</div> </myslot> </div> <script> Vue.compon...
官网上的例子好晦涩，看了一个头两个大，关于非父子间的通讯问题，经过查阅得到了下面的例子， <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>兄弟之间的通讯问题</title><script src="vue.js"></script> </head> <body> <div id="app"> <one></one> <two></two> </div> <script>//创建中央事件总线。var bus =new Vue(); // 组件oneVue.component(one,{template:<button v-on:click="oneFn">点击+</butt...
?最近正好空闲，写了个实用注册代码，分享给大家，有需要的朋友可以了解一下数据库我使用的是MongoDB。 首先做文件上传，要保证协议里面的Content-Type为multipart/form-data。 注册的步骤: 将用户名密码，图片等提交给node端node端将图片保存到服务器,图片路径及注册用户的个人信息保存到mongodb数据库。项目目录如下，注册功能只是其中的第一步:前端框架使用的是vue.js，ajax使用的是vue的组件vue-resource。 前端上传代码如下: ...
由于工作的需要并鉴于网上的vue2.0中vue-cli实现全选、单选方案不合适，自己写了一个简单实用的。就短短的126行代码。 <template><div><table><tr><td><input type="checkbox" v-model="checkAll">全选({{checkedCount}})</td><td>产品名称</td><td>价格</td><td>数量</td></tr><tr v-for="(item,$index) in lists"><td><span v-show="checkedCount===lists.length || item.checked===true">我被选中</span><input type="checkbox"...
最近在做移动端h5页面，所以分页什么的就不能按照传统pc端的分页器的思维去做了，这么小的屏幕去点击也不太方便一般来讲移动端都是上拉加载更多，符合正常使用习惯。 首先简单写一下模板部分的html代码,，很简单清晰的逻辑： <template><div class="loadmore"><div class="loadmore__body"><slot></slot></div><div class="loadmore__footer"><span v-if="loading"><i class="tc-loading"></i><span>正在加载</span></span><span v...
整理文档，搜刮出一个vue实现表格增删改查效果的实例代码，稍微整理精简一下做下分享。实现效果我们把这些用户信息保存到list的数组中，然后增删改查就在这个数组上进行： list: [{username: aaaaa,email: 123@qq.com,sex: 男,province: 北京市,hobby: [篮球, 读书, 编程]},{username: bbbbb,email: bbbbbbb@163.com,sex: 女,province: 河北省,hobby: [弹琴, 读书, 插画]}// ... ]这里面的表单有：文本输入框，单选按钮，select选择...
由于工作的需要并鉴于网上的vue.js滚动加载方案不合适，自己写了一个简单实用的。就短短的150行代码。组件代码 // scrollLoader.vue // 滚动加载组件<style scoped>.container-main {margin: 0 auto; overflow: auto; overflow-x: hidden; padding: 0;}.loading{ width: 100%; height: 40px; position: relative; overflow: hidden; text-align: center; margin: 5px 0 ; color: #999; font-size: 13px;}.loading-icon{color: #707...
在Vue组件化开发过程中，因为是单页面开发，但是有时候需要页面的title根据情况改变，于是上网查了一下，各种说法花(wo)里(kan)胡(bu)哨(dong)， 于是想到一个黑科技 documet.title="xxx"; 随便创建一个项目，在独立的模块中，created在钩子函数启动之后document.title=标题; 但是据说在IOS的微信下是无效的，虽然用苹果机测试过有用，但是想到这样会影响我的代码洁癖。 <script> export default {data(){return{}},created(){docu...
这两天学习了ElementUI基于vue2.0开发学习，这个知识点挺多的，而且很重要，所以，今天添加一点小笔记。 使用vue2.0(ElementUI基于vue2.0)+ElementUI(饿了么出品)实现的在订单页面动态添加产品的效果，并自动计算总价。代码直接保存为html文档，使用浏览器打开即可查看效果。 效果图： <html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta content="width=device-width, ini...