iT邦幫忙

vue相關文章
共有 351 則文章
鐵人賽 自我挑戰組 DAY 29
與Vue相遇 系列 第 29

技術 Day029-透過Vuex-實作簡易部落格-打包你的專案吧!

Vue:還記得第10天時,我們才剛認識Vue CLI,但你還記得我的介面嗎? 接著,我們試試看這個指令: npm run build 如此,產生的資料即打包...

鐵人賽 Modern Web DAY 28

技術 [VR 前後端交響曲Day28] Rails專案開發 - 刪除ticket (使用vuex狀態管理)

CRUD新增、刪除、修改、顯示功能是一個完整的線上系統不可或缺的功能。 昨天我們完成了更新 ticket,以及介紹了dispatch讓Vue可以聯絡到Vuex的...

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

技術 Vue slot: 具名插槽

tags: Vuejs 具名插槽 ✐ 若是需要多個插槽,可以在 <slot> 中使用 name attribute,定義命名的插槽,可以定義具有多個...

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

技術 Day028-透過Vuex-實作簡易部落格-修改文章

Vue:實做部落格最後一步驟,就是修改文章!上一篇已經了解如何將id生成,如此才可以做個別文章上的操作。原先,在Article頁面上,我們可以加上一個標示,讓文...

鐵人賽 Modern Web DAY 27

技術 [VR 前後端交響曲Day27] Rails專案開發 - 編輯ticket (使用vuex狀態管理)

前情提要: 前天我們完成了新增ticket,昨天也順便介紹了v-if語法; 今天就延續著前兩天的tempo~~,介紹以Vue.js實作CRUD裡的編輯功能! S...

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

技術 Vue slot:編譯作用域、後備內容

tags: Vuejs <slot> 是什麼? ✐ Vue 中的 <slot> 是 Vue 內置的組件 build-in compone...

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

技術 Day027-透過Vuex-實作簡易部落格-列舉及刪除文章

Vue:昨日,我們已將文章新增實做出來了!現在只要將文章列舉在首頁,只需要使用之前學到的v-for迴圈,即可完成! 透過 v-for,將vuex中state的...

鐵人賽 Modern Web DAY 26

技術 [Vue2Leaflet系列二] Leaflet Plugins with Vue

本篇文章請參考 [Vue2Leaflet系列一] 從vue-cli安裝到建置地圖 之前介紹過Leaflet Plugins的許多擴充功能, 那麼用vue開發的...

鐵人賽 Modern Web DAY 26

技術 [VR 前後端交響曲Day26] Rails專案開發 - 新增ticket(v-if語法介紹)

昨天鐵人賽做完了新增ticket!所以現在專案裡,Done欄位完成了三張票~ 不過,在繼續實作編輯及刪除ticket功能之前,昨天的完成品有個地方我還不太滿意...

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

技術 Vue 透過 `$listeners` 在子組件特定元素上監聽原生事件

tags: Vuejs 監聽子組件原生事件 ✐ 當父組件需要接收子組件訊息、數據時,可以透過在子組件 自定義事件 達成,除此之外若是需要監聽子組件 根元素 原生...

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

技術 Day026-透過Vuex-實作簡易部落格-新增文章

Vue:文章為本專案的共用資料。當許多頁面都需要用到時,這個時候使用Vuex就是最佳時機。下圖,可以看到,在其中一個元件下(Add-Article元件)新增文章...

鐵人賽 Modern Web DAY 25

技術 [VR 前後端交響曲Day25] Rails專案開發 - 新增ticket

盤點這一週的完成項目: 我們現在學會了: 把Rails專案裡會重複使用的部分改寫成Vue 元件(column, ticket) 使用Vue套件Vue drag...

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

技術 Day025-透過Vuex-實作簡易部落格

Vue:接下來透過幾天,我們將把之前學的router、Vuex等,實現在這個專案上面。 由上圖首頁,除了基本路由設定(首頁和文章),將會以組件方式生成文章列表...

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

技術 玩轉 Storybook: Day 24 MDX

MDX 若要更詳細的整理 Storybook 文件,可以使用 Markdown 語法搭配 JSX 的格式 - MDX。 有二種使用 MDX 方法 Story...

鐵人賽 Modern Web DAY 24

技術 [VR 前後端交響曲Day24] Rails專案開發 - Vuex狀態管理(2) mapState、mapGetters、mapActions、mapMutations

昨天鐵人賽我們kanban專案裡,把column改寫為Vuex狀態管理並透過beforeMount的方式從後端得到資料渲染在網頁上! 看起來好像前進了一大步,但...

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

技術 對 Vue component 傳入非 Prop 的 attribute

tags: Vuejs Vue component 可以傳入 prop attribute 以及 non-prop attribute 兩種 attribute...

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

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

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

鐵人賽 Modern Web DAY 23

技術 [VR 前後端交響曲Day23] Rails專案開發 - Vuex狀態管理 (1)

昨天我把一張自己開給自己的票:拖拉ticket解決了! 接著換下一張票、同時也就是今天的鐵人賽主題:改寫成Vuex來管理狀態~ 在鐵人賽第13天的時候曾經聊到...

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

技術 玩轉 Storybook: Day 23 DocsPage and Doc Blocks

DocsPage 介紹 Storybook Docs 是預設的 Addons,不需要做設定就可以使用。它可以整合元件裡的Stories、文字描述、程式註解、參數...

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

技術 Day023-Vuex 資料控管介紹(三)-Mutation與Actions資料運作

需要用的頁面上: import Action和 State進來 透過methods調用mapActions 透過computed調用mapState...

鐵人賽 Modern Web DAY 22

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

已經來到第22天了!剩下一週的時間我的專案就要部署(顯示為加緊趕工)~ 昨天的鐵人賽把column拖拉完成, 今天的需求:拖拉ticket,而且可以移動到不同的...

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

技術 玩轉 Storybook: Day 22 Construct a screen - Angular

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

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

鐵人賽 Modern Web DAY 21

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

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

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

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

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

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

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

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

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

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

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