I recently learned Vue through the "Vue.js Actual Combat" system. Although I have used Vue for development many times in the project, I still don’t understand some very basic knowledge points, so this time I will combine the digital input box components to fight Talk about simple component development.
Source code: https://github.com/zndada/learnVue
Project overall structure
├── src 项目代码
│ ├── common 公共js库
│ │ ├── number.js 判断是否为数字
│ ├── components 组件
│ │ ├── inputCount.vue 数字输入框组件
│ │ ├── inputNumber.vue 数字输入框调用页
| ├── router 路由
| | ├── index.js 路由相关操作
| ├── App.vue 入口页
| ├── main.js !Webpack配置约定的js入口,不要修改名称和路径
main.js
Entry file, the main function is to initialize the vue instance and use the required plug-ins
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/>'
})
View app
The main component, all pages are switched under App.vue. All routes are also subcomponents of 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
}
}
</script>
components/inputCount.vue
<template>
<div class="input-number">
<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>
The input is bound to the currentValue and the native change event. In the handleChagne function, because the bound currentValue is a one-way data flow , the value of currentValue does not change in real time during input. If the input is not a number, the input content is reset to the previous currentValue; if the input value is a number, the input value is assigned to currentValue.
@keyup.down="handleDown" and @keyup.up="handleUp" support the keyboard up and down keys when the input box is focused.
<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>