Detaillierte Interpretation des todoMVC-Codes in Vue

In diesem Artikel wird hauptsächlich der Beispielcode der offiziellen Website von Vue vorgestellt Grundsätzlich habe ich mir nicht den Quellcode der offiziellen Website angesehen, sondern nur die benutzerdefinierten Anweisungen. Lassen Sie es uns Schritt für Schritt erkunden. Offizielle Website-Demo

Zu implementierende Funktion

Einzelne Aufgaben hinzufügen
Einzelne Aufgaben löschen
Doppelklick zum Bearbeiten der Aufgabe
Einzelne Aufgabe hat die entsprechende Änderung des Stilstatus abgeschlossen
Alle Aufgaben wurden erledigt. Der entsprechende Stilstatus ändert sich
Alle erledigten Aufgaben löschen
Anzahl der zu erledigenden Aufgaben anzeigen
Alle Aufgaben, erledigten Aufgaben und unvollendeten Aufgaben filtern

Einzelne Aufgaben hinzufügen

<input type="text" class="todos_add" placeholder="What needs to be done?" 
@keyup.enter="addTodo($event.target)" //绑定enter事件
ref="currentInput">//操作input元素使enter一下之后清空输入框内容

rrree Fügen Sie jede Aufgabe hinzu. Die entsprechenden Status jeder Aufgabe werden im selben Objekt gespeichert und werden nicht einheitlich verarbeitet, wenn der Aufgabenstatus geändert wird, sodass jede Aufgabe einen separaten Status hat.

Einzelnes Löschen einer Aufgabe

data() {//一些初始化数据
 return {
  todolists: [],
  dataStatus: ["All", "Active", "Completed"],
  dataStatusIndex: 0,
  whichShow: true,
  defaultShow: true
 }
},
addTodo(e) { //添加todo
 var val = e.value
 if (val === "") {return} //如果输入内容为空则立即返回
 this.todoLists = this.todoLists.concat({//使用concat这个api添加todo
  value: val, //输入内容
  isEditing: false, //是否在编辑状态
  isActive: false, //删除X图标是否激活
  isChecked: false //是否已完成
 })
 this.$refs.currentInput.value = "" //按下enter添加todo之后把输入框value清零
 window.localStorage.setItem("content",JSON.stringify(this.todoLists))//使用localStorage以JSON格式存储数据
},

 <li class="content_todoList"
 v-for="(list,index) in todoLists" 
 @mouseover="list.isActive = true" //鼠标移入todo改变对应todo的isActive状态
 @mouseleave="list.isActive=false" //鼠标移出todo改变对应todo的isActive状态
 <span class="el-icon-close content_todoList_delete" 
 :class="{show: list.isActive}" //动态绑定class使鼠标移动到某一todo显示X图标
 @click="deleteTodo(index)"> //绑定删除单条todo事件
 </span>
</li>

Binden Sie Ereignisse zum Ein- und Entfernen der Maus an jedes Li-Element, um das isActive jeder Aufgabe dynamisch zu ändern, und verwenden Sie dann isActive für eine dynamische Änderung Anzeigeklassen.

Doppelklicken, um die Aufgabe zu bearbeiten&&eine einzelne Aufgabe ist abgeschlossen

deleteTodo(index) { //删除单条todo
  this.todoLists.splice(index, 1)//使用splice的api
  window.localStorage.setItem("content",JSON.stringify(todoLists)) //以JSON格式存储数据//localStorage存储数据
},

rrreeKontrollieren Sie die Anzeige und ob sie über das Attribut isEditing in jeder Aufgabe bearbeitet werden kann. Doppelklicken Sie auf p, um die zu ändern Die aktuelle Aufgabe ist „true“, daher wird sie als Eingabe angezeigt. Nachdem die Eingabe den Fokus verliert, wird sie durch das Unschärfeereignis in „false“ geändert.

Verwenden Sie todos idChecked, um zu steuern, ob es abgeschlossen ist, und ändern Sie so den Stil dynamisch.

Alle Aufgaben wurden erledigt

