最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的分页组件, 就自己写了一个, 效果如下:该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己调整: 首先新建pagination.vue文件, 所有组件的代码都写在这里, 写这样的组件并没有什么太大的难度, 主要是解决父子组件之间值传递的问题 <template><nav><ul class="pagination"><li :class="{disabled: current == 1}"><a href="javascript:;" rel...
最近爱上了用vue.js做前端，昨天用vue上传图片时遇到了问题，最后半天时间终于摸索出来，我将相关部分的代码贴出来。 前端部分 <div class="form-group"><label>背景图</label><input type="file" class="form-control" @change="onFileChange"></div> <div class="form-group" v-if="image"><label>背景图预览</label> </div>vue.js部分 在methods里添加 onFileChange(e) {var files = e.target.files || e.dataTransfe...
一、初探条件渲染 vue 的条件渲染，仍旧依赖于指令系统，下面逐个介绍： （1）v-if <div id="app"><div v-if="c1">c1</div> </div> ...... var app = new Vue({el: #app,data: {c1: false} }); 当 c1 为真值的时候，渲染出 v-if 所绑定的元素，否则不渲染出该元素。渲染结果如下： <div id="app"></div>（2）v-else <div id="app"><div v-if="c1">c1</div><div v-else>c1 is not true</div> </div> ...... var app = new Vue({el: ...
需要引用vue-resource 安装请参考https://github.com/pagekit/vue-resource官方文档 在入口函数中加入 import VueResource from vue-resource Vue.use(VueResource);在package.json文件中加入"dependencies": {"vue": "^2.2.6","vue-resource":"^1.2.1"},请求如下 mounted: function () {// GET /someUrlthis.$http.get(http://localhost:8088/test).then(response => {console.log(response.data);// get body data// this.someDa...
vue中的交互（ajax，jsonp） vue中也存在像ajax和jsonp的数据交互，实现向服务器获取数据，但是他本身框架当中没有这样的方法，需要一个新的小东西叫vue-resouce.js 地址：https://github.com/pagekit/vue-resource/blob/master/README.md<meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="vue.js"></script><script type="text/javascript" src="vue-resource.js"></script><style type="text/c...
整理文档，搜刮出一个vue中将网页打印成pdf的代码，稍微整理精简一下做下分享。<template> <div class="pdf-wrap" id="pdfWrap"><button v-on:click="getPdf">点击下载PDF</button><div class="pdf-dom" id="pdfDom"></div> </div> </template> <style lang="scss" scoped></style> <script type="text/ecmascript-6">import html2Canvas from @/components/html2canvas.jsimport JsPDF from @/components/jsPdf.debug.jsexport de...
整理文档，搜刮出一个vue时间格式化实例代码，稍微整理精简一下做下分享。export function formatDate(date, fmt) {if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1, (date.getFullYear() + ).substr(4 - RegExp.$1.length));}let o = {M+: date.getMonth() + 1,d+: date.getDate(),h+: date.getHours(),m+: date.getMinutes(),s+: date.getSeconds()};for (let k in o) {if (new RegExp(`(${k})`).test(fmt)) {let str = o[k...
这是一个mini-project，主要是基于vue2.0的一个移动端的机器自动回复小项目，下面是我的一个回顾总结https://github.com/xuweikang/rebotChat 1. 项目搭建 在开始该项目之前，使用vue-cli脚手架搭建整个projec //安装vue-cli npm install vue-cli //初始化项目 rebotChat是我的项目名称 vue init webpack-simple rebotChat 这样我的项目结构就出来了，如下：2. 模拟数据，命名为mockdata.json，该数据包括用户基本信息数据和聊天记...
想法很简单，用vue生成表格的行，datatables生成分页信息，不想过程曲折，特此记录。 datatables端代码：$(#dataTables-example).DataTable({ responsive: true, "serverSide" : true, "ajax": function (data, callback, settings) { postJson( "/AccessControlSystem/user/selectByPrimary", {pageSize:data.length,pageNo:data.start/data.length+1}, function(result){ callback({draw:data.draw,recordsTotal:userCount,reco...
首先我们假设，这里的登录组件（register.vue）是App.vue组件的子组件，是通过路由进入登录组件的。 登录组件中用户点击登录后，后台会传过来一个用户名，我的App.vue组件中需要拿到这个用户名，并将上面的“登录注册”字样变为“用户名”。 为了保证用户刷新后用户名不会消失，这里我用到了sessionStorage 代码如下:register.vue中用户点击登录触发signIn方法signIn(){this.formData = $(".form").serialize();var that = this;th...
前言 当我们在使用vue构建中大型项目时，通常会遇到某些经常用的方法以及属性，比如说搭建一个员工管理系统，请求的url需要一个共同的前缀，或者在某几个view中需要用到时间，这个时间是通过某方法格式化之后的等等，如果每次用到都写共同的代码，那样如果之后有变动的话维护起来会非常麻烦。 所以我们就得想办法抽出公共代码，因为vue是组件化开发，我们就会很自然的与es6的module模块化联系到一起。其实当我们在搭建项目结构时就...
vue是一种轻巧便捷的框架，那么如何进行对于数据加载的刷新呢？以下就是我对于vue.js数据加载的一点想法 源码： <div @scroll="onScroll($event)" style="height: 100%;overflow: auto;"><ul class="shop-brand-index" v-show="sitems.length > 0" ><li v-for="item in sitems"><div @click="linkUrl(item.code)"><img v-bind:src="item.publicImg"></div></li> </ul><div class="loading_wrap myload disn"><p>加载中...</p><i cl...
最近新学习了vuejs,尝试着用vuejs写了一个简单的图片轮播，便做个简单的记录 以下只贴出carousel.vue代码，其他的省略 <template> <div ref="root"> <div class="sliderPanel"> <div v-for="(item,index) in imgArray" class="verticalCenter picbox"> <transition name="slide-fade"> <img :style="{width:width,top:top}" @mouseover="clearAuto" @mouseout="slideAuto" v-show="index===selectIndex" :src="item.url" style="...
整理文档，搜刮出一个vue中用H5实现文件上传的方法实例代码，稍微整理精简一下做下分享。 1.图片上传<img v-if="personInfo.photoUrl" :src="headPreFix + personInfo.photoUrl" style="height:126px;max-width:133px;margin: 25px 0;"><img v-else src="../../assets/default.png" style="height:126px;max-width:133px;margin: 25px 0;"> <form id="form1" enctype="multipart/form-data" method="post" action=""><div style="h...
vue-router实现webApp切换效果 演示效果快速集成 1.复制PageTransittion.vue到项目目录。2.修改router配置。 Router.prototype.goBack = function () {this.isBack = truewindow.history.go(-1) } const router = new Router({routes: [{path: /,name: PageTransition, component: PageTransition, // 引入页面切换组件children: [{path: ,component: Index // 父路由访问页面，例如，访问www.aaa.com/ 显示的是Index组件}, {path:...