实现Notes功能

<template>
  <div>
    {{value}}
    <label class="formItem">
      <span class="name">备注</span>
      <input type="text" :value="value" @input="value = $event.target.value" placeholder="输入备注">
      // 使用 v-model 代替 :value 和 @input
      <input type="text" v-model="value" placeholder="输入备注">
    </label>
  </div>
</template>
<script lang="ts">
  import Vue from 'vue';
  import {Component} from 'vue-property-decorator';

  @Component
  export default class Notes extends Vue {
    value = '';
  }
</script>

实现NumberPad功能

<script lang="ts">
  import Vue from 'vue';
  import {Component} from 'vue-property-decorator';

  @Component
  export default class NumberPad extends Vue {
    output = '0';

    inputContent(event: MouseEvent){
      const button = (event.target as HTMLButtonElement);
      const input = button.textContent!;
      if(this.output.length === 16){ return;}
      // 判断0的情况，若输出为0，则将0替换为input；若不为0则追加
      if(this.output === '0'){          
        if('0123456789'.indexOf(input)>=0){
          this.output = input;
        }else{
          this.output += input;
        }
        return;
      }
      // 判断 . 的情况，存在一个小数点，再添加无效
      if(this.output.indexOf('.') >= 0 && input === '.'){return;}
      this.output += input;
    }
    remove(){
      if(this.output.length === 1){
        this.output = '0';
      }else{
        this.output = this.output.slice(0,-1);
      }
    }
    clear(){
      this.output = '0';
    }
    ok(){}
  }
</script>

EventTarget 强制指定类型

event.target.textContent; 存在问题：

1) Object is possibly 'undefined'
2) Propery textContent does not exist on type EventTarget

解决措施：先对event.target 进行判断

if(event.target){
  console.log(event.target.textContent);
}

问题：Propery textContent does not exist on type EventTarget

解决措施：强制指定类型

if(event.target){
  console.log((event.target as HTMLButtonElement).textContent);
}
// 简化
inputContent(event:MouseEvent){
  const button = (event.target as HTMLButtonElement);
  console.log(button.textContent);
}

!表示 排除 as 类型 为空之外的所有情况，即不为空，去除null、undefined

const input = button.textContent!; 
// 等同
const input = button.textContent as string;

String.prototype.slice()

提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。

str.slice(beginIndex[, endIndex])
//slice() 提取的新字符串包括beginIndex但不包括 endIndex。

var str1 = 'The morning is upon us.', // str1 的长度 length 是 23。
    str2 = str1.slice(1, 8),
    str3 = str1.slice(4, -2),
    str4 = str1.slice(12),
    str5 = str1.slice(30);
console.log(str2); // 输出：he morn
console.log(str3); // 输出：morning is upon u
console.log(str4); // 输出：is upon us.
console.log(str5); // 输出：""

String.prototype.substr()

返回一个字符串中从指定位置开始到指定字符数的字符。

str.substr(start[, length])
//  start开始提取字符的位置;length 提取的字符数

var str = "abcdefghij";
console.log("(1,2): "    + str.substr(1,2));   // (1,2): bc
console.log("(-3,2): "   + str.substr(-3,2));  // (-3,2): hi
console.log("(-3): "     + str.substr(-3));    // (-3): hij
console.log("(1): "      + str.substr(1));     // (1): bcdefghij
console.log("(-20, 2): " + str.substr(-20,2)); // (-20, 2): ab
console.log("(20, 2): "  + str.substr(20,2));  // (20, 2):

String.prototype.substring()

返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。 substring 提取从 indexStart 到 indexEnd（不包括）之间的字符

如果 indexStart 等于 indexEnd，substring 返回一个空字符串。
如果省略 indexEnd，substring 提取字符一直到字符串末尾。
如果任一参数小于 0 或为 NaN，则被当作 0。
如果任一参数大于 stringName.length，则被当作 stringName.length。
如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样。

var anyString = "Mozilla";

// 输出 "Moz"
console.log(anyString.substring(0,3));
console.log(anyString.substring(3,0));
console.log(anyString.substring(3,-3));
console.log(anyString.substring(3,NaN));
console.log(anyString.substring(-2,3));
console.log(anyString.substring(NaN,3));

// 输出 "lla"
console.log(anyString.substring(4,7));
console.log(anyString.substring(7,4));

// 输出 ""
console.log(anyString.substring(4,4));

// 输出 "Mozill"
console.log(anyString.substring(0,6));

// 输出 "Mozilla"
console.log(anyString.substring(0,7));
console.log(anyString.substring(0,10));