记账项目笔记（2）：Money组件

一、CSS思路

• reset：清空默认样式，代码放 reset.scss
• 全局样式：设置字体、行高 写在App.vue
• 变量：代码放helper.scss，只放变量、函数、mixin
• 局部设置

1. 从'vue-property-decorator'引入Component装饰器
2. 把装饰器修饰到class上

   @Compoent
   export default class Types extends Vue {...}
   

3. class可以加上data、methods、props、生命周期。data、methods、生命周期可以直接声明，props声明需要引入装饰器

   @Prop(Number)xxx:number | undefined
   

4. 如果方法不传参，Vue会自动帮我们传参，这个参就是跟这个事件相关的所有信息event
5. 强制指定类型（遇到提示类型可能为空的情况使用）
   

   (event.target as HTMLButtonElement).textContent
   

   如果只是想把不为空的情况排除掉，用"!"替换

   button.textContent !
   

6. 检验字符串是否重复用indexOf()方法

   if(this.output==="0"){
       if("0123456789".indexOf(input)>=0){
           this.output = input
       }
   }
   

   if(this.output.indexOf(".")>=0){
       if(input==="."){return}
   }
   

7. v-model使用
   

   <input :value="value" @input="value=$event.target.value">
   等价于
   <input v-model="value">