iT邦幫忙

vue3相關文章
共有 411 則文章
鐵人賽 Modern Web DAY 7

技術 [Day07] Vue i18n - Datetime Formatting

在本地化 (localize) 專案時,我們可能會遇到需要處理日期時間顯示的問題,因為日期時間的顯示方式可能會因為每個國家而有所不同,例如: <p>...

鐵人賽 Modern Web DAY 6

技術 [Day06] Vue i18n - Number Formatting (Currency 貨幣)

在本地化 (localize) 專案時,我們可能會遇到需要處理金錢、價錢等貨幣的問題,在顯示價錢時我們會需要依據當前的語系顯示相對應的貨幣符號 ,例如: &lt...

鐵人賽 Modern Web DAY 5

技術 [Day05] Vue i18n - Component Interpolation

在本地化 (localize) 文字訊息時,我們可能會遇到需要特別處理 HTML tag的情況,什麼意思呢?我們來看一下上圖紅框中的句子的 HTML 結構。...

鐵人賽 Modern Web DAY 4

技術 [Day04] Vue i18n - Pluralization

在本地化 (localize) 文字訊息時,我們可能會遇到某些語言會有複數型態的狀況 (最常見的就是英文),雖然我們可以透過個別定義 key value 的方式...

鐵人賽 Modern Web DAY 3

技術 [Day03] Vue i18n - Message Format Syntax

紅框中的句子 Welcome to Your Vue.js App 如果我們想要將其中的 Vue.js 變成隨時可以替換時該怎麼辦? 上一篇我們介紹的基礎用法...

鐵人賽 Modern Web DAY 2

技術 [Day02] Vue i18n - 導入 & 基礎用法

i18n 全寫為 internationalization,俗稱的多國語系也常被稱之為本地化 (Localization)。 隨著現在網路的發達和資訊的流通...

鐵人賽 Modern Web DAY 1

技術 [Day01] 前言:常見的前端實戰技能有哪些?

Credit: https://lilly021.com/angular-vs-react-vs-vue-js/ 身為一個前端工程師,除了框架 (Vue, R...

鐵人賽 Modern Web DAY 1

技術 Day_01: 讓 Vite 來開啟你的Vue 前言

Hi Da Gei Ho~ 初次見面,我是Winnie~ 我是一位剛轉職六個月的菜鳥前端(前身是網頁設計師),如果對於我的轉職的過程有一絲好奇的朋友的可以看看...

鐵人賽 自我挑戰組 DAY 30

技術 vue3 Composition API 學習手冊-30 實戰API練習

前面文章提到許多前、後端分離的開發方式,也模擬過很多次資料來自於外部(json)的開發,今天跟大家介紹一個網站,能讓我們真正模擬網頁資料來自於後端工程師所提供A...

鐵人賽 自我挑戰組 DAY 28

技術 vue3 Composition API 學習手冊-28 打包與回顧

vue3 Composition API的文章寫到這邊,歷經了: 基礎介紹篇(v-for、v-on、v-bind...等等) 安裝vue-cli與基礎介紹 認...

鐵人賽 自我挑戰組 DAY 27

技術 vue3 Composition API 學習手冊-27 以前叫mixin的東西

前幾篇文章已經介紹過vue的元件化設計的特色,不僅僅是頁面中的小元件,我們甚至可以將整個頁面都做成一個元件,今天來分享的是除了元件能共用之外,連函數也可以共用,...

鐵人賽 自我挑戰組 DAY 26

技術 vue3 Composition API 學習手冊-26 Dynamic Route

延續上一篇文章,今天來介紹動態路由,在瀏覽網頁的時候如果大家有注意,許多網頁在瀏覽上都會經由網址上傳遞參數後來決定頁面內顯示的內容,例如: 雖然頁面中顯示的...

鐵人賽 自我挑戰組 DAY 25

技術 vue3 Composition API 學習手冊-25 vue-router 4.x 基礎介紹

在傳統網頁開發中,我們常常會繪製一個類似下方的網頁架構圖,有些接案的朋友還會依照頁面數量跟業主來收取費用,因為過去的網頁開發,通常是一頁一頁製作的,許多重複性的...

鐵人賽 自我挑戰組 DAY 24

技術 vue3 Composition API 學習手冊-24 單文件元件設計

之前在「vue.js 3.x 學習手冊 (19) 組件的綜合練習」文章中有提到,如果需要跨文件取用元件的話,需先了解webpack和vue-cli的使用,而前幾...

鐵人賽 自我挑戰組 DAY 23

技術 vue3 Composition API 學習手冊-23 安裝scss編譯器

