iT邦幫忙

vue相關文章
共有 351 則文章
鐵人賽 Modern Web DAY 6
玩轉 Storybook 系列 第 6

技術 玩轉 Storybook: Day 06 Component Story Format

Story檔案放置位置 Component對應的Story檔案,通常會放置在Component檔案旁邊。Story只會用於開發時期,在Production的bu...

鐵人賽 Modern Web DAY 6

技術 [VR 前後端交響曲Day6] Vue元件中的computed屬性

昨天我們討論了雙向事件處理: v-model 以及 v-on,讓我們可以跟使用者輸入的資料互動。 (例如對使用者的輸入的暱稱打招呼~) 如果要把使用者的輸入資料...

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

技術 Vue instance 生命週期 ✦

tags: Vuejs Instance Lifecycle 生命週期 ✐ 介紹完如何使用 new Vue({...}) 建構 Vue instance 後,接...

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

技術 玩轉 Storybook: Day 05 CLI Options

以下列出,啟動或是建置 Storybook 時,有哪些可以使用的 CLI Options。 start-storybook 啟動 Storybook Usage...

鐵人賽 Modern Web DAY 5

技術 [VR 前後端交響曲Day5] 單向資料綁定(v-bind)與雙向事件處理(v-on)

昨天討論了單向資料流的鬍子語法,可以讓我們把Vue實例裡的資料流向html (View)。 但如果要將資料綁定HTML標籤屬性的時候,該怎麼辦呢? 舉例而言,如...

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

技術 一切的基礎:Vue instance

tags: Vuejs Vue reactivity system ✐ Vue 引入 data-driven view 的概念,一旦改動 data,與之相對應的...

鐵人賽 Modern Web DAY 11

技術 Day11 有背過元素週期表,那有看過元件生命週期圖嗎?

元件的生命週期,Vue的官網很貼心,幫你準備好圖示,今天就帶大家來解釋一番。 不要在選項property或回調上使用箭頭函數,比如created: () =...

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

技術 玩轉 Storybook: Day 04 Configure

預設放置組態檔案的目錄 Storybook集中放置組態設定檔案的目錄預設是.storybook,若需要變更路徑及名稱,要在Storybook的CLI指令做設定。...

鐵人賽 Modern Web DAY 4

技術 [VR 前後端交響曲Day4] Vue的單向資料流: {{鬍子語法}}

昨天經過辛苦的環境安裝(擦汗),可以在Rails專案寫Vue了!先來個簡單的Vue起手式緩緩心情~ 在第2天,我們有提到,Vue.js 官網 這張MVVM架構的...

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

技術 工欲善其事,必先利其器 ⚙︎ Vue 開發環境建置

tags: Vuejs 如何開始使用 Vue ✐ Vue 一共提供三種不同的方式可供我們使用,依照使用情境的不同可以選擇不同的方式。 方法 適合場景...

鐵人賽 Modern Web DAY 10

技術 Day 10 你改我就變#像極了愛情,認識Computed

computed也是可以顧名思義知道它是針對資料做計算然後返回值,在了解computed之前我們先看看官網的說法 computed properties ar...

鐵人賽 Modern Web DAY 3

技術 [VR 前後端交響曲Day3] 在Rails專案產生Vue app

1. Rails專案起手式 在昨天的鐵人賽中,我們對於Rails的MVC架構和Vue.js的MVVC設計架構做些了解,對未來專案的前端、後端的檔案位置就比較能夠...

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

技術 玩轉 Storybook: Day 03 專案結構

前情提要 從開始安裝到完成,檢查專案目錄下變更的檔案結構,會發現Storybook的安裝做了以下的步驟。 安裝需要的相依套件 在Package.json加上建...

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

技術 Vue 原來是法語? Vue 的超簡短歷史介紹

tags: Vuejs TL;DR ✐ 要了解 Vue 的簡短歷史,筆者推薦可以自這部由 Honeypot 在 2020.02.24 發布的 Vue.js: T...

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

技術 Day03-v-bind屬性綁定

Vue:既然知道了初步的概念,首先我們來看看v-bind屬性綁定吧: v-vind綁定class,如下: <body> <div...

鐵人賽 Modern Web DAY 2

技術 [VR 前後端交響曲Day2] Rails 與 Vue 的架構介紹

