iT邦幫忙

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

技術 Vue 事件處理

v-on 要對模板中的元素添加 Event Listener,Vue 提供 v-on 指令可以針對 元素 綁定 Event Listener,並在事件發生時調用...

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

技術 Day013-Lifecycle-Vue實體生命週期-創建你的夢中情人

想起當初,第一次約她見面,是那麼輕鬆又好約。那一天,我開著我的車,直接到她公司樓下等。透過VS Code傳遞了訊息,而她的回應非常迅速。縱使之前沒見過我,我也...

鐵人賽 Modern Web DAY 12

技術 [VR 前後端交響曲Day12] 跨多層的Vue元件資料傳遞: event bus

這週都在討論props(從外層傳到內層元件)與emit(從內層傳到外層), 如果是平行關係的元件(而非父子關係),要如何進行資料傳遞呢? 這時候就會出動一台公車...

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

技術 玩轉 Storybook: Day 12 Composite component - Vue

接下來就來把Task元件組裝成TaskList吧 TaskList 可以把TaskList規劃成四種狀態 Default - 當 Task 都是 defu...

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

技術 Vue Conditional Rendering 條件渲染

tags: Vuejs v-if ✐ v-if 指令可以決定是否渲染元素,該元素只有在填入的 expression 為 truthy 時會渲染。 下方為簡單範...

鐵人賽 Microsoft Azure DAY 26
Azure 的自我修煉 系列 第 26

技術 Day26 Azure Container Registry (ACR)服務

Azure Container Registry 服務 Vue 專案 我們使用 Vue官方教學還實作一個前端網站。 Vue 可以使用CDN的方式在靜態網頁使用,...

鐵人賽 Software Development DAY 11

技術 [Day11] 瀏覽器開發工具 - 擴充功能篇

雖然開發者工具中已經提供相當豐富的功能,也一直持續發展中。不過 Google 有開放提供可裝在開發者工具的擴充功能的 API,像是目前大多主流的前端框架的開發者...

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

技術 Day012-Lifecycle-Vue實體生命週期-了解你的夢中情人

與Vue相遇後,一開始其實有點懷疑vue的應用。但使用後,對她越來越著迷,這使我更想了解她。 每當我們使用vue時,有些步驟都會相對應的重複,例如創建Vue、建...

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

技術 玩轉 Storybook: Day 11 Simple component - Vue

在這個單元我們使用官網的教學搭配Vue的框架,STEP BY STEP的撰寫Component及Stories。 Setup Vue Storybook 官網教...

鐵人賽 Modern Web DAY 11

技術 [VR 前後端交響曲Day11] Vue元件單向傳遞: $emit 製作todo list

經過昨天介紹$emit可以傳遞自訂的事件給父層元件之後,今天來利用$emit的特性,設計一個有3M便利貼風格的to-do list吧! 實作需求: 新增...

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

技術 Vue Class Bindings

tags: Vuejs 樣式渲染 畫面的呈現有時會因應資料的不同,產生不同的視覺樣式,而通常我們會使用 v-bind 指令動態渲染 HTML attribute...

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

技術 Day011-腳手架介紹

透過Vue CLI的建立,在我們打開專案後,主要會看到三個資料夾及一部分非資料夾區塊。 我們可以先從最主要的src資料夾來看: src資料夾為專案中最重要的...

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

技術 玩轉 Storybook: Day 10 Naming components and hierarchy

Naming components 修改一下Story檔案,對應於Component的Title名稱(default export區塊),就會發現Sidebar...

鐵人賽 Modern Web DAY 10

技術 [VR 前後端交響曲Day10] Vue元件裡由內而外的事件單向傳遞: $emit

元件間的資料傳遞可以說是Vue的大重點之一。 在第8天和第9天介紹了由外層父元件傳給子元件, 而今天要來說說如何把子元件由內到外進行「事件的單向傳遞」傳給父元件...

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

