最近在通过《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/>' })
App.vue
主组件，所有页面都是在App.vue下进行切换的。所有的路由也是App.vue的子组件
<template> <div> <router-view/> </div> </template> <script> export default { name: 'App' } </script>
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: 'https://www.jb51.net/', 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
<template> <div> // 双向绑定value，并设默认值为5，最大值为100，最小值为0 <input-count v-model="value" :max="100" :min="0"></input-count> </div> </template> <script> //引入子组件 import inputCount from '../components/inputCount' export default { data () { return { value: 5 //设置初始值为5 } }, components: { inputCount } } </script>
components/inputCount.vue
<template> <div> <input type="text" :value="currentValue" @change="handleChange" @keyup.down="handleDown" @keyup.up="handleUp"/> <button @click="handleDown" :disabled="currentValue <= min" >-</button> <button @click="handleUp" :disabled="currentValue >= max">+</button> </div> </template>
input绑定了currentValue和原生的change事件，在句柄handleChagne函数中，因为绑定的currentValue是单向数据流，所以在输入时，currentValue的值并没有实时进行改变。如果输入的不是数字，就将输入的内容重置为之前的currentValue；如果输入的值是数字，就把输入的值赋给currentValue。
@keyup.down="handleDown"和@keyup.up="handleUp"实现在输入框聚焦时，对键盘上下按键的支持。
<script> // 引入判断函数 import { isValueNumber } from '../common/number' export default { data () { return { step: 10, // 控制步伐 currentValue: this.value //初始化引用父组件value } }, props: { max: { type: Number, default: Infinity }, min: { type: Number, default: -Infinity }, value: { type: Number, default: 0 } }, // 监听选项用来监听某个prop或data的改变，当它们发生变化时，就会触发watch配置的函数 watch: { currentValue: function (val) { // 使用v-model时改变value this.$emit('input', val) // 触发自定义事件on-change事件，用于告知父组件数字输入框的值有所改变 this.$emit('on-change', val) }, value: function (val) { this.updateValue(val) } }, methods: { handleDown: function () { if (this.currentValue <= this.min) return this.currentValue -= this.step }, handleUp: function () { if (this.currentValue >= this.max) return this.currentValue += this.step }, // 过滤出一个正确的currentValue updateValue: function (val) { if (val > this.max) val = this.max if (val < this.min) val = this.min this.currentValue = val }, // 判断输入的值是否为数字 handleChange: function (event) { // e.target.value:指向事件执行时鼠标所点击区域的那个元素的值 // trim():删除字符串开始和末尾的空格 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 } } }, // 第一次初始化需对value进行过滤 mounted: function () { this.updateValue(this.value) } } </script>