本文同步發表於斜槓女紙部落格:Day10 將房間資料show到網頁畫面上(1) 承接昨天的進度,看到串接success的反饋訊息後,想說趁著這個運氣一口氣把...
這篇要來介紹,基本常用的一些表單元素,與 Vue 的資料綁定時會如何做我們一樣先把 Vue 的架構寫出來,只是這次在 data 內新增多個變數來存放不同的表單元...
前言 昨天介紹完V-for,我們應該對於常見V-for用法有更深入的認識。如:顯示過濾資料,也介紹了使用V-for上需要注意地方,如:不要把V-for跟V-if...
前言 昨天介紹了V-bind用法,今天我們就來介紹v-for吧!本文同步發表於Andy's Blog 參考資料:官網v-for介紹練習檔案 V-for 用途:...
本文同步發表於斜槓女紙部落格:Day9 What is API? 今天要進入房間列表的切版,進行到這兒要遇到對我來說比較具挑戰性的項目:串接API。 這次...
這裡來介紹在 Vue 動態加上 class一樣先把 Vue 的架構先撰寫出來,而目標是想點擊按鈕時會在 .box 自動加上 rotate 這個 class,再點...
插槽可幫助您在components 中放置內容,允許以嚴格的父子關係以外的其他方式來組合components。 單個插槽(Single Slot) 使用<...
前言 上一篇我們介紹了Vue指令:V-bind、V-on,那今天我們要學習另外一個Vue指令:V-bind本文同步發表於Andy's Blog V-bind...
先前有講到 v-on 和 v-bind 指令v-on 用在事件上,v-bind 用在綁定標籤的屬性上而這些指令其實是有修飾符可以用的,意指縮寫。 拿前面章節的程...
前幾篇講到的都是父组件使用 prop 傳遞數據给子组件,因此如果要透過子組件操作資料並異動父組件的話,這時就要透過 emit 事件通知父層。 demo thi...
單向數據流(One-Way Data Flow) 所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定:父級 prop 的更新會向下流動到子組...
接下來要來介紹,如何綁定事件,以 click 事件來舉例: <div id="app"> <input type=&q...
本文同步刊載於Andy's Blog 前言 昨天我們簡單介紹了Vue的兩種模板語法:分別為插值(Mustache語法)跟指令v-開頭。而今天我們將先介紹V-...
本文同步發表於斜槓女紙部落格:切版任務(三):首頁畫面搭配ScrollReveal,網頁畫面動次動(2) 嗨!又見面了,今天會持續將HTML標籤轉換成Vu...
本文同步發表於斜槓女紙部落格:Day6 切版任務(二):首頁畫面搭配ScrollReveal,網頁畫面動次動(1) 今天終於要正式開始切版囉! 再看一次設計...
這篇要來介紹 v-for 和 v-if 這兩個指令相當於 JavaScript 的 for 迴圈跟 if 判斷式一樣先把 Vue 的基本架構寫出來: <d...
本篇文章同時刊載於Andy's Blog 前言 上一篇文章中我們介紹了Vue的生命週期,了解Vue背後是如何把資料渲染到畫面上,也知道如何在不同life h...
接下來要來介紹一個新的指令 v-bind,它是用來綁定 HTML 標籤的屬性照慣例,Vue 的架構如下: <div id="app"&...
前言 上一篇文章中,我們已經為大家簡單介紹Vue Instance,並且透過範例讓大家初步了解該如何使用Vue 。而這篇文章我將為大家介紹Vue元件生命週期。...
上一篇文章我們簡單介紹了Vue的幾個重要特性(漸進式框架、MVVM、元件、載入方式)。若不清楚的話,可以點擊上篇觀看Day2 - Vue 基本介紹(漸進式框架、...
本文同步發表於斜槓女紙部落格:Day4 新手村的探險:專案環境設定和指令(Directives) 嗨!今天終於要打開VSCode準備開始撰寫專案了!先讓大...
前面一篇我們建立應用程式的時候把資料呈現在頁面上的方法是使用兩個大括號包覆的方式,如下: <div id="app">...
本文同步發表於斜槓女紙部落格:Day3 編輯器擴充套件設定+引入Vue.js 嗨~今天要來說說我習慣使用的開發環境,由於我的mac已經設定好了,捨不得打掉重...
Vue 的引入跟 jQuery 一樣,這裡就不多贅述,版本一樣有壓縮版本跟開發人員版本。當引入好 Vue 之後,我們就可以先來建立第一個應用程式。 首先我們先在...
本文同步發表於斜槓女紙部落格:Day2 了解你的敵人:Vue.js是什麼? 首先,我大膽假設證,在看文章的你知道JavaScript是什麼東東。 什麼?你...
這是我第一次參加鐵人賽,先說目標吧,我想藉由這樣的比賽來提升自己研究技術的能力。過去幾個月的我,把這樣一個重要的能力流失掉了。 我還記得我剛開始接觸 web 的...
本文同步發表於斜槓女紙部落格:Day1 前言:頭腦一熱就… 故事是這樣開始的 嗨!我是鍾小呆。靠著自學自修,繼踏入設計坑之後,又邁入前端坑,目前是一個前端...
遇到問題 在使用 Element UI 的 Select 想要在多選的時候有全選的功能 解決方法 這裡我在我自己的 communitys 加入一個全選...
遇到問題 在使用 Vue 的 watch 的時候,一般都是用這樣的 watch:{ text:{ handler(newValue){...
遇到問題 在使用 Select 的時候遇到了一個問題是如果我的 Value 想要讓它是 Object 該怎麼做呢?下面的程式碼看起來是可以運作也把 :valu...