🔍 搜尋結果:長遠來說

🔍 搜尋結果:長遠來說

JavaScript 系列七:第1課 ── 認識 Vue 基本環境與 render state

## 課程目標 - 能夠運行 Vue 基本環境 - 能夠 render state ## 課程內容 身為工程師,要習慣到處翻閱各種技術文件 這次的課程,我不會手把手帶領,細談所有觀念 我會一次提供一個官網連結。請你一邊閱讀,一邊把其中的範例貼到 jsfiddle 跑跑看 我會額外提供簡單介紹&關鍵字,然後補充一些注意事項 官網文件內容是英文,如果對英文沒把握,就去翻中文官網 https://cn.vuejs.org/guide/introduction.html 但是,長遠來說,還是要逐漸提升自己的英語閱讀能力才行 --- 先學基本的安裝&運行 - https://vuejs.org/guide/quick-start.html 這系列課程,我們用最簡單的 CDN 環境來跑就好了,先只學 CDN 那一段就好 --- 接著來學 Vue 最基本觀念 - https://vuejs.org/guide/essentials/application.html - https://vuejs.org/guide/essentials/template-syntax.html 內容很多,大部份看不懂沒關係,稍微有個印象就好 如同我在前言所說,同一件事有很多種花俏寫法,你根本不用全部學會 這一課我們只要學會如何 render state 就好了 ``` <script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script> <div id="app"> {{ user.name }} 喜歡吃 {{ fruits[0].name }} 以及 {{ fruits[1].name }} </div> <script> const { createApp } = Vue createApp({ data() { return { user: { name: "John Doe" }, fruits: [ { name: "Apple", }, { name: "Banana", }, ] } } }).mount('#app') </script> ``` 上面這段範例,在 `data()` 函式將 application state 準備好 然後只要將一段作為 UI 的 html 寫好,我們稱之為模板(template) 接著 Vue 就會把 state 放進 template 裡面,把結果給 render 出來 貼到 jsfiddle 跑跑看吧,你會發現非常簡單、好理解 ## 課後作業 這系列課程,我們要模仿 Google Keep 製作一個應用程式 請先把玩一下 Google Keep https://keep.google.com/ 作業使用 jsfiddle 來寫 --- 這一課先簡單呈現 UI 就好 請使用以下這段 code 作為 application state ``` data() { return { notes: [ { title: "春節行程安排", content: "吃飽睡,睡飽吃", color: "red", }, { title: "工作待辦事項", content: "詢問各家廠商報價", color: "green", }, { title: "運動健身計畫", content: "每天早上六點去健身", color: "blue", }, ] } } ``` 使用以下這段 code 作為 template ``` <div id="app"> <div class="note"> <h3 class="title"> <!-- 請顯示第一個項目的標題 --> </h3> <p class="content"> <!-- 請顯示第一個項目的內容 --> </p> </div> <div class="note"> <h3 class="title"> <!-- 請顯示第二個項目的標題 --> </h3> <p class="content"> <!-- 請顯示第二個項目的內容 --> </p> </div> <div class="note"> <h3 class="title"> <!-- 請顯示第三個項目的標題 --> </h3> <p class="content"> <!-- 請顯示第三個項目的內容 --> </p> </div> </div> ``` - 陣列內容就只有三筆資料,就只要顯示這三筆資料就好 - 在 application state 裡面的陣列,直接用 `索引` 來取出值就好,這一課先不用寫 for 迴圈 - color 這一課還不會用到,可以先忽略沒關係 - 請在 `<style>` 加上一些樣式,讓整個頁面漂亮一點 - 每則記事可以單純的放進網頁就好,不用像 Google Keep 那樣花式的排版(那種叫瀑布流排版,很難寫) 做出以上功能,你就完成這次的課程目標了!

JavaScript 系列四:第3課 ── Chart.js 套件

## 課程目標 認識並且能使用 Chart.js 套件 ## 課程內容 這次的套件是 https://github.com/chartjs/Chart.js 文件與 demo 在 https://www.chartjs.org/ 這是一個畫圖表、報表的工具,而且非常漂亮 如果不使用套件,自己手動做圖表的話,要用 `canvas api` 來畫,而且需要很多數學計算來繪圖,非常麻煩 這次就完全自己研究看看吧。先試著讓官方範例可以成功跑出來,然後再試著調整設定、參數、放進自己的資料畫圖看看 --- 軟體工程師,經常需要翻閱大量的國外文件,所以需要基本的英語閱讀能力 不用精通沒關係,一邊翻文件,一邊查字典,拼湊線索看看 如果實在不行,就搜尋 `套件名稱 教學` 來找找看有沒有好心人寫過教學,例如 `chart js 教學` 長遠來說,還是要逐漸提升自己的英語閱讀能力才行 ## 課後作業 請使用 https://jsfiddle.net 請在網頁上,畫出三種圖表 - 折線圖 Line Chart - 長條圖 Bar Chart - 圓餅圖 Pie Chart 政府近年在提倡透明化,公佈了許多資料 請前往 政府資料開放平台 https://data.gov.tw/ 或是 台北市政府資料開放平台 https://data.taipei/ 逛逛看,找幾份有趣的資料。 這三種圖表的使用時機不太一樣,適用的資料類型也不太一樣,你可以稍微研究一下,選擇你覺得適合的 (資料量巨大的話,請在圖表內呈現10筆資料即可。) 做出以上功能,你就完成這次的課程目標了!