六角選擇 Vue錄製教材的原因

語法直觀、學習曲線較平緩、雙向綁定。

語法直觀及學習曲線平緩對於一個自學入門前端者而言，我認為非常重要，不容易受挫、容易吸收對於自學者來說是很必要的，畢竟自己寫程式已經很孤獨了，甚至是害羞內向不善在線上請教的入門者而言～稍後再來談談雙向綁定

開發環境準備

大部分課程設計都會是開發環境介紹，這裡提到的在未付費的udemy課程頁上面也可以預覽，直接列出提到的項目，至於想知道這些功能個別是什麼，可以去課程預覽頁面觀看：
編輯器 VS code
編輯器擴充

• Preview on Web Sever
• vue
• vue 2 snippets
• vue-cli

同時如果有寫過bootstrap的人應該也會參考bs的官網（至少我自己是這樣，做案子時實在很想偷懶很趕就直接複製來改）寫vue當然也要參考vue官網，可自行切換中英文

接者是 Chrome的擴充 vue devtools
安裝後在網頁上元件點右鍵>檢查，看到Element Console …的那一列，最右邊有 Vue，點擊後左邊會有資料的樹狀圖，右邊會顯示資料可以逐一打開並暫時修改，這讓我們可以方便測試

而我自己是推薦開發者護眼必備 chrome dev tool darken
顧名思義讓 dev tool黑化不刺眼

回到vue官網中，介紹>起步有個範例 JSFiddle 上的 Hello World 例子，可以供我們自行參考(或腦補)，我們可以在裡面看到起手式就是

new Vue()

範例內容擷取
(html)

<div id="app">
  <p>{{ message }}</p>
</div>

(javascript)

new Vue({
	el: '#app',
        data: {
            message: 'Hello Vue.js!'
  		}
})

這邊給 html中 div標籤一個 id，我們在寫 css時慣例是使用 class，而 id是留給程式端使用的，當然也是可以用 class，el: 裡面就改成 '.app'，不過還是遵從慣例對於將來或他人在維護使用上會比較好。

雙向綁定

來談談雙向綁定，參閱這個網站
双向绑定- 廖雪峰的官方网站
单向绑定- 廖雪峰的官方网站
裡面對單向、雙向的解釋都很白話，主要差在 user能不能在 view時對 model操作，像是填表單的時候。綁定也稱作「繫結」，可以搜尋看看單向繫結、雙向繫結這兩個關鍵字。

最後再提一下官網的內容，光是介紹頁就有附上許多教學連結（"在 Scrimba 上尝试这节课"字樣），渲染( {{}} )、判斷式(if)、on:click在這裡就已經有介紹，若要直接用官網做教材，應該也是很好的選擇，等影片讀完之後計畫把官網全面讀過，再來分享給各位囉～（不過要在30天內做到做好又做滿好困難欸，直接變明年主題嗎？）然後真的是很擔心不小心就侵權，請務必告知，會盡快修改！感恩感恩