當我們透過vue-cli來建置專案後,因為預設也會幫我們安裝好webpack打包工具,所以我們可以開始使用scss來撰寫我們的樣式檔,這會讓管理上變得比較方便,...

鐵人賽 自我挑戰組 DAY 22

技術 vue3 Composition API 學習手冊-22 vue cli 起手式

我們已經在上一篇文章透過vue建立好了專案,也利用VS Code將專案資料夾準備妥當,接下來一樣由淺入深的來介紹一下網頁的開發,回憶一下上次有介紹的專案資料夾結...

鐵人賽 自我挑戰組 DAY 21

技術 vue3 Composition API 學習手冊-21 透過 vue cli 來建立專案

建立專案 方法一. 透過終端機建立專案 上一篇文章我們已經介紹完如何安裝vue cli,接下來就要透過他來建立專案,進而體驗使用vue cli的優點,接下來我...

鐵人賽 自我挑戰組 DAY 20

技術 vue3 Composition API 學習手冊-20 vue cli 環境架設

像前面文章中提到vue是一套漸進式的框架,他適合在各種不同的需求中使用,無論你是只想用它來綁定一些表單資料或是使用他Virtual DOM特性,甚至更深入的使用...

鐵人賽 自我挑戰組 DAY 19

技術 vue3 Composition API 學習手冊-19 組件的綜合練習

Vue3 Composition API的文章寫到了Component的階段,想要來整理一下前面的進度,來製作一個綜合的案例,這個案例的規劃如下: 製作一個F...

鐵人賽 自我挑戰組 DAY 18

技術 vue3 Composition API 學習手冊-18 組件emit的用法

上一篇文章我們提到Components可以接收父層傳遞過來的參數進行處理,這次我們首先就來看看子層通知父層的方法。 利用上一篇文章的最後一個範例來進行說明,當時...

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

技術 Day.18 前端下一步

在前面幾天中我邊對照 Vue2 與 Vue3 的文件邊跟大家分享,希望有幫助到大家。 另外,前幾天也很巧地碰到了 Vue3 的第一個 release v3.0....

鐵人賽 自我挑戰組 DAY 17

技術 vue3 Composition API 學習手冊-17 組件的資料和函數

呈上一篇組件設計的文章,今天來介紹組件資料和方法的應用,在使用組件的時候,各個子層可以有獨立的data與methods不會互相干擾,不過需要注意使用的方式: &...

鐵人賽 自我挑戰組 DAY 16

技術 vue3 Composition API 學習手冊-16 組件設計入門

如同「vue.js 學習手冊 框架的選擇與導入」這篇文章中提到的,我們使用框架能更方便地進行前後端分離式的開發;享受Virturl DOM提升頁面效能外;另外還...

鐵人賽 自我挑戰組 DAY 15

技術 vue3 Composition API 學習手冊-15 安裝Chrome擴充功能

在繼續未來的課程前,先跟大家介紹一個我們常用的Chrome Extension:「Vue.js devtools 」(免費的喔!),我們可以在瀏覽器透過他來監控...

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

技術 Day.16 Vue3 介紹 Part 11

今天介紹前面幾天一直在文中默默出現的 setup 方法 This 當 setup 被 Vue 執行時,元件還沒有被 new 出來,所以在 setup 方法裡不能...

鐵人賽 自我挑戰組 DAY 14

技術 vue3 Composition API 學習手冊-14 透過axios載入外部json

在前面“多層次動態選單”的文章中,我們把選單資料放在Javascript中進行描述,可以發現整支Javascript中邏輯運算的部分極少,大多都是描述頁面資料的...

鐵人賽 自我挑戰組 DAY 13

技術 vue3 Composition API 學習手冊-13 生命週期

前一篇文章,介紹到我們如何用已經學習到的進度製作一個連動的選單,其實大家應該不難發現在Javascript的程式中,實際上邏輯運算相關的程式碼並不多,反而是描述...

鐵人賽 自我挑戰組 DAY 12

技術 vue3 Composition API 學習手冊-12 實作 多層次動態選單

在經歷了前幾篇文章的分享後,這篇文章想要整合一下前面所提到的進度,來製作一個整合性的範例,幫助大家停下腳步想想,除了每個項目分別的作用之外,有沒有什麼事可以透過...

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

技術 Day.17 Vue3 介紹 Part 12

今天介紹 Vue 3 的 Provide/Inject Provide provide 最常用的 3個用法: import { provide, ref, re...

鐵人賽 自我挑戰組 DAY 11

技術 vue3 Composition API 學習手冊-11 監聽器

上一篇文章中介紹到了Vue.js裡面的計算屬性(Computed),也比較了Computed與Methods之間的差異,今天再來介紹一個跟他們也有幾許類似的監聽...