Vanilla JavaScipt / JQuery / Vue
這是一個透過 Vanilla JavaScipt / JQuery / Vue 實作 To Do List 的練習。學習透過原生 JavaScipt 操作 DOM API，再比較使用 Library 和 Framework 的異同，去理解它們底層分別處理掉了什麼原生語法需要處理的麻煩事。
- 輸入待辦事項後，點選新增可以將事項加入未完成的項目。
- 並且可以針對待辦事項直接做內容的修改及刪除。
- 做完的事項可以勾選變成 已完成項目，也能將已完成的項目的狀態改為未完成。
- selector：
.querySelector(),.querySelectorAll() - array maniputation：
.push(),.unshift(),.splice(),.length - hierarchy：
.parentElement,.children[i] - what's
this! - data：
.innerHTML,.textContent,value - event handler：
.addEventListener(),.removeEventListener(),click,blur,focus - 三元表達式
varversuslettemplate literalsES5 functionversusarrow function- array loop：
.forEach() - 防止冒泡向上傳遞：
event.stopPropogation() - 防止觸發預設事件：
event.preventDefault() return
// Vanilla
document.addEventListener("DOMContentLoaded", function() {});
// 等於 JQuery 的
$(document).ready(function() {});
- selector：
$.( ) - loop：
.each() - 防止冒泡向上傳遞：
event.stopPropogation() - 防止觸發預設事件：
event.preventDefault() - getter and setter：
.val(),.empty(),.text() - event handler：
click,blur,focus,on,off JQuery Objects才能使用JQuery Methods- hierarchy：
.parent(),.children() - dataset：
$('[data-name]') thisversus$(this)
- Vue
- Event handlers
- value passing between parent component and child component
- Attribute - ref
- Directives
- Config
- Modifiers
- VueX
- state, getters, mutations, actions
- Vue Router