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;   // 直接設定值  }