最近在通过《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 id="app">
<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: '/',
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
}
