iT邦幫忙

vue相關文章
共有 351 則文章
鐵人賽 Modern Web DAY 20

技術 [VR 前後端交響曲Day20] Rails專案開發 - 建立Vue元件: Ticket component

昨天的鐵人賽我們終於開始真正把手上在開發的系統變成,Vue.js x Rails專案了,可喜可賀! 今天,我想開給自己兩張票ticket,包括明後兩天要製作的t...

鐵人賽 自我挑戰組 DAY 19
每天來點 Vue.js 吧 系列 第 19

技術 How to find your passion as a Software Developer - Evan You

tags: Vuejs How to find your passion as a Software Developer ✐ 在連假的最後一天,一樣來一些輕鬆的...

鐵人賽 Modern Web DAY 20
NestJs 讀書筆記 系列 第 20

技術 VueJs - VueApollo Store

VueApollo Store 我想對 Vue 熟悉的讀者,在做前端緩存時大多數都是使用 Vuex ,不過當我們使用 Vue Apollo 時,它有自己的暫存區...

鐵人賽 Modern Web DAY 19
玩轉 Storybook 系列 第 19

技術 玩轉 Storybook: Day 19 Wire in data - Vue & Vuex

Container and Presentational 官網的程式碼架構,會把元件分成二種類型-容器型(Container)及表現型(Presentation...

鐵人賽 Modern Web DAY 19

技術 [VR 前後端交響曲Day19] Rails專案開發 - 建立Vue元件: Column component

在昨天的鐵人賽,我們利用rails的scaffold指令,迅速地將看板Kanban的CRUD調整成符合專案適合的樣貌,並完成了使用者登入後頁面,列出了目前筆者在...

鐵人賽 自我挑戰組 DAY 19
與Vue相遇 系列 第 19

技術 Day019-Vue Router介紹(三)巢狀路由:

Vue:昨日講述了基本的Route設定後,今天我們再來看看巢狀路由吧! 對於頁面上的切換,是很容易透過Route做到的。但有沒有可能,會需要將頁面某一部分,作...

鐵人賽 自我挑戰組 DAY 18
每天來點 Vue.js 吧 系列 第 18

技術 Seeking the Balance in Framework Design

tags: Vuejs Seeking the Balance in Framework Design ✐ 在中秋連假倒數兩天的今天,作為放鬆,來分享之前看的...

鐵人賽 Modern Web DAY 18
玩轉 Storybook 系列 第 18

技術 玩轉 Storybook: Day 18 Automated Visual Testing

視覺回溯測試 做視覺回溯測試的目的是要檢查每次修改元件UI的變化,當專案越來越大時,或是接近上線時期,修改元件的部分,有時會影響到整個專案。人工去檢視一定會有疏...

鐵人賽 自我挑戰組 DAY 17
每天來點 Vue.js 吧 系列 第 17

技術 Vue component 父組件向子組件傳遞數據的方法 - Prop(下)

tags: Vuejs 前言 ✐ 上一篇中說明了透過 Prop,我們可以將父組件的值傳遞給子組件,這一篇中,我們會來看 Prop 的使用細節。 命名規則 ✐ 在...

鐵人賽 自我挑戰組 DAY 18
與Vue相遇 系列 第 18

技術 Day018-Vue Router介紹(二)路由設定

Vue:設定基本路由,可以拆解成以下步驟: 定義模板 template 配置模板路線(routes)(每一條路線,都會對應到相應的component;而這邊的...

鐵人賽 Modern Web DAY 17
玩轉 Storybook 系列 第 17

技術 玩轉 Storybook: Day 17 Unit Test with JEST

用 Storybook 搭配測試方法,從元件開發到完成整個專案,可以增加開發者的信心,不會擔心改A錯B的狀況發生,因為從邏輯面及UI面都能被完整的測試到。 單元...

鐵人賽 自我挑戰組 DAY 16
每天來點 Vue.js 吧 系列 第 16

技術 Vue component 父組件向子組件傳遞數據的方法 - Prop(上)

tags: Vuejs 組件間的傳遞數據的方法 ✐ 在 Vue 之中,組件之間的數據並不共用,換句話說,組件之間若是需要傳遞數據,需要透過幾種方式進行: 以下列...

鐵人賽 自我挑戰組 DAY 17
與Vue相遇 系列 第 17

技術 Day017-Vue Router介紹(一)基本介紹

Vue:還記得在Vue CLI建置專案時候,也有遇上Vue Router嗎? 無論你是使用history mode或hash mode,設置路由,將可以導入...

鐵人賽 Modern Web DAY 17
NestJs 讀書筆記 系列 第 17

技術 VueJs - Vue Apollo Mutations

Vue Apollo Mutations 當我們要改變後端資料時,就要使用 Mutation 使用 this.$apollo.mutate() 發送給 Grap...

鐵人賽 Modern Web DAY 16
玩轉 Storybook 系列 第 16

技術 玩轉 Storybook: Day 16 Addons - Viewport/Accessibility

Viewport https://storybook.js.org/docs/vue/essentials/viewport Viewport 也是預設安裝好的...

鐵人賽 自我挑戰組 DAY 15
每天來點 Vue.js 吧 系列 第 15

技術 Vue components 組件的抽象概念 ✏︎

tags: Vuejs 組件的抽象概念 ✐ 註:下方 component 和 組件 一詞意思相同。 component 在 Vue 中是一個重要的概念,照...

鐵人賽 自我挑戰組 DAY 16
與Vue相遇 系列 第 16

技術 Day016-Component組件-傳值(props和$emit)

Vue:我們透過組件,來模塊化我們的功能。我知道你很好奇,到底如何從根模塊,傳值給組件,使組件可以渲染資料於table中,對吧?如果,仔細觀察昨天的程式碼,你會...

鐵人賽 Modern Web DAY 15
玩轉 Storybook 系列 第 15

技術 玩轉 Storybook: Day 15 Addons - Controls

Controls Addon 提供 Storybook 一個視覺化動態設定元件參數的方式,這樣就不需要寫程式重啟,也能發現元件的變化。 要使用 Control...

鐵人賽 Modern Web DAY 15

技術 [VR 前後端交響曲Day15] Vue instance的lifecycle hook: mounted()

昨天在理解Vue的生命週期時提到,Vue在前端處理上有一個透過掛載mounting的hook處理畫面渲染至瀏覽器前的階段。所以我們今天試著在Rails App裡...

鐵人賽 自我挑戰組 DAY 14
每天來點 Vue.js 吧 系列 第 14

技術 Vue 雙向數據綁定的語法糖 v-model ✔︎

很久以前做的 form 練習 使用表單元件 <textarea>、<input>、<select> 時,通常需要用戶的...

鐵人賽 自我挑戰組 DAY 15
與Vue相遇 系列 第 15

技術 Day015-Component組件-基本帳務系統實例

Vue:對於昨天全局與局部的基本了解後,今天我們利用一個實例,來解一下組件的好處吧~ 首先,先看一個基本的網頁結構: 一般來說,網頁中一定會有共用的部分。以上...

鐵人賽 Modern Web DAY 15
NestJs 讀書筆記 系列 第 15

技術 VueJs - 與後端 NestJs 對接

目標: 成功獲取後端資料,將資料呈現在 UI 上 在上上一篇章中,我們已經將 Vue Apollo 整合到 Vue 專案中 這次會帶著讀者透過 API 接...

鐵人賽 Modern Web DAY 14
玩轉 Storybook 系列 第 14

技術 玩轉 Storybook: Day 14 Addons - Essential / Actions

Storybook的另一個主要的功能就是Addons 在使用Storybook做元件開發設計時搭配Addon功能更加強大 接下來就來好好體驗感受他的威力吧 寫在...

鐵人賽 Modern Web DAY 14

技術 [VR 前後端交響曲Day14] Vue instance的生命週期

在第12天鐵人賽前在利用event bus傳情書給某個元件的時候, 可能眼尖的客倌會注意到,疑? 這個created()是不是還沒介紹到呢? created()...

鐵人賽 自我挑戰組 DAY 13
每天來點 Vue.js 吧 系列 第 13

技術 v-for 列表渲染

tags: Vuejs v-for ✐ v-for 指令可以使我們方便的渲染 Array 成為列表,在渲染列表相關的 data 時十分方便,並且 v-for 除...

鐵人賽 自我挑戰組 DAY 14
與Vue相遇 系列 第 14

技術 Day014-Component組件

Vue:隨著你使用vue的狀況,你更應該要了解元件模組化的概念。vue不但在資料上面有所規劃,他在元件模組化也有所強大,讓你可以輕鬆地管理好你的元件。在進行案例...

鐵人賽 自我挑戰組 DAY 4
跟 VueJS 認識的30天 系列 第 8

技術 [DAY08]跟 Vue.js 認識的3天 - Vue 的事件監聽

在 JS 中有監聽器 addeventListener ,而 Vue 也有自己一套 DOM 元素監聽器的指令 v-on , Vue 也配置了幾個修飾符來替代像是...

鐵人賽 Modern Web DAY 14
NestJs 讀書筆記 系列 第 14

技術 VueJs - 目錄結構

root ├── src │ ├── assets │ ├── components │ ├── graphql │ ├──...

鐵人賽 Modern Web DAY 13

技術 [VR 前後端交響曲Day13] Vuex狀態管理

昨天的鐵人賽文章有聊到event bus雖然方便,但是不容易偵錯及維護。 隨著專案變大、元件變得越來越多,元件間的架構越來越複雜,有時候會遇到多個元件需要共用同...

鐵人賽 Modern Web DAY 13
玩轉 Storybook 系列 第 13

技術 玩轉 Storybook: Day 13 Simple and Composite - Angular

在這個單元我們使用官網的教學搭配Angular的框架,STEP BY STEP的撰寫Component及Stories。(如果是使用Vue的讀者,可以跳過這個單...