vux微信分享说明 分享接口只有认证公众号才能使用，域名必须备案且在微信后台设置。 先确认已经满足使用jssdk的要求再进行开发。 引入 在 main.js 中全局引入： import { WechatPlugin } from vux Vue.use(WechatPlugin)console.log(Vue.wechat) // 可以直接访问 wx 对象。 组件外使用 考虑到你需要在引入插件后调用config方法进行配置，你可以通过 Vue.wechat 在组件外部访问wx对象。 jssdk需要请求签名配置接口，你可以直接使用...
在做项目的时候，遇到需要做路由跳转，但当用户输入错误url地址，或是其它非法url路由地址，我们或许会想到跳转至404页面。不管你有没有写一个404页面，当出现未匹配路由都需重新指定页面跳转。可能大家首先想到会是路由重定向，redirect来解决这个问题。但实际上通过redirect是没办法更好解决这个问题的。 看代码红色部分 import Vue from vueimport Router from vue-router import Hello from @/components/Hello Vue.use(Router...
在用vue-cli脚手架搭建手机H5页面应用的时候，其中一页中部有input，底部有position：absolute；bottom：0的元素， 当点击input框时在安卓手机上出现了： 1 虚拟键盘弹出盖住input 2 底部定位的元素被挤上来 网络上很多关于body设定宽高以及scrolltop的方法都不管用，因为这里是路由页面，根据网上的思路，吊起输入键盘的时候页面的高度是变化的，监听window.onresize，判断是否吊起键盘，然后设定底部模块的隐藏和显示，整个块元素...
部分截图安装&&运行：1、安装 node：http://nodejs.cn/download/ 安装 git：https://git-scm.com/downloads 2、从我的仓库克隆代码： $ git clone https://github.com/ColinScales/shell 3、安装vue脚手架工具vue-cli: $npm install vue-cli -g 4、进入代码根目录安装依赖： $ npm install --save-dev 5、运行命令： $ npm run dev 打开浏览器查看运行效果 6、发布代码： $ npm run build 发布完代码后会生成dist目录，保存着项目的...
最近在开发过程中遇到一个问题。在节点上面写点击事件时，点击事件不执行。代码如下： <!-- 操作 --><el-table-column label="操作"><template slot-scope="scope"><span class="poi icon-hover f16 mr20" @click=scope.row.edit=!scope.row.edit><svg-icon :icon-class="scope.row.edit?icon_edit_outline:icon_save"></svg-icon></span><span class="poi icon-hover f16"><svg-icon icon-class="icon_delete"></svg-icon></span>...
vue中经常使用到<input>和<textarea>这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。 v-model本质上是一个语法糖。如下代码<input v-model="test">本质上是<input :value="test" @input="test = $event.target.value">，其中@input是对<input>输入事件的一个监听:value="test"是将监听事件中的数据放入...
1.代码压缩(gzip)如果你用的是nginx服务器，请修改配置文件(其他web server 类似)：sudo nano /etc/nginx/nginx.conf 在Gzip Settings里加入： gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_comp_level 5; gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;gzip开启或者关闭 gzip 模块，这里使用 on 表示启动gzip_min_length设置允许压缩的页面最小字...
vue2.0+vuex+localStorage 待办事项源码：https://github.com/Mynameisfwk/vue-Todo-list 参考代码：https://github.com/Mynameisfwk/vivo-shop 代码预览vuex官方文档 https://vuex.vuejs.org/ 我觉的官方文档说明很详细localStorage 用来本地储存数据 const state={home:localStorage["home"]?JSON.parse(localStorage["home"]): [],item:localStorage["item"]?JSON.parse(localStorage["item"]): [], }export default state cons...
vue-cli到多页应用 前言：我有一个cli创建的vue项目，但是我想做成多页应用，怎么办，废话不多说，直接开撸~ 约定：新增代码部分在//add和//end中间 删除(注释)代码部分在//del和//end中间，很多东西都写在注释里 第一步：cli一个vue项目 新建一个vue项目 官网 vue init webpack democli默认使用webpack的dev-server服务，这个服务是做不了单页的，需要手动建一个私服叫啥你随意 一般叫dev.server或者dev.client 第二步：添加两个方...
前后端分离后，控制路由跳转的责任转移到了前端，后端只负责给前端返回一个html文档以及提供各种接口。下面我们用作例子的两个项目，均采用vue作为基础框架，一个是SPA应用，另一个是多页应用，均由前端进行路由控制及渲染的。 总体思路 无论单页还是多页，我的实现思路是总体配置404页面的思路就是在前端路由表中添加一个 path: /404 的路由，渲染相应的404页面。同时，配置一个规则，当在用户可访问的路由表中的所有路由都无法匹...
最近项目要使用高德地图写了一个实时公交的应用，这边分享一个小应用主要熟悉下高德地图在vue中的使用，常用api，vue的常用指令 先给大家看下页面效果： 如果有需要源码的童鞋请移步我的github地址 vue搭建实时公交 (欢迎star) 实现思路 在vue项目中导入高德地图 具体功能调用相应高德js APi 1.在vue项目中导入高德地图 1.修改webpac.base.conf.js文件 externals: {AMap: AMap}2.引入sdk 引入有两种方式，一种是在index页面直接引...
一.父子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>父子组件传值</title><style> </style><script src="./vue.js"></script> </head> <body><div id="root"> <counter :count="0" @numberchange="handleChange"></counter><counter :count="0" @numberchange="handleChange"></counter><div>{{total}}</div> <validate-content content="hello world"></validate-content></div><script> //父...
VeeValidate是什么： VeeValidate是Vue.js的验证库，它有很多验证规则，并支持自定义规则。它基于模板，因此它与HTML5验证API相似并且很熟悉。您可以验证HTML5输入以及自定义Vue组件。它也是以本地化为基础构建的，实际上我们有大约44种语言由精彩的社区成员支持和维护。 本文包含VeeValidate包含以下几点应用： 1、基本安装使用 2、本地化支持 3、自定义规则和错误消息 4、验证HTML5输入和自定义Vue组件 5、统一提交按钮处理 先看...
由于上传地址问题，需要自定义上传按钮，效果如图由于在页里面没有操作dom，所以想到了用vue的 自定义事件绑定$emit 、$on来把点击事件传递给ueditor。 首先是给ueditor添加自定义按钮： 1，打开ueditor.all.js,找到btnCmds，大概在27854行，如下图，在数组添加一个自定义的按钮名称，我写的是"love"ueditor.all.js 2，给按钮添加事件 还是在ueditor.all.js文件内找到commands指令 给刚才定义的按钮扩展事件，如下：给按钮添加事件...
项目技术： webpack + vue + element + axois (vue-resource) + less-loader+ ... vue的操作的方法案例： 1.数组数据还未获取到，做出预加载的动画 <el-carousel :interval="3000" type="card" height="200px" class="common-mt-md"><el-carousel-item v-for="item in movieArr" :key="item.id" class="text-center"><img v-bind:src="item.images.small" alt="电影封面" class="ticket-index-movie-img"></el-carousel-item>// 实...