iT邦幫忙

vue.js相關文章
共有 1664 則文章
鐵人賽 Modern Web DAY 1
30天學會Vue.js 系列 第 1

達標好文 技術 Day 0-1 動機介紹&Vue.js初探

前言 大家好,我是DC,機械系學生自學網頁程式設計,過去前端和後端都接觸過,後端寫過Node.js、PHP、ROR、Django,前端只用過Bootstrap之...

達標好文 技術 [筆記][Vue.js]打開Vue.js世界的大門(1)-第一次接觸及認識基本用法

其實這次標題有點騙人,因為對小弟來說也不算第一次接觸了,但也只是前幾天讀過官方文件的等級而已,所以如果有些地方解釋的不對,還請各位大大留言告訴我了,在此小弟感激...

鐵人賽 Modern Web DAY 1

達標好文 技術 01. Nuxt.js 小跑起步

前言 寫文是為了將最近用 Vue.js + Nuxt.js 的使用細節整理,供日後參考。順序也許跟官網不太一樣,請多多包涵。 官方範例其實已涵蓋的大量情境,若是...

鐵人賽 自我挑戰組 DAY 16
前端新手筆記-Vue.js 系列 第 16

技術 Day16 Vue Component(元件) props、emit介紹

本文同步發表於Andy's Blog 前言 昨天認識了Component特性後,我們今天要來介紹Component之間如何傳遞資料 元件溝通方式 元件與元件...

鐵人賽 Modern Web DAY 13

達標好文 技術 不只懂 Vue 語法:如何透過路由實現跨頁面傳遞資料?

問題回答 在跳轉頁面時,可以透過路由物件裏 params 或 query 來傳遞資料,也可以使用各種不同模式的 Route props 來傳遞資料。前者需要依賴...

技術 [筆記][Vue.js]打開Vue.js世界的大門(4)-讓v-model雙向綁定抓住你的資料

HI!記得我們在第一篇的時候有提過如何將Vue.js的資料綁定到View上面嗎?如果忘記的話可以看一下以下最簡單的範例:HTML <input id=&q...

鐵人賽 Modern Web DAY 4

技術 真的好想離開 Vue 3 新手村 - Day 4: 從 npm run build (vite build) 簡單認識打包

誰適合看這篇 不知道 npm run dev、npm run build、npm run preview 的用處 不知道「打包」做了哪些事?為什麼前端需要打包...

技術 Vue.js - 使用 ESLint + Prettier 整理程式碼

在多人開發的時常常大家寫 Code 的風格都不一樣,這時候可以透過輔助工具來統一每個人的風格,當然自己開發時也可以用,尤其是像我這種寫 Code 習慣很差的人X...

鐵人賽 Modern Web DAY 19
初探Vue.js 30天 系列 第 19

技術 [Day 19] Vue nextTick 處理完成後就換我!

nextTick介紹 nextTick()會在DOM已掛載、渲染完成後,執行nextTick()內的程式碼。 通常Vue.nextTick()是為了對DOM...

技術 [筆記][Vue.js]打開Vue.js世界的大門(6)-讓watch來當你的眼睛!

HI!大家好啊!緊接著computed之後,今天再來學習新的Vue.js的屬性watch吧! watch 這是什麼? 如果我們要在一個表單上的值發生改變的時候...

鐵人賽 Modern Web DAY 2

技術 [ Vue.js ] Why Vue.js? 我能不要用他嗎?

學習完 Vue 之後,想要透過單元測試守護你的專案,但又不知道從何起手?別擔心,快來訂閱作者最新系列文 《小白也能輕鬆瞭解的 Vue3 單元測試!》讓你的 V...

鐵人賽 Modern Web DAY 2

技術 [重構倒數第29天] - Vue2 Option API 轉換 Vue3 Composition API

前言 該系列是為了讓看過Vue官方文件或學過Vue但是卻不知道怎麼下手去重構現在有的網站而去規畫的系列文章,在這邊整理了許多我自己使用Vue重構很多網站的經驗...

鐵人賽 Modern Web DAY 20

技術 不只懂 Vue 語法:試解釋 computed、watch 與 methods 的差異?

問題回答 簡短答法:computed 最大特點是必須回傳一個值,並且會把它緩存起來,當函式裏的依賴改變時,才會重新執行和求值。但 watch 與 methods...

鐵人賽 Modern Web DAY 6
用範例理解 Vue.js 系列 第 6

技術 用範例理解 Vue.js #6:Computed vs Methods

接下來的幾天會分別介紹四個屬性,並互相比較倆倆之間差異和使用時機。 computed methods filters watch Computed 如果在...

鐵人賽 Modern Web DAY 15
Nuxt 3 學習筆記 系列 第 15

技術 [Day 15] Nuxt 3 資料獲取 (Data Fetching)

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

