iT邦幫忙

vue.js相關文章
共有 1664 則文章
鐵人賽 Vue.js DAY 1

技術 在 Vue 過氣前要學的第一件事 - 先了解自己

前言 今天是 9 月 1 號, 在這個特別的日子裡~為什麼特別呢, 因為今天是 友克鑫集合是我鐵人賽開賽的第一天啦! 話不多說直接開始身為一名前端工程師,對框架...

技術 電商專案vue2.0 + cil步驟筆記(一)

大型店商專案一些重點步驟(數據資料取自北京尚矽谷) (步驟和說明有很多省略 目前在複習精簡中 之後會詳細更新 先請見諒) 1開啟cmd 初始化 vue c...

鐵人賽 SideProject30 DAY 16

技術 Day16—Vue(十)生命週期

前言 今天將來初步了解生命週期的部分,並簡單介紹生命週期鉤子的名詞。 簡介 Vue 3 的生命周期是組件從創建到銷毀的整個過程,包含了一系列的生命週期鉤子:在...

鐵人賽 Vue.js DAY 30

技術 在 Vue 過氣前要學的第三十件事 - 我唯一知道的就是我一無所知

總結 直到今天就算是正式結束今年的鐵人賽了! 總集回顧 第一章基礎概念 在 Vue 過氣前要學的第一件事 - 先了解自己在 Vue 過氣前要學的第二件事 - V...

鐵人賽 Modern Web DAY 27
為你自己寫 Vue Component 系列 第 27

技術 [為你自己寫 Vue Component] AtomicRadio

Radio 是一種表單控制元件,通常用於使用者在一組選項中選取一個。在 UI 呈現上,通常顯示為圓形按鈕,當用戶選中時,按鈕會顯示填滿狀態,表示該選項已被選中...

鐵人賽 Modern Web DAY 7

技術 [Day 7]想不到有梗的標題LA(前端篇)

沒有想到連假結束後的第一天就要冨樫了...,我工作的公司在新加坡,而我在台灣full remote,我們中秋放連假而新加坡那邊沒放假,導致一開工就滿多事情要處理...

鐵人賽 Modern Web DAY 16

技術 [30天 Vue學好學滿 DAY16] slot 插槽

slot 在子元件(內層)中預留空間,由父元件(外層)設定、分配內容。子元件本身對slot無控制權子元件可對slot內容進行預設 Fallback Conten...

鐵人賽 自我挑戰組 DAY 16
vue.js 30天學習軌跡 系列 第 16

技術 Day16 vue.js - props(1)

Props是我們如何將數據從父組件傳遞到其任何子組件的方式。當我們使用Vue構建應用程序時,我們正在以分層方式進行。這是什麼意思?這意味著,從Vue實例開始,...

鐵人賽 JavaScript DAY 19

技術 Day 19: Vue - 組合式邏輯概念 (Vue composable concept)

昨天複習了工廠函式,今天來連結到Vue滿常見的設計模式-組合式邏輯(Composable)。 Composable 是一個相對通俗的概念,通常指的是可以在多個元...

鐵人賽 Modern Web DAY 21
欸你是要進 Vue 了沒? 系列 第 21

技術 欸你是要進 Vue 了沒? - Day21:Vue 列表渲染之 v-for 和它の關鍵小夥伴 key && 虛擬 DOM

哈囉搭家,在昨天我們講到了列表渲染的用法 v-for,今天會來認識 key 這個屬性、Vue 的渲染模式「虛擬 DOM」以及 v-for 搭配 method 的...

鐵人賽 Modern Web DAY 26
欸你是要進 Vue 了沒? 系列 第 26

技術 欸你是要進 Vue 了沒? - Day26:Vue 模板引用之使用 ref 直接操作 DOM 的小小法術

Hi 大家好,今天我們要來看的是「模板引用」的章節。還記得之前我們提到的 ref 嗎? ref 除了可以用來綁定響應式的狀態,它還能被使用在 <templ...

鐵人賽 JavaScript DAY 3

技術 【Day2】選課前建議先爬文—Vue框架特性&建立第一個Vue專案

Vue是一種漸進式的JavaScript框架,使用單文件組件的格式(SFC)將HTML、CSS及JS封裝在單一文件中讓程式模塊化,可以更靈活的運用。針對已存在或...

鐵人賽 自我挑戰組 DAY 15

技術 (第十五天)自我學習 - component Table 標籤使用

Table 標籤使用 component 在使用 Table 標籤的時候需要注意,因為普通使用標籤的時候可以直接的使用,但是 component 在使用的時候...

鐵人賽 影片教學 DAY 15
Nuxt 3 快速入門 系列 第 15

技術 [影片教學] Nuxt 3 資料獲取 (Data Fetching)

🔥【Vue.js → Nuxt 入門推薦!🌟 新書即將上市 🌟】📘《想要 SSR 嗎?就使用 Nuxt 吧!Nuxt 讓 Vue.js 更好處理 SEO 搜...

鐵人賽 自我挑戰組 DAY 15
vue.js 30天學習軌跡 系列 第 15

