vue2的clickoutside

2024-10-28

vue自定义指令clickoutside使用以及扩展用法

vue自定义指令clickoutside使用以及扩展用法产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如要求选择器的弹出框中,增加搜索过滤(跟目前element的输入建议不太一样).于是想说说之前修改element组件,并定制为业务组件过程中遇到的问题. ps:因为对某些组件改动很大,所以是直接拷贝了一份源码,然后再进行修改,但是这样会遇到挺多问题,建议对于vue组件如果改动不大,只是简单功能扩展,就

vue2.0实践的一些细节

最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个有高度的元素占位,不然当数据加载好渲染的时候会出现跳动的感觉.可以这样写: <div class="yhq_inner"> //占位元素 <template v-if="true"> //加template则页面加载时就不会显示待编译符号如:{{

用FSM一键制作逐帧动画雪碧图 Vue2 + webpack

因为工作需要要将五六十张逐帧图拼成雪碧图,网上想找到一件制作工具半天没有找到,就自己用canvas写了一个. 写成之后就再没有什么机会使用了,因此希望有人使用的时候如果遇到bug了能及时反馈给我. 最近用vue2 + webpack重新构建了下,代码量挺简洁的,逻辑也很简单,适合新手看看,顺便求几个star 项目名称: FrameSpriteMaker 简称 FSM github项目地址:https://github.com/pspgbhu/FrameSpriteMaker-vue

vue2.0构建淘票票webapp

项目描述之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + vuex + mint-ui 后台技术栈:nodejs + express 项目地址:https://github.com/canfoo/vue2.0-taopiaopiao 废话先不多说,先晒晒预览效果,过过瘾: 项目架构本项目采用vue2.0栈构建前端页面,采用expre

Vuex2.0+Vue2.0构建备忘录应用实践

一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. 1.什么是状态管理模式? 看个简单的例子: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content=&q

一步步构造自己的vue2.0+webpack环境

前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wkdemo,这是我们的项目目录.执行 npm init 命令生成package.json文件.执行npm init之后,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行 npm init -y 直接跳过询问步骤. 2.安装项目依赖项 npm install webpack webpack-

Vue2.0组件间数据传递

Vue1.0组件间传递使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有的后代 Vue2.0后$dispatch(),$broadcast()被弃用,见https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换 1,父组件向子组件传递场景:Father上一个输入框,根据输入传递到Child组件

基于Vue2.0+Vue-router构建一个简单的单页应用

爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是目前最火的前端框架,vue.js 兼具 angular.js 和 react.js 的优点,并剔除它们的缺点并且提供了很多的周边配套工具如vue-router .vue-resource .vuex等等通过他们我们可以很轻松的构建一个大型单页应用目前Vue版本为Vue2.0 官网地址http://vuejs.org.c

vue2.0实战

学了几周的vue2.0,终于有时间去做一个应用了. 为了全面联系相关知识,所以用到了vue-router,以及作者最新推荐的axios,组件库用的是饿了么的mint-ui2.0. 项目构建使用官方vue-cli,由于项目较小,使用simple模板. 在2.0中路由不再使用router.start();而路由跳转得组件也有所变化,官方文档很全面.有一点不是很懂,就是关于路由的挂载,本来准备另外写个router.js来挂载路由,可是不太好使,所以全都放在了main.js中. 在首页有页面切换但是并不

vue DatePicker vue2.0的日期插件

一个用vue2.0写的日期控件,可以支持简单的年月日选择.地址:https://github.com/Stevenzwzhai/vue-datepicker. 首先是关于日期对象的使用,基本就是日期的设置(date.setDate())与获取(date.getFullYear(),date.getMonth(),date,getDate()).在这里主要的一点就是根据选择的年和月份去设定当月的天数,使用设定日期,date.setDate(year, month, 0);这里要注意的是,获取哪个月

vue2/vuex2的那点坑

