1. 前言

1.书接上文vue3-ts核心语法

2.这个主要是 事件写法 和 计算属性的用法

2. 需求

1.类似一个 toDoList

2.根据输入的内容来动态列表显示

3.添加成功总数 通过计算属性来得到 数组总数

3. 模板

1.首先为了更多的练习,这里我就不使用v-model了

<h1>函数</h1>
    <p><input type="text" @keydown.enter="addCharacter" /></p>
    <hr />

4. 事件

1.事件在TS里面也是直接写的,

2.和属性的区别就在于有没有()了

4.1 事件写法

直接在组件里面写

addCharacter(e: Event) {}

4.2 直接写Event的问题

1.首先代码提示不够精准

2.例如 e.altKey  e.keyCode 都没有提示

4.3 KeyboardEvent

1.因我们是输入框,所以我们很清楚是 键盘事件

2.写的越详细代码提示越详细,写起来越轻松

3.而且如果写错了立刻会有提示,不必等到运行再去测试

4.4 target

e.target

4.4.1 报错分析

1.这个target属于联合类型,

2.有可能为空

3.所有你不能对一个 possibly null/可能为空的对象进访问属性操作

4.null嘛 对象就没有属性了

4.4.2 解决   数据断言  as

const inputE = e.target as HTMLInputElement;

数据断言 用户确定这个变量的类型 可以使用断言,告诉编译器 不用操心了,我知道啥类型

4.5 完整代码

addCharacter(e: KeyboardEvent) {
    const inputE = e.target as HTMLInputElement;
    const character: SelectCharacter = {
      id: this.characters.length + 1,
      name: inputE.value,
      selected: false,
    };
    this.characters.push(character);
    inputE.value = "";
  }

4.6 分析

1.其实这里面的SelectCharacter类型写不写都行.因为已经进行赋值了嘛

2.这里为了省事 直接把这个数组的长度+1作为id了,因为id最好不要从0开始,所以+1了

3.输入框的值赋值给name属性

4.添加到数组

5.清空输入框,形成闭环

5. 计算属性

直接写get 后面跟 名字

名字其实就是属性名

return

// ************* 存取器计算属性的实现
  // 也是有缓存的
  get count() {
    return this.characters.length;
  }

使用计算属性

<h1>特性总数 {{ count }}</h1>