vue treeselect显示完全路径

一、收入支出Types组件

使用JS做切换组件

改用TS,TypeScript 好处:

1. 类型提示：更智能的提示
2. 编译时报错：还没运行代码就知道自己写错了（无法编译成JS）
3. 类型检查：无法点出错误的属性

必须使用class，可以在class里直接写data、methods、props等

vue-property-decoratorgithub.com

声明props

TS的本质:就是JS:类型（在JS后面添加一个冒号添加相应类型），这个类型就是用来检查JS代码的，检查有两种情况，一种是有错就会报编译错误，如果没有任何错误就会把编译的类型删掉变成只含有JS的那一部分

写 Vue 组件的三种方式（单文件组件）

1、用 JS 对象

export default { data, props, methods, created, ...}

2、用 TS 类 <script lang="ts">

@Component
 export default class XXX extends Vue{
     xxx: string = 'hi';
     @Prop(Number) xxx: number|undefined;
 }

3、用 JS 类 <script lang="js">

@Component
 export default class XXX extends Vue{
     xxx = 'hi'
 }

二、numberPad 模块

添加click事件

设置未输入时默认显示0

output

限制最长输入长度，当默认显示0的时候再次输入0要替换，发现可通过输入0-9数字都实现换的办法；不是开始显示0就实现字符串叠加this.output+=input;默认显示点.的时候要保证不能再次输入.

删除、清除、确认功能

三、备注Notes组件

v-model:如果先绑定了一个value="x"然后绑定事件的时候@input=“x=$event.target.value”将x赋值，那么这个就可以简写成v-model="x"

四、标签Tas组件

原始标签（字符串形式的数组）由外部数据传入

选中标签

@click ="select(tag)"点击哪个就选中哪个，并将选中的push到selectedTas里去

select

selectedTags改变li的class如果是选中的类型class就是selected

:class="{selected:true}"如果true则都是selected,那么就可以判断如果selectedTags里包含当前的tag就是selected

给选中添加样式

取消选择状态 select可改成toggle开关

新增标签

如果填写name且值不为空，会触发updata:dataSource事件会把传的这个数组通过.sync修饰符赋值给之前的dataSource

五、保存至 LocalStorage

1、获取用户输入的tags

触发事件并传数据

点击或者取消即可获取数据

2、获取其他数据

Notes.vue

Types.vue

NumberPad.vue

记录这些数据

效果见：

设置默认值是外部提供的，因此需要将默认值传递给各个组件

因为外部数据是外部传递的因此无需声明taype 也 无需watch

一旦出现：value和@update:value就可以省略

同理NumberPad组件也可以

3、将数据存入LocalStorage

注意此处push的是一个引用（地址）当其引用的值发生改变时，地址没有变化因此之前push的值也会变成最新的值

于是在push之前进行一下深拷贝，每次将副本record2 push进去

当点击OK时数值应该清空

刷新后localStorage不能清空

添加保存时间

当数据库有变化如果一开始没有添加时间，需要进行数据迁移，因此需要添加数据库版本