一次刪除所有class名稱 querySelectorAll 、classList.remove
To remove the class from all elements you can select all elements and use the classList.remove() method on all of them using a loop.
// selecting all elements let items = document.querySelectorAll('.items'); // Using forEach loop items.forEach(function(item) { item.classList.remove('active'); });
HTML錨鏈接代碼。如何在HTML的同一頁面中鏈接。
<a href=”#example”/Example headline</a/
該代碼將創建此鏈接：
當按下上面的鏈接時，瀏覽器將跳轉到下面的標題，並顯示以下代碼：
<h5/<a id=”example”/</a/Example headline</h5/
標題示例
一些文字…
<a href=”../html-link.html#generator”>HTML link code generator</a>
該代碼將創建此鏈接：
當按下鏈接時，瀏覽器將跳至具有以下代碼的html-link頁面部分：
<h2><a id=”generator”></a>HTML link code generator</h2>
基本範例
computed 屬性允許我們去宣告電腦的衍生值. 但是, 這裡有幾個案例我們需要去實現 ” side effects ” 在根據反應中的改變 — 例如, mutating 畫面中的 DOM元素, 或改變另一件 基本的結果 在同步操作當中.
伴隨著 Options API, 我們可以用 watch option 去觸發一個函式, 每當反應值改變:
export default { data() {
return {
question: '', answer: 'Questions usually contain a question mark. ;-)'
}
},watch: {// whenever question changes, this function will runquestion(newQuestion, oldQuestion) {
if (newQuestion.indexOf('?') > -1) {
this.getAnswer()
}
}
}
},
methods: { async getAnswer() { this.answer = 'Thinking...' try { const res = await fetch ('https://yesno.wtf/api') this.answer = (await res.json()).answer
} catch (error) { this.answer = 'Error! Could not reach the API.' + 'error'
}
}
}<p> Ask a yes/no question: <input v-model="question" />
<p><p> {{ answer }} <p>
每一個 Vue 實例透過一系列初始化過程步驟，當他 created — 一個範例，需要設置數據觀察、編譯模板、mount 實例 到DOM，並且當資料改變時更新 DOM。同時，這也被叫做是 生命週期鉤子(lifecycle hooks)，給予使用者添加自己編碼到特定的階段。
例如，created 鉤子可以被用在執行在實例之後：
new Vue({ data: { a: 1
}, created: function(){ // `this` points to the vm instance
console.log('a is:' + this.a) }
})
// => "a is: 1"
也有一些鉤子在生命週期不同階段會被呼叫，像是 mounted, updated, 以及 destroyed . 所有生命週期鉤子都會被各自的 this 文字呼叫.
警告！
不要使用 箭頭函式在 options 屬性 或是 回乎函式，像是
created: () => console.log (this.a) or
vm$watch(‘a’, newValue => this.myMethod()).因為 一個箭頭函式沒有 this, this 會作為一個變數一直向上作用域查找，直到找到為止，經常導致
Uncaught TypeError : Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function.
下方是生命週期的實例，你不需要現在立刻馬上全部了解所有事情怎麼進行，但是當你建造和學習更多，這將會是非常有用的參考依據。
1年9個月學習記錄
斜槓「設計、UI/UX、前端切版、PM、業務助理」
「前端工程師」
熟習 JS 與 框架當中
我還印象非常深刻，當我在 2020/04 時已經對於轉職有迫切的需求，也不斷的對於轉職嘗試各種可能，產品、線控、業務、回到設計；空姐？；獵人頭業務？身邊不乏有人這樣建議我去嘗試，也會接到電話。
但我一直對「科技公司+上市公司+工程師」這樣的職缺有非常大的憧憬。後來我確定了，我想要繼續延伸自己已經會的設計技能，往下繼續走延伸網頁設計。在 2020/04 確定拿到 UI/UX offer 之後，開始依照主管信件中要求的指示自己尋找辦法。即便後來一人身兼多職，但入門磚我願意多做一些。
初次看到下面那張技能樹時，只有絕望。看不懂上面的文字，看不懂他想要表達的意思，沒有時間、沒有經驗、很痛苦、很茫然。
但此時此刻，我居然也已經摸到上面許多的技能，而且有的算是小熟韌。謝謝自己沒有放棄。當初我雖然很痛苦，但我告訴自己，心態：就是持續學一點點、或是放棄？
放棄就一秒鐘，一個念頭。持續學習，再多看一下、再研究一下，也是一個念頭，是花一樣的時間。但我不喜歡看廢片或追劇，我喜歡在一樣的時間去多看一些能夠投資自己的專業。
但不可能完全沒看，我中午吃飯15分鐘是我一天當中最完整看廢片的時刻，還有假日陪媽媽聊天的時候，他如果在追劇我會跟他聊天順便一起看一下。
但都會是搭配事：吃飯所以看15分鐘、陪家人所以看一陣子。
動作上，不會是我主動去找來看。
從平面設計（主要是靜態網頁設計）、UI/UX、前端，一路上不是走得順遂，但我喜歡這條路上發生的很多過程，不斷學到東西還有新功能帶來的興奮感，我覺得讓我很有成就感，尤其是當程式有回饋反應的時候，真的會很感動。Hover or Function click ‘hello world’ 就足以讓我興奮不已。
其實，就是覺得無聊、且覺得奇怪。
為什麼？可以一直做一樣重覆且不需要額外學習，不需要用到英文的工作。而且我看到天花板了。要轉主管職，或是接案增加收入。
我現在所在的路上，是還不夠熟悉JS，且一邊進入框架React.js、Vue.js學習。
其實 寫邏輯 對我來說，真的非常非常困難。甚至也很痛苦。但我相信這個痛苦的感覺一定也跟我當初第一次看到上面那張圖片一樣，會覺得天啊！這一切到底是什麼？而我期許未來的自己，能夠回頭看這篇文章時，已經對框架有一定的掌握度，而我現在要做的就是堅持每天一點。
低潮就是說來就來，非常突然。在一系列學習之後低潮就這樣報到了。
就像是我每週持續堅持的健身一樣，每天一點點，每天最少10分鐘、狀態好就20分鐘。
堅持了一年 2019/03~2020/03
出現了：我最愛的川字線，而我每週持續維持它。
我很感謝「台灣網頁前端技術交流社群」在那邊認識了同伴，和最棒的男朋友，還有一群志同道合的朋友。
兔兔教：大家一起刷了「JS三明治、JS30」真的很精實。常常覺得自己快要堅持不下去的時候，看到同伴有交作業。和 Mentor 的指導讓我們好有安全感，大家互相鼓勵不要害怕把專案弄壞，一個讓我們有容錯率的地方。
很感激能夠有一個地方，能用中文問大家這麼困難的程式問題，大家也願意討論和解答，還可以用放假時間大家一起出去吃吃喝喝，我覺得真的很幸福，低落時大家也會彼此鼓勵。
我們還有一起參加了程式比賽，也得獎入圍。組員們好強大。
交通部比賽也有通過了海選晉級❤️
其實，在學習這條路上我常常覺得很恐慌，甚至覺得無所適從。
但同伴們都會提供前端目前新的資訊，讓我知道了現在的走向跟趨勢，還有這條路上應該多了解CS50，多看有用的資訊(Hiring & Getting Hired in Tech)，可以持續了解的是什麼(物件導向)。
這條路我目前看不見天花板，要學的也無比多，甚至官方也持續更新，但這是好事，表示他們也在想辦法優化這個生態。能做的就是持續學、持續做，即便我跟其他人比起來花的時間真的要很多，大家都有夠快速能夠理解，但他們一定也花了許多時間和專注，本科系的夥伴甚至也是努力了，4年大學2年研究所甚至再多3年高中。
這是一場 馬拉松，不是短跑 。能有同伴的陪伴在身邊我覺得很安心，只要有一句鼓勵的話，我覺得我就可以繼續撐下去。不管是我自己的生活，或是程式學習之旅。
雖然我很慢，抱歉；但我會持續，謝謝：）
2022/03/31 紀錄
不藏私一次公開
