CodeLove 論壇 - 免費自學作業包＆新手友善討論區，幫你轉職工程師！

👉 讀技術文章 👉 上自學課程 👉 討論區交流

最新出爐作業包

⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理

⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面

⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念

⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格

⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式

🔍 搜尋結果：只要顯示這三筆資料就好

🔍 搜尋結果：只要顯示這三筆資料就好

站長阿川 · 02月10日

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/vue@3/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 那樣花式的排版（那種叫瀑布流排版，很難寫）做出以上功能，你就完成這次的課程目標了！

0個讚 19留言 1,399瀏覽

歡迎發文

💡 記錄日常工作的實踐、心得

💡 發表對生活和職場的感悟

💡 針對感興趣的事件發表隨筆或者雜談

💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣

💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）

熱門文章

🔥 📈 RAG 檢索增強生成：5 個適合初學者的開源程式庫 🚀

🔥 SOLID－簡單的理解方式

🔥 使用更多的終端機和更少的滑鼠來提高您的工作效率 (🚀)。

🔥 你不是軟體工程師，你只是個「框架使用者」

🔥 🕸️ 2024 年我們將看到的 Web 開發趨勢 👀

近期留言

熱門搜尋： module user nodes 使用題 c 19 go ci 4 C 第一 2 開發 1 前端 20 . git 前 10 % 學習 JS 專案 Github 作為網站 javascript 工作語言 id app 主題 api html 網頁作業 github 後端ＣＳＳ js 50 REACT ui COM 查詢 AI ` API GIT bi " 技術 Ai Git CSS 分享套件搜尋 with for JavaScript 非同步 HTML Javascript 測試 local jav 研自學網頁の嬰兒教材： create 研究履歷 class Can python JAVA unity Vue 面試 result QT react CD Node 聊天 Java 分離 fetch ruby console import JavaScript 系列一遊戲工程師 COMPO 資料庫 Line prisma

CodeLove 愛寫扣論壇 © 2024

🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。