vue学习笔记 - 组件通信01
2018-02-18 23:45
706 查看
组件是vue最核心的功能,组件化你的前端页面,能大大的提高重用性,让代码可复用,维护起来简直爽的飞起,举例来说就比如一些评论输入框。
在vue中使用组件
Vue.component('input-number',{ template:'\ <div class="input-number">\ <input type="text" @focus="focusEvent" @blur="blurEvent" @keydown="keyEvent" :value="currentValue" @change="handleChange">\ <button @click="handleDown" :disabled="currentValue <= min">-</button>\ <button @click="handleUp" :disabled="currentValue >= max">+</button>\ </div>\ ', props:{ max:{ type:Number, default:Infinity }, min:{ type:Number, default:-Infinity }, value:{ type:Number, default:0 }, step:{ type:Number, default:1 } }, data:function(){ return { currentValue:this.value, isfocus:false } }, watch:{ currentValue:function(val){ this.$emit('input',val); this.$emit('on-change',val); }, value:function(val){ this.updateValue(val); } }, methods:{ updateValue:function(val){ if(val>this.max)val = this.max; if(val<this.min)val = this.min; this.currentValue = val; }, handleDown:function(){ if(this.currentValue<=this.min)return; this.currentValue-=this.step; }, handleUp:function(){ if(this.currentValue>=this.max)return; this.currentValue+=this.step; }, handleChange:function(event){ var val = event.target.value.trim(); var max = this.max; var min = this.min; if(isValueNumber(val)){ val = Number(val); this.currentValue = val; if(val>max){ this.currentValue = max; }else if(val<min){ this.currentValue = min; } }else{ event.target.value = this.currentValue; } }, focusEvent:function(event){ this.isfocus = true; }, blurEvent:function(event){ this.isfocus = false; }, keyEvent:function(event){ if(this.isfocus){ if(event.keyCode == 38){ // 上方向键 this.handleUp(); }else if(event.keyCode == 40){ // 下方向键 this.handleDown(); } } } }, mounted:function(){ this.updateValue(this.value); } }) function isValueNumber (value){ return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value); }引入插件<input-number v-model="value" :max="10" :min="0" :step="2">
相关文章推荐
- vue.js学习笔记(三)--父子组件通信总结
- vue学习笔记--父子组件通信
- vue 学习笔记 part-6 - > 组件
- Vue学习--组件通信
- Vue1.0学习总结(4)———Vue1.0自定义组件、Vue1.0组件之间的通信、slot的使用
- Vue 2.0学习笔记:Vue组件内容分发(slot)
- Flex学习笔记_05 使用组件处理数据和交互_01常用组件
- Vue 2.0学习笔记:组件的使用
- Vue 2.0学习笔记:组件数据传递
- Vue.js入门学习--父子组件的说明和简单通信(十)
- Vue.js学习 Item11 – 组件与组件间的通信
- Vue学习笔记_01
- vue视频学习笔记01
- vue学习笔记之——v-for与局部组件的传值
- Vue学习笔记进阶篇之函数化组件解析
- vue学习笔记01
- Vue.js学习笔记-1-组件
- Vue2.0学习之详解Vue 组件及父子组件通信
- Vue组件学习笔记
- Vue学习笔记——指令和部分组件