本文同步發表於斜槓女紙部落格：Day13 萬丈高樓平地起(1)：Vue 的生命週期 生活的道路一旦選定了，就要勇敢的走下去。是的，一旦報名鐵人賽，就要認...
前言 昨天介紹完V-for，我們應該對於常見V-for用法有更深入的認識。如：顯示過濾資料，也介紹了使用V-for上需要注意地方，如：不要把V-for跟V-if...
filters在兩個地方可用：{{ }}和v-bind表達式（2.1.0+支持後者）。filters應附加在JavaScript表達式的末尾，並以 | 符號...
晴
‧
2019-09-27
前面幾篇講到了元件，並介紹元件之間由外而內資料傳遞的屬性 props 還有由內而外傳遞的事件 emit元件也不只可以重複的讓我們來做使用，如果今天一個元件我們只...
前面講到 props，它是由外而內傳遞資料的一種屬性不同於 props，emit 是一種事件，而且特性是由內至外有一種情境是，當我們在 Vue 的 method...
這裡來介紹在 Vue 動態加上 class一樣先把 Vue 的架構先撰寫出來，而目標是想點擊按鈕時會在 .box 自動加上 rotate 這個 class，再點...
Vue.extend 是一個構造器,也就是預設了部分選項的Vue實例構造器。經常服務於Vue.component用來生成組件，可以簡單理解為當在模板中遇到該組...
晴
‧
2019-09-26
前言 昨天介紹了V-bind用法，今天我們就來介紹v-for吧！本文同步發表於Andy's Blog 參考資料：官網v-for介紹練習檔案 V-for 用途：...
在前面我們已經了解了元件，現在我們要來多加說明 props 這個屬性props 是由外而內傳遞資料所使用的屬性有時候我們傳遞的資料也許是需要數值型態來計算的，這...
我們在前面講了很長篇幅的元件，那元件可以分為局部註冊跟全域註冊，前面的方式我們都是採用全域註冊，而所謂的全域就是指，當我在新增一個 Vue 的應用程式時，它也可...
本文同步發表於斜槓女紙部落格：Day 12 喘口氣，打好基礎再繼續攻城掠地 依照先前進度，原本該繼續切版的行程。將房間列表中的房間設施藉由主辦方提供的第二組...
本文同步發表於斜槓女紙部落格：一轉任務(二)：將房間資料show到網頁畫面上(2) 昨天終於順利通過v-for和API串接這兩個小壞壞的考驗，接下來就是將...
前言 上一篇我們介紹了Vue指令：V-bind、V-on，那今天我們要學習另外一個Vue指令：V-bind本文同步發表於Andy's Blog V-bind...
在 Vue 裡面，我們可以使用元件來動態掛載 HTML而元件到底是什麼? 如果以 HTML 來說的話，就會類似像是 Header Content 這樣一個區塊一...
先前有講到 v-on 和 v-bind 指令v-on 用在事件上，v-bind 用在綁定標籤的屬性上而這些指令其實是有修飾符可以用的，意指縮寫。 拿前面章節的程...
插槽可幫助您在components 中放置內容，允許以嚴格的父子關係以外的其他方式來組合components。 單個插槽（Single Slot） 使用<...
晴
‧
2019-09-24
前幾篇講到的都是父组件使用 prop 傳遞數據给子组件，因此如果要透過子組件操作資料並異動父組件的話，這時就要透過 emit 事件通知父層。 demo thi...
晴
‧
2019-09-23
接下來要來介紹，如何綁定事件，以 click 事件來舉例: <div id="app"> <input type=&q...
單向數據流（One-Way Data Flow） 所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組...
晴
‧
2019-09-22
本文同步刊載於Andy's Blog 前言 昨天我們簡單介紹了Vue的兩種模板語法：分別為插值（Mustache語法）跟指令v-開頭。而今天我們將先介紹V-...
本文同步發表於斜槓女紙部落格：Day10 將房間資料show到網頁畫面上(1) 承接昨天的進度，看到串接success的反饋訊息後，想說趁著這個運氣一口氣把...
本文同步發表於斜槓女紙部落格：Day9 What is API？ 今天要進入房間列表的切版，進行到這兒要遇到對我來說比較具挑戰性的項目：串接API。 這次...
這篇要來介紹 v-for 和 v-if 這兩個指令相當於 JavaScript 的 for 迴圈跟 if 判斷式一樣先把 Vue 的基本架構寫出來: <d...
本篇文章同時刊載於Andy's Blog 前言 上一篇文章中我們介紹了Vue的生命週期，了解Vue背後是如何把資料渲染到畫面上，也知道如何在不同life h...
本文同步發表於斜槓女紙部落格：切版任務(三)：首頁畫面搭配ScrollReveal，網頁畫面動次動(2) 嗨！又見面了，今天會持續將HTML標籤轉換成Vu...
接下來要來介紹一個新的指令 v-bind，它是用來綁定 HTML 標籤的屬性照慣例，Vue 的架構如下: <div id="app"&...
本文同步發表於斜槓女紙部落格：Day4 新手村的探險：專案環境設定和指令(Directives) 嗨！今天終於要打開VSCode準備開始撰寫專案了！先讓大...
本文同步發表於斜槓女紙部落格：Day6 切版任務(二)：首頁畫面搭配ScrollReveal，網頁畫面動次動(1) 今天終於要正式開始切版囉！ 再看一次設計...
前面一篇我們建立應用程式的時候把資料呈現在頁面上的方法是使用兩個大括號包覆的方式，如下: <div id="app">...
前言 上一篇文章中，我們已經為大家簡單介紹Vue Instance，並且透過範例讓大家初步了解該如何使用Vue 。而這篇文章我將為大家介紹Vue元件生命週期。...
iThome鐵人賽
看影片追技術
看更多
鍾小呆
chunwen
Jerry Huang