鐵人賽 Modern Web DAY 17

達標好文 技術 17. [FE] 為什麼現在的前端都在用「框架」?

現在打開任何一間求職網站,搜尋前端相關職缺,幾乎每間公司的職缺都會在求職條件或加分項目中提到目前的三大框架:React、Vue、Angular;或著也可以到...

鐵人賽 Modern Web DAY 8

技術 不只懂 Vue 語法:請說明 style 裏的 scoped、deep selector 的作用?

問題回答 scoped 屬性的作用是避免父元件的 CSS 樣式會污染到子元件的 CSS 樣式。Deep selector 的作用是相反,即使在父元件設定了 sc...

鐵人賽 Modern Web DAY 17
Vue.js 30天隨身包 系列 第 17

技術 Day17 - [Components] 元件組合與溝通

雖然每個元件是獨立運作,但Vue設計元件的目的是為了讓每個元件都有各自的用途,然後再互相配合使用,如此一來,系統開發上也比較結構化。 比較常見的組合元件為父子元...

鐵人賽 Modern Web DAY 18

技術 不只懂 Vue 語法:什麼是 slot?請示範 slot 的用法?

問題回答 slot(插槽)的概念是把外層的內容塞進子元件的指定位置裏。跟插槽的字面意思一樣,前提是:有插口才能插。子元件需要開一個插口(slot),才可以在外層...

Vuex 學習筆記 系列 第 19

技術 [Vue.js] Vuex 學習筆記 (19) - 實用插件 plugin

Plugin 前面有稍微提到如何使用 plugin ,不過我們有時候並不需要自己來建輪子, GitHub 上已經有很多人開發中出方便實用的工具,我們可以善加利用...

鐵人賽 Modern Web DAY 24
菜菜菜的 Vue 30天 系列 第 24

技術 vue-router(常用用法)

菜菜菜的 Vue 30天 - Day24 好咧~昨天介紹了 vue-cli 在專案初始時對 vue-router 的配置。 接下來要介紹更深入的用法。 路由切換...

鐵人賽 Modern Web DAY 7
Nuxt 3 學習筆記 系列 第 7

技術 [Day 07] Nuxt 3 頁面 (Pages) 與路由 (Routing)

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

鐵人賽 Modern Web DAY 7

技術 [ Vue.js ] 生命週期 lifecycle

學習完 Vue 之後,想要透過單元測試守護你的專案,但又不知道從何起手?別擔心,快來訂閱作者最新系列文 《小白也能輕鬆瞭解的 Vue3 單元測試!》讓你的 V...

鐵人賽 Modern Web DAY 3

技術 03. Nuxt.js 怎麼處理 SSR 問題?擔任什麼角色?

關於 Universal Rendering 前一篇提到,原本前後端的 View 各自分開隨著前端漸漸吃重,為了讓畫面邏輯不需要分散各處,有人提出新的架構 -...

鐵人賽 Modern Web DAY 30
Vue.js套件介紹及範例 系列 第 30

技術 vue-loading-overlay

vue-loading-overlay 載入中(Loading)遮罩套件,可以全螢幕或在指定的Element中顯示 Github ankurk91/vue-...

鐵人賽 Modern Web DAY 30
Vue.js 30天隨身包 系列 第 30

技術 Day30 - [最終章] 回顧這一個月來的Vue.js

很快地今天是鐵人賽的第30天,還記得一個月前,我對於Vue.js完全就是一張白紙的狀態,什麼都不太了解的狀態下,鼓起勇氣跟著30天熱度的夥伴一起參加這個比賽,雖...

鐵人賽 Modern Web DAY 11

達標好文 技術 真的好想離開 Vue 3 新手村 - Day 11: 從原生 JS 理解 Vue 3 響應式基礎 - reactive & ref (下)

Outline 上集回顧 reactive() 特性與限制 什麼情況會失去響應性 ref() 特性與限制 什麼情況會失去響應性 兩個比一比...

鐵人賽 Modern Web DAY 3

技術 [ Vue.js ] 環境建置

學習完 Vue 之後,想要透過單元測試守護你的專案,但又不知道從何起手?別擔心,快來訂閱作者最新系列文 《小白也能輕鬆瞭解的 Vue3 單元測試!》讓你的 V...

鐵人賽 Modern Web DAY 4

技術 04. Nuxt 環境建立

這篇寫常用情境 產生新 Nuxt 專案 Vue.js SPA 寫一半,得追加 SSR 產生完整 Nuxt 專案 入門寫 Vue.js,新專案用 Vue-cl...

鐵人賽 Modern Web DAY 14
Nuxt 3 學習筆記 系列 第 14

技術 [Day 14] Nuxt 3 Server API 與 Nitro Engine

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