说是坑,其实大部分是我们自己的过错! vuex官方demo在1.0可以运行,在2.0报错?此类问题,应该很常见吧? 还有顺溜的利用1.0搭建的webpack编译环境到了vue2.0突然失效了,报错了?简直要疯啊 1.问题一 *Failed to load resource: net::ERR_FILE_NOT_FOUND*app.js:16381 Uncaught SyntaxError: Unexpected token import可能你会疑惑,webpack中明明写了 babel 加载器,

项目vue2.0仿外卖APP（六）

goods 商品列表页开发布局编写除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可以上下滚动. good.vue: 为了兼容性问题呢,设置flex之后还设置了宽度,使得在不兼容flex的浏览器也能有80px的宽: 外壳就是这样了: 开始填内容了同样的,我们还是利用vue-resource这个技术去拿到数据,获取goods数据: goods需要用data去绑定,因为后面需要用到g

项目vue2.0仿外卖APP（五）

header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁.另外,vue-resource还提供了非常有用的inteceptor功能,使用inteceptor可以在请求前和请求后附加一些行为

项目vue2.0仿外卖APP（四）

组件拆分先把项目搭建时生成的代码给清了吧现在static目录下引入reset.css 接着在index.html引入,并且设置<meta> 有时候呢,为了让代码符合我们平时的编码习惯,我们可以在ESLint进行设置,如下: 回到入口js文件main.js,为了好看,我们给它加上分号: 不过这是就会报错了: 所以要到eslintrc.js去设置(上面对应可以去官网查看怎么配置),使它接受这样的编码方式. 现在的App.vue如下: 然后我们编写组件来替换那三个区块. 创建header组件将

饿了么基于Vue2.0的通用组件开发之路（分享会记录）

Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网:http://element.eleme.io/#/github:https://github.com/ElemeFE/element ## 设计目的大部分项目起源都是源于业务方的需求,Element 也是一样.随着公司业务发展,内部开始衍生出很多后台系统,UED 部门也接到越来越多的设计需求,

vue2.0有哪些变化

vue2.0之后有哪些变化: 1.每个组件模板template,不再支持片段代码之前: <template> <h3>vue-router+vue-loader</h3> <p>hshsh</p> </template> 现在:必须有根元素 <template> <div> <h3>vue-router+vue-loader</h3> <p>hshsh</p&

用vue2 +vue-router2 + es6 +webpack 高仿饿了么app（干货满满）

#高仿饿了么app商家详情 (vue2 +vue-router2 + es6 +webpack ) ##demo [demo 地址](http://liangxiaojuan.github.io/elem/index#/goods) ##项目下载,运行,打包 git clone https://github.com/liangxiaojuan/eleme.git (下载) cnpm install --save (淘宝镜像源) npm run dev (运行) npm run bui

Vue2.0实现1.0的搜索过滤器功能

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" &

Vue2.0学习笔记一：各种表达式

#,过滤器 #,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性: #,过滤器可以串联 {{ message | filterA | filterB }} #,条件渲染 #,注意v-if与v-show的区别,v-if是决定是否创建DOM,而v-show则是DOM始终存在,只是改变了显示样式: #,如果要切换多个元素的时候,我们就使用<template v-if='ok'>: #,v-if 有更高的切换消

vue2.0 开发实践总结之入门篇

vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用 vue + vue-router + vuex (传说中的vue 全家桶 ),构建工具使用尤大大推出的vue-cli 后续文章:如果有兴趣,可以移步 vue2.0 开发实践总结之疑难篇项目是图片分享社交平台. 项目预览: 1 .vue-cli构建工具必知我选用的vue-cli 是基于webpack的版本 ,不了解webpack的可以先粗略看下下面的基本知识 webpack 基本知识点: entry:入口点,w

Vue2.X的状态管理vuex记录

记住上述的顺序情况:想要改变state,只能通过Mutation,虽然action可以直接改变state,这样会使每个状态可以方便的跟踪和记录(用Devtools跟踪) vue Method ---> Actions ---> Mutions ---> State (作用于vue) 在Vue2.X中使用vuex的情况: 1.多个视图依赖于同一状态, 比如验证登陆情况. 2.来自不同视图的行为需要变更同一状态 , 3.不在一个组件树(不是父子组件的关系),组件间频繁的进行数据和

vue2的clickoutside

热门专题