根据Vue.js + Element UI + MongoDB进行开发P1 安装Vue-CLI Vue.js文档 利用Vue.js提供的一个官方命令行工具 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖，走你 $ cd my-project $ npm install $ npm run devVue.js 主要目录结构 . ├── build # 一些webpack的文件，配置参数什么的，一般不用动 ├── config # vue项目的基本...
目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目都会使用 Vuex 来管理数据。前言： 使用 cnpm 安装 axios cnpm install axios -S安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 并不能 use，只能每个需要发送请求的组件中即时 引入 为了解决这个问题，是在引入 axios 之后，修改原型链具体的实施请往下看~ 改写原型链 首先在 main.js 中引入 axios import axios from axios这时候如果...
1. Vue的组成文件(.vue) 分为三部分，分别对应html,js,css <template></template><script></script><style></style> 2. Vue的生命周期函数 beforeCreate() 创建数据之前created() 创建数据 我们在这里的得到我们在data里面创建的数据beforeMount() // Dom渲染完成前mounted() //Dom渲染完成beforeUpdate() // 更新视图 在beforeUpdate触发时，视图已经更新完成Updated() //更新数据调用的函数、。<div id=app><p>{{msg}}</p><input...
在vue开发中，不可避免要整合axios，简单记录一下整合中的文件，方便以后使用查找。 整合文件axios.js import axios from axios;// 适配vue-resourceconst instance = axios.create(); instance.interceptors.request.use(config=> { //Serialize.decode(config); return config; }); instance.interceptors.response.use(response=> { return response.data; }, err=> { if (err.response) { axios.post(/v1/error, err.response)...
最近使用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是一种轻巧便捷的框架，那么如何进行对于数据加载的刷新呢？以下就是我对于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...