技術 Day15 vue.js - 組件(Components)必須使用function return

今天..學的如標題 組件(Components)必須使用function retur 在 vue 的應用程式中 data 可以是物件(object )或是 函...

鐵人賽 Modern Web DAY 28
為你自己寫 Vue Component 系列 第 28

技術 [為你自己寫 Vue Component] AtomicRating

Rating 元件讓使用者可以對某項目進行評分,通常以星星或其他符號來表示評分等級。Rating 元件的核心功能是提供一種直觀的方式,讓使用者針對產品、服務或...

鐵人賽 Vue.js DAY 5

技術 V05_在Vue之前_必備的JS基礎(2)_陣列Array的操作

V05_在Vue之前_必備的JS基礎(2)_陣列Array的操作 今天來了解一下JS的陣列的概念陣列Array, 物件Object在JS中,需要學會非常熟練的操...

鐵人賽 JavaScript DAY 30

技術 Day 30: 完賽 - Vue 的 30天自我學習旅程回顧

終於來到了終點線第30天了~有陪伴到這裡看完任何一篇的你們都很棒,感謝妳(你)們的耐心閱讀,今天可以不用聊嚴肅的話題(誤?),不過還是回顧一下過程中,那些比較特...

鐵人賽 Modern Web DAY 24

技術 Day 24. 事件處理 – v-on

v-on 在Vue.js 中我們可以使用v-on去監聽 DOM 事件,當事件被觸發時會呼叫我們設定的函數或是 JavaScript陳述式做對應的改變。 縮寫:...

鐵人賽 Modern Web DAY 10
為你自己寫 Vue Component 系列 第 10

技術 [為你自己寫 Vue Component] AtomicAccordion / AtomicCollapse

看這個元件的名稱不難發現,它的靈感來自手風琴(Accordion)這個樂器。在網頁裡面,Accordion 算是一個常見的設計。它是一個垂直堆疊的標題列表,當...

鐵人賽 Vue.js DAY 10
業主說給你30天學會Vue 系列 第 10

技術 V10_在vue之前_必備的CSS基礎(3)_SASS/SCSS控制

V10_在vue之前_必備的CSS基礎(3)_SASS/SCSS控制 今天來探索一下有關CSS的SASS/SCSS控制 首先看一下MDN的說明https://d...

鐵人賽 Modern Web DAY 15
欸你是要進 Vue 了沒? 系列 第 15

技術 欸你是要進 Vue 了沒? - Day15:Vue 你怎麼 DOM 起來了?乂稀奇古怪的 ref && reactive 解包合體技乂

記得我們在 ref 的篇章有講過「解包」嗎?官方文件在帶過 reactive 後,又細講了它倆解包的細節⋯⋯小菜菜在學習這邊的時候遇到了幾個蠻有趣的狀況坑,來跟...

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

技術 Day09-watch監聽資料

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

鐵人賽 Vue.js DAY 27
業主說給你30天學會Vue 系列 第 27

技術 V27_Vue的小專案_youtube點播機(1)

V27_Vue的小專案_youtube點播機(1) 在先前的發文中,對於Vue的學習已經有一些基礎,再最後的幾篇發文,想要來做一個小專案,youtube點播機...

鐵人賽 Modern Web DAY 17

技術 十七號坑,更新線上使用者列表-神奇的v-for

登入之後,要看到所有在線上的使用者,我們在前一篇server端有多發送一個uploadMember的事件 顯示線上使用者我們要做在sidebar上,可以隨時看到...

鐵人賽 Modern Web DAY 14

技術 [30天 Vue學好學滿 DAY14] prop & emit-1

組件中經過引用、連接,會產出樹狀關係圖,即為父元件與子元件的關係。-> 父子元件中不存在繼承關係,也互相獨立,無法直接進行互相修改。 官網示意圖 prop...

鐵人賽 Vue.js DAY 6
Vue3歡樂套件箱耶 系列 第 6

技術 開箱6:偵測螢幕寬度~useWindowSize範例應用

本篇開箱的是VueUse中的useWindowSize方法,簡單就能取得目前螢幕的寬高 介紹 VueUse 是一個基於Vue.js 的開源函式庫,主要是以...

技術 VueCli $Props簡單範例分享

從一張白紙開始學習前端,掐指一算也大概一年了但對於$Props的應用,一直無法深入理解可能礙於本身邏輯能力較差的關係,再加上網路的文章教程都是以下這種寫法 &...

鐵人賽 Modern Web DAY 16

技術 Day16 Vue.js 動效分類實戰 (8) 進度條特輯 - 超酷互動計時器+動態視覺化

讓你的計時器不再無聊!帶你實現進度條的互動視覺化 你是否曾經想過,讓時間不只是冷冰冰的數字,而是變成一個動態、直觀、充滿視覺衝擊的體驗? 今天,我們要用 V...

鐵人賽 JavaScript DAY 7

技術 Day 7: Vue的計算屬性-Computed

今天要來針對Vue computed 這個API做個簡單紀錄,實務上用法很簡單,官方文件也是簡潔說明,但還是會看到滿多違反原則(anti-pattern)的用法...