iT邦幫忙

vue相關文章
共有 816 則文章
鐵人賽 自我挑戰組 DAY 21
每天來點 Vue.js 吧 系列 第 21

技術 Vue component 上該如何使用 v-model ?

tags: Vuejs v-model ✐ v-model 作用於表單元件上時,是 雙向數據綁定 的語法糖: <input v-model="n...

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

技術 [DAY09]跟 Vue.js 認識的30天 - Vue 的資料雙向綁定

在別人都完成30天鐵人賽的路上,我真的是太難了QQ,我才發現我一個禮拜的產量竟然只有1-2篇,在看文件的時候才發現自己之前練習 Vue 遇到的問題,真的是絕大部...

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

技術 Day024-Vuex 資料控管介紹(四)-Getters改變資料內容

Vue:資料改變,除了利用method或computed,還有getter。 Getter好處是當資料集中管理,部分組件或元件需要用到不同資料下,可提供相對應的...

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

技術 Day022-Vuex 資料控管介紹(二)-Sate資料內容

Vue:今日首先來了解一下Vuex中的State部分:State部分來說,相當於Vue的data,專門儲存資料。我們首先可以在這邊定義資料來源,將其為我們所需要...

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

技術 玩轉 Storybook: Day 21 Wire in data - Angular & ngxs

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

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

技術 Vue 自定義事件 - 拋出子組件數據

Props down, Event up ✐ Prop 是數據由父組件向子組件流動的 單向數據流,也就代表子組件無法透過 Prop 更改父組件的數據(注意,盡量...

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

技術 Day021-Vue 資料控管介紹(一)

Vue:前陣子,我們學到了組件資料的相互傳遞,包含父元件利用props傳遞資料給子元件、子元件利用$emit傳遞給父元件。然而,這些都是單向資料傳遞:對於單一請...

鐵人賽 Modern Web DAY 21

技術 [VR 前後端交響曲Day21] Rails專案開發 - Vue draggable套件拖拉column

隨著鐵人賽過了2/3來到尾聲,我們的Kanban開始有了雛形。 而今天實作的目的,是要讓Kanban裡的欄位可以拖拉,而且能將拖拉完的結果存入資料庫! 想到系...

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

技術 玩轉 Storybook: Day 20 Construct a screen - Vue

在前面的單元,我們已經完成了開發單一元件Task,也完成了複合元件 TaskList,也把 TaskList 拆分為容器型(TaskList.vue) 及 表現...

鐵人賽 自我挑戰組 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

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

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

鐵人賽 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...

鐵人賽 自我挑戰組 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的變化,當專案越來越大時,或是接近上線時期,修改元件的部分,有時會影響到整個專案。人工去檢視一定會有疏...

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 自我挑戰組 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() 發送給 Graph...

鐵人賽 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 中是一個重要的概念,照...

鐵人賽 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 16
與Vue相遇 系列 第 16

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

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

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

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

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