<input type="checkbox" class="checkBox" 
v-model="list.isChecked">//双向绑定isChecked

<p class="content_todoList_main" 
@dblclick="toEdit(list)" //双击事件
v-show="!list.isEditing" //切换元素
:class="{deleted:list.isChecked}"> //动态绑定class该表已完成todo样式
{{list.value}}
</p>

<input type="text" class="content_todoList_main main_input" 
v-model="list.value" //双向绑定可输入value
v-show="list.isEditing" //切换元素
v-todo-focus="list.value" //自定义指令，双击之后自动focus对焦
@blur="unEdit(list)"> //绑定blur失去焦点事件

methods: {
 toEdit(obj) { //使添加的todothing可编辑
  obj.isEditing = true
 },
 
 unEdit(obj) { //使添加的todothing不可编辑
  obj.isEditing = false
 },
}

directives: { //自定义focus指令,需要一个binding参数做判断
 "todo-focus": function (el, binding) {
  if (binding.value) {
   el.focus()
  }
 }
}

Die Anzahl der zu erledigenden Aufgaben wird angezeigt

<span 
class="icon-down el-icon-arrow-down" //使用element库做向下箭头icon
v-show="todoLists.length>0" //通过todoLists控制是否显示向下箭头icon
@click="selectAllTodos"></span> //全部已完成事件

selectAllTodos() { //设置所有todo为已完成,使用map的api通过todo的isChecked属性操作
 this.todoLists.map(todo => todo.isChecked = todo.isChecked ? false : true)
}

Verwendung berechneter Attribute zur Berechnung todoLists, verwenden Die for-Schleife wählt die Akkumulation mit idChecked als wahr aus und gibt schließlich mal zurück.

Alle abgeschlossenen Aufgaben löschen

<p class="data_times" v-show="times === 0"> //times为0显示item，大于0显示items，细节注定成败
 <span>{{times}}</span>&nbsp item left
</p>
<p class="data_times" v-show="times > 0">
<span>{{times}}</span>&nbsp items left</p>

rrreeWenn die Zeiten der Aufgaben für Aufgaben kürzer sind als die Länge von Aufgabenlisten, beweist dies, dass abgeschlossene Aufgaben vorhanden sind, und „Erledigte löschen“ Wenn sie gleich sind, bedeutet dies, dass keine erledigte Aufgabe vorliegt.

Drei-Status-Filterung

Alle Todos, abgeschlossenen Todos, unvollendeten Todos-Filterung

computed: {
 times() { //使用计算属性计算待办todos的次数 
  let todoArr = this.todoLists
  let times = 0
  for (let i = 0; i < todoArr.length; i++) {
   if (todoArr[i].isChecked === false) {
    times++
   }
  }
  return times
 }
},

<p class="data_clearTodos" 
@click="clearTodos" 
v-show="times < todoLists.length"> //如果待办事件次数小于总todoLists长度就显示“clear completed”
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >clear completed</a>
</p>

<p class="data_clearTodos" 
@click="clearTodos" 
v-show="times === todoLists.length"> //如果待办事件次数等于总todoLists长度就显示“clear completed”
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
</p>

Was ich hier mache, ist eine simultane, wenn bedingte Satzbeurteilungsoperation, Es ist etwas mühsam und mir sind noch keine anderen Lösungen eingefallen. Verwenden Sie den ternären Operator und den Operator or für das li-Element, um Aufgaben in verschiedenen Zuständen anzuzeigen.

Vollständiger Code

clearTodos() { //清空已完成的todoLists，使用filter的api进行筛选
 this.todoLists = this.todoLists.filter(todo => todo.isChecked === false)
 window.localStorage.setItem("content",JSON.stringify(this.todoLists)) //以json格式存储数据
},

rreeDas Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die mehrseitige Entwicklung in vue2.0

So implementieren Sie die Drag-Verifizierung mit jQuery und vue Codefunktion

Detaillierte Einführung in mehrere JavaScript-Codierungsspezifikationen (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonDetaillierte Interpretation des todoMVC-Codes in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!