整理文档，搜刮出一个使用 Vue.js 仿百度搜索框的实例代码，稍微整理精简一下做下分享。<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Vue demo</title><style type="text/css">.bg {background: #ccc;}</style><script src="https://cdn.bootcss.com/vue/2.1.7/vue.min.js"></script><script src="https://cdn.bootcss.com/vue-resource/1.3.1/vue-resource.min.js"></script><script type="text/javascript">window...
在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方，本来移动端开发H5应用，准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用，但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题，所以最后拍照上传功能还是使用input file方式里解决的。但是内心还是不甘心的，由于项目进度推进，迭代版本，所以不得不放弃，后续可能我将此功能使用调用H5+接口实现。 首先我来讲我实现这个拍照预览压缩上传的思路，准确...
一. vue-amap，一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了，按照其文档，就能够安装下来。 二. 按照官方提供的方法引入 1.修改webpac.base.conf.js文件externals: {AMap: AMap}2.引入sdk引入有两种方式，一种是页面直接引入代码如下: <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script> 还有一种是异步加载 <script src="ht...
前言 在做基于LBS的应用中，时常会和地图打交道，最直接的解决方案，当然是去对应的地图官网找文档，然后一步步来玩。对于简单场景而言，体验应该还好，但对于一些状态多，变化频繁的复杂场景而言，不仅要时刻维护本地数据状态和地图状态同步，还要查找设置各种状态的地图API，实在是让人头疼的事情。 设计vue-amap的初衷，也就是为了让开发者，在编写地图应用时，能从查找众多地图API和繁琐的地图状态同步中解脱出来。 那么vue-am...
现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的文档已经有很多了,我就不再累述了. 技术栈 vue2.0vue-routeraxios拦截器 首先我们要明白设置拦截器的目的是什么,当我们需要统一处理http请求和响应时我们通过设置拦截器处理方便很多. 这个项目我引入了element ui框架,所以我是结合element中loading和...
关于vue.js vue.js是一套构建用户界面的 轻型的渐进式前端框架。它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。使用vue可以给你的开发带来极致的编程体验。 关于vue-cli Vue-cli是vue官方提供的一个命令行工具（vue-cli），可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。 疑问...
1.什么是state？上一篇文章说了，Vuex就是提供一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data（后面讲到的actions和mutations对应于methods）。响应书存储：state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。（这里“状态”=“数据”），也就是是说数据和视图是同步的。 2.局部状态获取：在Vue组件中获取数据，...
1.什么是getters在介绍state中我们了解到，在Store仓库里，state就是用来存放数据，若是对数据进行处理输出，比如数据要过滤，一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据，比如饼状图组件和曲线图组件，我们是否可以把这个数据抽提出来共享？这就是getters存在的意义。我们可以认为，【getters】是store的计算属性。 ２.如何使用定义：我们可以在store中定义getters，第一个参数是stateconst getters = ...
当前组件依赖bootstrap样式，使用前请先引用相关css。 Vue.component(pagination, {template: `<nav aria-label="Page navigation"><ul class="pagination"><li :class="{disabled: pageNum == 1}"><a href="#" v-on:click.prevent="turnToPage(1)" title="首页" aria-label="首页"><i class="fa fa-fast-backward"></i></a></li><li :class="{disabled: pageNum == 1}"><a href="#" v-on:click.prevent="turnToPage(pageNum - 1)"...
最近写一个这样的页面 要求点击修改按钮之后部分输入框由禁用状态变为可用状态.我使用了vue中的事件处理器,但是不知道怎么获取disabled这个属性的值,所以以失败告终.后来又使用了vue中的v-bind,使其与class或者style绑定,但是也没有作用 <el-input id = "usernames" v-model="form.username" v-bind:style = {"disabled:isDisabled"}></el-input> data(){return{isDisabled:true} }后来又想到使用jquery来改变属性,但是这个也没用...
本来想这一周做一个关于vuex的总结的，但是由于朋友反应说还不知道如何用vue去写一个组件，所以在此写写一篇文章来说明下如何去写vue页面或者组件。vue的核心思想就是组件，什么是组件呢？按照我的理解组件就是装配页面的零件，比如一辆车有大大小小许多零件组成，那么同样的一个页面，也是有许多组件构成的比如说头部组件 按钮组件等等，vue三大核心组件 路由 状态管理，路由控制页面的渲染，页面由组件组成，数据有vuex进行管理和...
直接上代码。只有一个小小的需要注意的点：vue1.x的v-for循环是从0开始，遵从了程序语言设计的一贯的做法，而vue2.x是从1开始的，符合我们平常的习惯。用下来还是vue2.x的做法方便一些，不需要绕一下子了。//html <div id="paging"> <span v-on:click="switchPage(curPage - 1)">prev</span> <span v-for="item in sum" v-bind:class="{current-page: item == curPage}" v-text="item" v-on:click="switchPage(item)"></span> <spa...
一：npm的安装 由于新版的node.js已经集成了npm的环境，所以只需去官网下载node.js并安装，安装完成后使用cmd检测是否成功。 测试node的版本号：node -v 测试npm的版本号：npm -v 以上提示代表安装成功 二：vue.js环境搭建 1、首先安装淘宝的npm镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org 2、安装vue.js环境:：cnpm install -g vue-cli 3、测试vue的安装：vue 三：vue.js项目的建立 新建一个名为pt...
Vue 2.0 开始支持服务端渲染的功能，所以本文章也是基于vue 2.0以上版本。网上对于服务端渲染的资料还是比较少，最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news。本人在公司做Vue项目的时候，一直苦于产品、客户对首屏加载要求，SEO的诉求，也想过很多解决方案，本次也是针对浏览器渲染不足之处，采用了服务端渲染，并且做了两个一样的Demo作为比较，更能直观的对比Vue前后端的渲染。 talk is cheap,show us the code!话不多说...
本文实例为大家分享了vue分类筛选filter方法的具体代码，供大家参考，具体内容如下 <html> <head> <meta charset="utf-8"> <title>filter</title> </head> <body> <div id="app"> <ul> <li v-for="item in filterlist">{{item}}</li> </ul> <div @click="agg">加载更多</div> </div> <script src="../js/vue.min.js"></script> <script type="text/javascript"> var vm = new Vue({ el: #app, data: { size:5, list:[ {"id":0,"ti...