在开发过程中，为了效果好看，往往需要自己开发一个下拉列表，而不是使用 HTML 自身的 select 下拉列表。然而当编写自定义下拉列表的时候，就会碰到一个问题：如果用户在下拉列表的范围外进行鼠标点击的操作，如何关闭已经打开的下拉列表？ 解决思路如下：在 DOM 的根节点上添加一个 click 事件，同时下拉列表内阻止事件的默认行为和冒泡。当响应这个点击事件的时候，说明是在下拉列表范围外的点击（因为下拉列表内阻止了事件的冒泡...
最近自己做的项目中设计师要求分类栏中鼠标悬停更换图片，大致实现出来的效果就是这样： 这个在jQuery中是个很简单的事，但是在vue中我还是第一次实现。 首先将所有的选中后图片都覆盖到没选中图片上 html代码如下<ul><li><a href=""><img src="../../../img/goods/study.png" alt="学习"><img class="hide_tab" src="../../../img/goods/study_1.png" alt="学习"></a></li><li><a href=""><img src="../../../img/goods/life.png"...
效果图如下所示：html ..... ....... <-- key=idPicUrl --><div class="col-sm-7" > <img :src="queryFirmInfo[key]" alt="" style="max-height:200px;max-width:250px" class="myimage" :name="key" /> </div><form id="fileForm" enctype="multipart/form-data" class="form-horizontal " ><div class="col-sm-5 " style="margin:0 25%;padding: 0"><input class="form-control" type="file" name="file" @change="handleFileCha...
vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。效果图如下： 登入后： 登入前： 登录框: 注册框： html代码部分： <!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><title>index</title><link rel="stylesheet" href="css/font-awesome.min.css" rel="external nofollow" /><link rel="stylesheet" href="css/index.css" rel="external nofollow" /><script type="text/javascript" src="../lib/vue...
效果图：代码如下： <!DOCTYPE html> <html> <head><meta charset="utf-8"><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="external nofollow" /> </head> <body><div id="app" class="container"><table class="table"><thead><tr><th>产品编号</th><th>产品名字</th><th>购买数量</th><th>产品单价</th><th>产品总价</th><th>操作</th></tr></thead><tbody><tr v-for="(ite...
本来想把这个页面用jade渲染出来、评论部分用vue，但是想了想觉得麻烦，最后还是整个用vue的组件搞定他吧。 先上在线demo：http://jsbin.com/ceqifo/1/edit?js,output 再上效果图 可直接评论，点击别人的评论能回复别人的评论。 html <div id="comment"><article-content v-bind:article="article"></article-content><commemt-content v-bind:comment="comment" v-on:change="changCommmer"></commemt-content><comment-textarea...
先说一下产品需求，就是有几个tab栏，每个tab栏对应的ajax请求不一样，内容区域一样，内容为实时刷新数据，每3s需要重新请求，返回的数据在内容区域展示，每点击一次tab栏需停止其他tab栏ajax请求，防止阻塞，首次加载页面的时候又不能5个ajax同时请求，只需要请求第一个就好 也没有必要建立5个区域，控制显示隐藏，浪费性能，业务代码就不贴了，把大概原理的代码贴上来先是用jq实现了一版 <!DOCTYPE html> <html lang="en"> <head...
概述 使用Vue2进行的仿手机QQ的webapp的制作，在ui上，参考了设计师kaokao的作品，作品由个人独立开发，源码中进行了详细的注释。 由于自己也是初学Vue2，所以注释写的不够精简，请见谅。 项目地址 https://github.com/jiangqizheng/vue-MiniQQ 项目已实现功能 对话功能——想着既然是QQ总要能进行对话交流，所以在项目中接入了图灵聊天机器人，可以与列表中的每个人物进行对话。左滑删除——左滑删除相关消息。搜索页面——点击右...
现在的短信验证码一般为4位或6位，则页面中会相应的显示4个或6个文本框，如图所示当点击注册进入到输入验证码页面的时候，第一个框自动获取光标，依次输入，不可直接输入第三个或第四个框的值， input输入框是循环出来的，代码如下： <div class="sms_input"><div v-for="n in sms.numbers-1"><input v-if="sms.show[n-1]" disabled="true" v-model="sms.msg[n-1]"></div><div><input v-if="sms.show[sms.numbers-1]" v-model="sms...
前言 前端时间学了vue，一开始看了vue1.0，后来实在觉得技术总得实践，就直接上手vue2.0。然后花了将近一周时间做了一个网易云音乐的小项目。一开始觉得项目比较小，没必要用vuex所以就没有使用，但是后来发现数据流传输有点麻烦，后续会使用vuex。 技术栈 vue+vue-router（核心框架） better-scroll（使移动端滑动体验更加流畅） vue-lazyload（用户图片懒加载） nprogress（用于加载过渡） axios（请求）功能分析与设计 首先我先...
Vue2.0删除了很多1.0的比较实用的过滤器，如filterBy，orderBy。官方文档给了通过计算属性实现1.0搜索过滤器功能，自己又加入了大小写通用检索功能，比较简单，学一下。 <body><div class="app"><input type="text" v-model="name"><ul><li v-for="user in newUsers" >{{ user.name }}</li></ul></div><script>new Vue({el: .app,data: {name: ,users: [{ name: Bruce },{ name: Chuck },{ name: Jackie },{ name: 赵 }] },compute...
Vue-loader 是什么？vue-loader 是一个加载器，能把如下格式的 Vue 组件转化成JavaScript模块。vue-loader 提供了一些非常酷炫的特性： ES2015默认可用；在每个 Vue 组件内支持其他的 Webpack 加载器，如用于<style>的 SASS 和用于<template> 的 Jade。把 <style> 和 <template> 内引用的静态资源作为模块依赖项对待，并用Webpack 加载器处理。对每个组件模拟有作用域的CSS。开发阶段支持组件的热加载。简单来说，webpack 和 vue-l...
前言 最近练习Vue，看到官方文档中的嵌套路由，不做不知道，实在是太坑了，网上资料demo少之又少，然后自己就做了一个demo,用了vue2.0嵌套路由实现豆瓣电影分页功能，供大家学习学习，写得不好望见谅。 demo截图：Demo简单介绍 主路由：Top250(charts)，正在热映(hot)，即将上映(ing)，新片榜(newmovie) const router = new VueRouter({routes: [{path: /, //设置默认路由为Top250component: charts},{path: /charts, //Top250com...
哈哈， 就在昨天笔者刚刚在Github 上发布了一个基于VUE的日历组件。过去做日历都是需要引用 jquery moment 引用 fullCalendar.js 的。几者加起来体积庞大不说，也并不是很好使用在vue这种数据驱动的项目里。所以笔者经过一周的拍脑袋，做了一个十分简陋的版本。简介 目前只支持月视图，该组件是 .vue 文件的形式。所以，大家在使用的时候 是需要node的咯~~~ 安装 npm install vue-fullcalendarDEMO针对这个组件， 本人做了一个十分...
calendar vue日期选择组件 一个选择日期的vue组件 基于vue2.0 + vuex 原本是想找这样的一个组件的，查看了vuex后，发现vuex的写法还不是基于2.0的，所以就自己动手做了 demo展示&&项目中的使用目录结构 demo 用vue-cli 的webpack-simple构建的 calendar|--dist build生成的目录|--doc 展示图片|--src|--assets 资源|--components|--calendar 日期组件|--dateScroll 滚动的子组件|--css|store vuex目录|--modules|--calendar |...