技術 Vue computed 與 watch 差異

Fixing ... 若是文中有任何錯誤、錯字、想討論的內容,歡迎各位大大不吝鞭笞指正、交流分享,筆者不慎感激 ✦ ✦ ✦ ▶︎ 筆者 github:http...

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

技術 Day010-Vue CLI

猶如昨日的期待,我很興奮地按照了Vue的指示: 先到node官網下載,下載完成後,立刻安裝 2.打開command line 並輸入npm install...

鐵人賽 Modern Web DAY 9

技術 [VR 前後端交響曲Day9] 由外到內:Vue元件裡的props屬性(2)

昨天提到props屬性可以將外層元件的資料,傳遞到內層元件。 舉的例子是傳入特定的author字串給News元件, 但是一般來說的網頁使用情境,不太可能會把資料...

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

技術 玩轉 Storybook: Day 09 Decorators

Decorators Decorator是一種設計模式,把要被裝飾的Story當做參數,傳入裝飾器中,Decorator可以幫Story加上額外的資訊,賦予給S...

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

技術 Vue computed 與 method 的差異比較

tags: Vuejs computed 與 method 的混淆 在模板中要對資料計算或是轉換時,computed 與 method 往往能替我們做到同樣的事...

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

技術 Day09-watch監聽資料

除了,computed和filter呢?如果資料改變,是否Vue能快速因應? Vue:哈!當然有的呀!我們來看看這個範例: Vue:我知道你對健身的熱愛!今天...

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

技術 [DAY07]跟 Vue.js 認識的30天 - Vue 的列表渲染

v-for 就是 JavaScript 裡的迴圈,基於一組資料來製作相同元素區塊。 先簡單講一下 JavaScript 裡 for...in 、 for...o...

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

技術 玩轉 Storybook: Day 08 Parameters

Parameter Parameter 是用來定義Stories的靜態metadata(解釋資料的資料),Parameter能提供給不同的addon去做設定。...

鐵人賽 Modern Web DAY 8

技術 [VR 前後端交響曲Day8] 由外到內:Vue元件裡的props屬性(1)

昨天鐵人賽提到了component元件是個堆積木的概念,讓我們可以更容易重複使用。結尾也提到了一個問題:在Vue裡面,不同的元件們該如何傳遞資料? 在我們設置...

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

技術 Vue computed property `getter` 與 `setter` 的那些事

Computed Property ✐ 在 computed 中設置的 property 稱為 Computed Property 計算屬性,Computed...

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

技術 Day08-利用Computed&Filter屬性

又到了與Vue見面的時候,昨日完成了toDoList後,還想知道Vue有什麼特別的~ Vue:相信你已經開始熟悉Vue的操作,聽你上次說,客戶對於數據上,有很長...

鐵人賽 Modern Web DAY 7

技術 [VR 前後端交響曲Day7] 在Rails專案內加上Vue元件

經過了三天的Vue簡單起手式,接著我們要回到Rails專案內實作了。(捲起袖子) 今天來了解一下元件的概念! 元件component:堆樂高積木的概念 在開發...

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

技術 玩轉 Storybook: Day 07 Write stories

Template & Args 同一個元件的多個story function,都會重複的指定相同的Template,可以拉出一個共用 template...

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

技術 Vue template 模板語法

tags: Vuejs Vue template ✐ 還記得前一章節 option 裡的 template 嗎?Vue 提供開發者透過 template 聲明式...

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

技術 [DAY06]跟 Vue.js 認識的30天 - Vue 的條件渲染

在 JS 中我們是利用 if(condition){statement1}else{statement2} 來設定條件並決定執行哪一段陳述式(statement...

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

技術 Day07-toDoLis實做

聽完Vue的介紹後,既然這麼好用,趕緊回到家,利用Vue來練習toDoList: 因為框架的原因,寫起來十分得心應手。在代辦事項及完成事項來說,只需要透過v-...