Vue数字输入框组件的使用方法
最近在通过《Vue.js实战》系统学习Vue,虽然在项目中已多次使用Vue进行开发,但是对于一些非常基础性的知识点还不是很了解,因此这次通过结合数字输入框组件实战来谈谈简单的组件开发。
专业成都网站建设公司,做排名好的好网站,排在同行前面,为您带来客户和效益!创新互联公司为您提供成都网站建设,五站合一网站设计制作,服务好的网站设计公司,网站设计制作、成都网站制作负责任的成都网站制作公司!
源代码:数字输入框组件
项目整体结构
├── src 项目代码
│ ├── common 公共js库
│ │ ├── number.js 判断是否为数字
│ ├── components 组件
│ │ ├── inputCount.vue 数字输入框组件
│ │ ├── inputNumber.vue 数字输入框调用页
| ├── router 路由
| | ├── index.js 路由相关操作
| ├── App.vue 入口页
| ├── main.js !Webpack配置约定的js入口,不要修改名称和路径
main.js
入口文件,主要作用是初始化vue实例并使用需要的插件
import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '' })
App.vue
主组件,所有页面都是在App.vue下进行切换的。所有的路由也是App.vue的子组件
router/index.js
// import引入路由组件 import Vue from 'vue' import Router from 'vue-router' import inputNumber from '@/components/inputNumber' Vue.use(Router) // 然后定义路由(routes),并创建路由实例 export default new Router({ routes: [ { path: '/', name: 'index', component: inputNumber } ] })
common/number.js
// 判断输入的值是否为数字 function isValueNumber (value) { var reg = /^[0-9]+.?[0-9]*$/ if (reg.test(value)) { return true } return false } // 切记将此函数暴露,否则无法调用 export { isValueNumber }
components/inputNumber.vue
// 双向绑定value,并设默认值为5,最大值为100,最小值为0
components/inputCount.vue
input绑定了currentValue和原生的change事件,在句柄handleChagne函数中,因为绑定的currentValue是单向数据流,所以在输入时,currentValue的值并没有实时进行改变。如果输入的不是数字,就将输入的内容重置为之前的currentValue;如果输入的值是数字,就把输入的值赋给currentValue。
@keyup.down="handleDown"和@keyup.up="handleUp"实现在输入框聚焦时,对键盘上下按键的支持。
更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
当前标题:Vue数字输入框组件的使用方法
文章链接:http://myzitong.com/article/jissse.html