vue实现一个简单的备忘录demo

demo代码：https://github.com/zuxian/todolist

备忘录展示： fuzuxian.fun/todolist/dist/

• 1，组件一： 头部–标题；

• 2，组件二：脚部—一个简单链接；

<p><a v-bind:href="url" target="_blank">{{ footer }}</a></p>
  data () {
    return {
      footer: '我的学习记录',
      url: 'https://blog.csdn.net/image_fzx',
    }
  }

3，组件三additem.vue：点击添加新事件；

  方法：addIt、addSubmit、clearAdd

<span v-show="!isAdding" class="add-item" v-on:click="addIt">{{ note }}</span>

<span v-show="isAdding" class="adding-item editing">
   <input type="" name="" value="" v-model="addingDraft">
   <button v-on:click="addSubmit()">确定</button>
   <button v-on:click="clearAdd()">取消</button>
</span>

export default {
  name: 'AddItem',
  props: ['items','editingItem','editingValue'],
  methods: {
    addIt: function () {
      this.isAdding = true;
      this.$emit('clear-editing',{});
    },
    addSubmit: function () {
      if (this.addingDraft.trim()) {
        this.items.push({
          value: this.addingDraft,
          isDone: false,
          isEditing: false,
        });
        this.isAdding = false;
        this.addingDraft = "";
      }
    },
    clearAdd: function () {  this.isAdding = false;  },
  },
  data () {
    return {
      note: "点击添加新计划 !",
      isAdding: false,
      addingDraft: "",
    }
  },
};

4，组件四appcontent.vue：

  方法：
  >clearAdding（取消添加）、
  doneIt（完成）、deleteIt（删除）、
  【editIt（编辑）==》：editSubmit（提交编辑）、clearEditing（取消编辑）】

  <ul>
    <li v-for="(item,index) in items">
      <span v-show="!item.isEditing" v-bind:class="{ done: item.isDone}">
        {{ index + 1 }}. {{ item.value }}</span>

      <span v-show="item.isEditing" class="editing">
        <input type="text" name="" v-model="item.value">
        <button v-on:click="editSubmit(item)">确定</button>
        <button v-on:click="clearEditing()">取消</button>
      </span>

      <button v-on:click="editIt(item)">编辑</button>

      <button v-on:click="doneIt(item)" v-bind:class="{ doneBtn:item.isDone }">
        <span v-show="item.isDone">恢复</span><span v-show="!item.isDone">完成</span>
      </button> 

      <button v-on:click="deleteIt(index)">删除</button>
    </li>
  </ul>

export default {
  name: 'AppContent',
  props: ['items'],
  methods: {
    clearAdding: function () {
      this.$emit('clear-adding', false);
    },
    doneIt: function (obj) {
      obj.isEditing = false;
      obj.isDone = !obj.isDone;
      this.clearEditing();
      this.clearAdding();
    },
    deleteIt: function (index) {
      this.items.splice(index, 1);
      this.clearEditing();
      this.clearAdding();
    },
    editIt: function (obj) {
      this.clearEditing();   // 这句要放前面
      this.editingItem = obj;    // 保存当前编辑的todo对象，该对象是一个引用值
      this.editingValue = obj.value;   // 保存修改前的内容，该字符串是一个原始值
      obj.isEditing = true;
      this.clearAdding();
    },
    editSubmit: function (obj) {
      // 确认后，两个临时变量清空
      this.editingItem = null;
      this.editingValue = "";
      if (obj.value.trim()) {
        obj.isEditing = false;
      }
    },
    clearEditing: function () {
      // 如果取消了编辑，即没有正常保存，就不改变item值
      if (this.editingItem) {
        this.editingItem.isEditing = false;
        this.editingItem.value = this.editingValue;
        this.editingItem = null;
        this.editingValue = "";
      }
    },
  },

  data () {
    return {
      editingItem: null,
      editingValue: "",
    }
  },
};

APP.vue

<AppContent ref="content"   v-bind:items="items"   
      v-on:clear-adding="clearAdding"> </AppContent>

 <AddItem  ref="addItem"  v-bind:items="items"
      v-on:clear-editing="clearEditingContent"> </AddItem>
      
clearEditingContent: function () {this.$refs.content.clearEditing();     // 执行函数 },
clearAdding: function ($event) {this.$refs.addItem.isAdding = $event;   // 直接设定值  }