记事本功能（非原创）

这是一个关于记事本的网页，主要是用vuejs和jQuery编写，内容保存在localstorage中，效果图如下：

这个项目主要模仿的GitHub上的一个项目：记事本，这个用的是vue1版本，我把它下载下来后，因为我的是2版本，导致有问题，于是就仿照它的写法，让这个项目可以在2版本上运行，其中遇到了几个问题，记下来，便于以后查找。（其实就是版本升级导致一些api不可用）

1. $broadcast问题

在vue1版本中，在父组件中调用子组件中的事件可以这样写：

events: {
    editMarkdown (memo) {
      this.$broadcast('editMarkdown', memo);
    },
    editDoodle (memo) {
      this.$broadcast('editDoodle', memo);
    }
  }

在vue2版本中，则需要修改为：

<memo-editor ref="editor"></memo-editor>
editMarkdown(memo){
        this.$refs.editor.editMarkdown(memo);
      },
      editDoodle(memo){
        this.$refs.editor.editDoodle(memo);
      }

而且vue1在events中写的，在2中写到了methods方法中。
2.dispatch的用法
dispatch和broadcast相反，是在子组件中调用父组件的写法，vue1中

editMarkdown () {
      switch (this.memo.type) {
        case 0:
          this.$dispatch('editMarkdown', this.memo);
          break;
        case 1:
          this.$dispatch('editDoodle', this.memo);
          break;
      }

vue2中的写法：
子组件

editMarkdown (){
      switch (this.memo.type) {
        case 0:
              this.$emit('edit',this.memo);
              break;
        case 1:
              this.$emit('editDoodle',this.memo);
              break;
      }
    }

父组件
<memo-item @edit="editMarkdown" @editDoodle="editDoodle" :key="index" v-for="(memo,index) in memosFiltered" :memo="memo"></memo-item>

3.ready周期钩子

在1中：

ready () {
    this.filterBy(0, this.queryString);
    this.sortByTimeOrTitle('title');
  }

在vue2中则需要把ready换为mounted

mounted(){
      this.filterBy(0,this.queryString);
      this.sortByTimeOrTitle('title');
    }

4.在页面样式初次加载时，vue1版本正常，2样式有些问题，原因没有找到，我猜测是ready周期钩子的问题，但是不知道怎么验证，于是就用jQuery加了个函数，让页面加载完执行一次函数，样式正常。

$(function(){
  helpers.resizeMemos();
});

这是我遇到的几个问题，其他的问题都是在写代码过程中不够仔细造成的，还有一些问题是对webpack配置的不熟悉，以后慢慢熟悉。
demo演示
github地址