Day 2 Rails 與 Vue 的架構介紹 現在大型商業購物網站、以及社群網站的規模開始增加,需要加入更多的商業邏輯和功能,為了讓網站工程師專業分工更容易,...

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

技術 玩轉 Storybook: Day 02 安裝

Install Storybook 安裝 Storybook 只需要在Terminal,切換到現有專案的根目錄後,簡單的執行一行指令 npx sb init...

鐵人賽 Modern Web DAY 5
全端成長之旅 系列 第 5

技術 Day.5 令人期待的 Vuejs 3

我第一個使用的 MVVP 框架是 Angular 還記得第一次使用 ng-model 的時候,真的是令人驚艷!! 後來忘記是什麼契機,看到了 Vuejs,試用過...

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

技術 前言

tags: Vuejs 前言 在開始之前,先簡單的自我介紹 ~ 筆者是名新手前端工程師,過往是平面設計師,目前學習前端約 1 年半的時間,本篇鐵人會集中在 Vu...

鐵人賽 Modern Web DAY 1

技術 [VR 前後端交響曲Day1] 開賽宣言:越來越火紅的Vue.js和Rails兩大框架

開賽宣言 聽說javascript快統治全世界了!(驚) 漸漸地、後端工程師也開始把javascript框架變成必須熟悉的標準配備! JavaScript +...

鐵人賽 Modern Web DAY 1

技術 [Day1] 建立 Vue 開發環境

1.安裝編譯器 VScode 安裝 官方下載 VScode 插件安裝 Chinese (Traditional) Language Pack f...

鐵人賽 Modern Web DAY 5

技術 Day05 自己的國家自己救-自己的v-model自己定義

v-model這個指令我們常用在資料的綁定上,希望我們所綁定的資料可以做到雙向(事件與屬性)綁定,這部分Vue允許我們客製化它,v-model默認會利用名為va...

鐵人賽 Modern Web DAY 4

技術 Day04 溝通很重要-元件註冊與父子元件溝通

第四天要帶大家聊解元件(有人說元件有人說是組件),首先來介紹元件的註冊 元件註冊全局註冊與局部註冊 1.元件全局註冊在Vue根實例( new Vue)之前,注意...

鐵人賽 Modern Web DAY 3

技術 Day03安裝的步驟選項,知其然,知其所以然嗎?

安裝CLI: $ npm i -g @vue/cli 安裝完成後,您將可以在命令介面(CLI)中訪問vue命令。我們將使用它來創建我們的專案。 創立一個Vue...

鐵人賽 Modern Web DAY 2

技術 Day02安安你好,請問你有聽過SOLID嗎?

前一天我們有提到SOLID,我們今天就來談談為啥我們需要了解SOLID? 他能幫助我們甚麼? SOLID是一種設計原則,主要是透過觀念讓團隊降機Code Rev...

鐵人賽 Modern Web DAY 9

技術 【D9 - Vue的雙下巴】Vue模板語法 -- {{Mustache}}

首先我們要先了解甚麼是模板語法? 而甚麼是模板? 模板 模板其實跟render function 是一樣的運作模式的~ 我們會將模板編譯成為render fun...

鐵人賽 Modern Web DAY 1

技術 Day01開賽總需要來個開場白

開場白不免俗的要來個開場白,大家好我是Vince,可以叫我阿電,在前端開發約4年,技術棧有VueJS、AngularJS、Angular,最近開始接觸React...

鐵人賽 Modern Web DAY 6

技術 【D6 - 三國鼎立時代】三大前端時代 -- 為何我選擇了Vue?

Agular: 我爸 Google 啦~ React: 我爸 Facebook 啦~ Vue: 我爸.... 前言 各位今天我廢話少一點直接上表格~...

技術 [鼠年全馬] W31 - Vue出一個旅館預約平台(5)

iT邦鐵人開賽囉~ 但我還沒做好開始的準備xD 我的題目是: 30天Vue出Google SSO 有興趣的人可以去訂閱~ 希望回饋一些技術上的建議更好xD 精益...

技術 [鼠年全馬] W30 - Vue出一個旅館預約平台(4)

有朋友問我為什麼我的進度這麼緩慢... 殊不知,我每天都只有一個小時可以做額外自主練習阿QQ 這週接續著做Rooms資料處理的部分囉~ 立馬開始!! #Ste...