阿花记账问题汇总

Wan_Ti
299 阅读4分钟

阿花项目总结

用到了哪些知识点呢？ 1：组件：类组件+装饰器（JS或者TS都可以） 2：mixin(创建标签) 1)需求：节约多次的代码书写 2):TS的写法不太一样 3：使用computed获取Vuex的数据，或者获取window.store的数据。自动根据依赖去缓存。TS中getter实现 4：watch装饰器的写法：@watch;选项怎么写 5：Prop,sync,v-model 6：插槽(Layout组件) 7：SVG,symbols 8:eslint 9:LocalStorage(5-10M) 思想： 表驱动变成：:class={"key:value"} 模块化思想：Store 重构技巧： 命名严谨性： Vue Router Vuex

第八天

今天的这个问题有点难受

我在完成我的VUE项目的时候，我希望可以在一个单独的ts文件中定义我的变量，然后使我的变量可以被全局引用。我是这样想的，也是这样做的。但是后来我发现并不可以，我只好把我的变量定义到了当前文件，这个问题待解决

第七天

这一天我遇到了传说中的深拷贝

此时我正在完成我的记账代码，我希望每次记账后点击OK可以清零，并且我希望我的数据可以记录到Loacl Storage中，测试时我做了如下操作：先输入1块钱，记录如图所示

当我清空后，我继续输入2块钱，此时记录发生了变化，为什么我第一次的数据也变成了2块钱呢？

为什么会这样呢？因为我们在push的时候push的是引用，我没有对record进行一个复制的操作。当我第二次对record进行操作的时候，用图举例：

我们假设record的地址为101，接下来我们对record进行操作，将record.amount从1变成了2，当我们再次list.push(record)的时候之前的记录会被覆盖。那怎么办呢？ push之前我们把代码进行深拷贝，那么如何进行深拷贝呢？我们先把它变成一个字符串，然后让字符串创建一个对象。

第六天

@Props(这里的类型)，只写冒号后面的类型，示例如下：

@Prop() xxx!: boolean;
这种偷懒的写法会在很后面造成一个 bug。应该写成

@Prop(Boolean) xxx!: boolean;
为什么呢？原因是这样的：

左边的 Boolean 是跟 Vue 说 xxx 的类型是 Boolean（运行时类型）
如果不写左边的 Boolean，那么 Vue 就不知道 xxx 的类型是什么了，默认就把 xxx 当作字符串了
因此，当你给 xxx 传值时，Vue 会将其自动转换成字符串。而与我们的预期「xxx 是 boolean」不相符，这就是 bug。

第五天

git上传失败了怎么办
今天不知道为什么上传github代码一直失败，就总提示这个，这咱也不知道怎么办啊。

后来我就百度啊，百度说是github代码和本地代码版本不一样，尝试强势push还是不行。

好了，最后我试了一下。终于....

git log //这是决定生死的一行代码
然后按q键，Enter退出//好像不按Enter直接就退出了
git rebase --abort //就是这了！！！

看到没有！！！！分支变了有没有！！！ 回到分支之后我们继续

git add .
git commit -m "更新信息"
git push -f origin master

我好了！我又可以了！

第四天

写Vue组件的三种方式（单文件组件）
1：用JS对象
export default {data,props,method,created,...}
2:用TS类

<script lang="ts">
export default class XXX extends Vue{
    xxx.string - 'hi';
    @Prop(Number) xxx:number|undefined;
}

3.用JS类

<script lang="js">
export default class XXX extends Vue{
    xxx='hi'
    }

第三天

TS的好处
1：自动提示更智能
2：不能随便写：toString
3: 编译报错，更严谨
如何使用TS来声明一个VUE组件
首先引入Component和Prop,从第三方库" vue-property-decorator"

<script lang="ts">
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
@Component
export default class TYpes extends Vue {
  type = "-";
  @Prop(Number) xxx: number | undefined;
  //Prop告诉Vue：XXX不是data是prop
  //Number告诉Vue xxx 运行时是个 Number
  //xxx属性名
  //number | undefined告诉TSxxx的编译时类型
  selectType(type: string) {
    if (type !== "-" && type !== "+") {
      throw new Error("type is unknown");
    }
    this.type = type;
  }
}
</script>

第二天

当我在VUE中组件引入组件的时候发现怎么都引入不成功，我就去上网查询资料，后来发现，真的很尴尬
1:新建一个组件
2：在目标组件中引入组件
3：

有一天

当我使用SVG-Sprite-loader来引入所有的Icon,把所有的ICon变成SVG，结果发现：
Webstorm永远都无法import一个SCSS，因为Webstorm在使用loader的时候发现loader有问题，这个时候我遇到了困难，而我知道这个困难是怎么来了花费了一下午的时间。
当我发现了这个BUG之后我github 上找了相关问题的一些提示.

avatar
文章
阅读
粉丝