iT邦幫忙

vue學習筆記相關文章
共有 406 則文章

技術 【Vue】幫元件加上樣式啦|修改 bootstrap 變數供全域樣式共用 失敗

將樣式區分為全域樣式/區域樣式 全域樣式:大多頁面都會共用到的樣式,reset & variable & maxin ...區域樣式:限制在單一...

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

技術 Day015-Component組件-基本帳務系統實例

Vue:對於昨天全局與局部的基本了解後,今天我們利用一個實例,來解一下組件的好處吧~ 首先,先看一個基本的網頁結構:一般來說,網頁中一定會有共用的部分。以上圖為...

鐵人賽 Modern Web DAY 29

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day29.Vue3 網頁小遊戲(一) | ♾ 台版魷魚遊戲,玩?還是不玩?

免責聲明:最近跟著中了"魷魚遊戲"的毒,哈哈哈這個遊戲,相信大多數的人都有玩過~不過,我們的遊戲沒有大筆獎金,也不需要打打殺殺 XD 所以...

鐵人賽 自我挑戰組 DAY 10

技術 Day10 一轉任務果然不是好吃的果子:將房間資料show到網頁畫面上(1)

本文同步發表於斜槓女紙部落格:Day10 將房間資料show到網頁畫面上(1) 承接昨天的進度,看到串接success的反饋訊息後,想說趁著這個運氣一口氣把...

鐵人賽 Modern Web DAY 27

技術 Day 27. 過濾器 - Filter

今天是三天連假的第一天,實體上課真的太累了,一不小心睡到下午诶嘿(๑´ڡ`๑)連假過完鐵人也差不多完成了!時間真的過的飛快啊,今天來講講vue的過濾器,雖然在這...

鐵人賽 自我挑戰組 DAY 13

技術 Day 13 : 元件 Components

全域註冊 昨天介紹了 Vue 中非常重要的元件,今天我們就來看看元件究竟要怎麼使用吧!首先來是全域註冊的方式,直接來看範例: <div id="...

鐵人賽 Modern Web DAY 24

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day24.Vue3 Options API & Composition API 介紹

在 Vue3 中我們可以使用 Options API 或是 Composition API 選擇一種方式來撰寫,下面來看看甚麼是 Options API ? 甚...

新手初探 Vue 系列 第 24

技術 鐵人賽Day25 - ES6 之箭頭函式

var callSomeone = function (someone) { return someone + '吃飯了' } 上面是我們一般傳統函式的寫...

新手初探 Vue 系列 第 22

技術 鐵人賽Day23 - ES6 之解構賦值

解構賦值的概念,有點像是把一份資料複製到另外一份,在以往我們要把陣列的值取出來,要透過宣告一個變數來放置,如下: let family = ['小明', '杰倫...

技術 Vue Cli 環境安裝

官方文件:https://cli.vuejs.org/#getting-started Install:先用npm安裝 npm install -g @vue/...

技術 【Vue】將元件輸出到畫面|專案實作

輸出完 header 元件後,試著在 App.vue 引入 TaiHeader.vue。App.vue* <template> <div i...

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

技術 Day030-與Vue相遇--鐵人賽回顧

回顧30天,也讓我回憶了今年從金融業被抓去做開發工程師的日子。這30天中,講述了Vue的基本介紹、性能比較,也依據Vue的特性, 實作出許多app。 當然,雖...

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

技術 Day028-透過Vuex-實作簡易部落格-修改文章

Vue:實做部落格最後一步驟,就是修改文章!上一篇已經了解如何將id生成,如此才可以做個別文章上的操作。原先,在Article頁面上,我們可以加上一個標示,讓文...

鐵人賽 自我挑戰組 DAY 9
新手初探 Vue 系列 第 9

技術 鐵人賽Day09 - 表單與資料雙向綁定

這篇要來介紹,基本常用的一些表單元素,與 Vue 的資料綁定時會如何做我們一樣先把 Vue 的架構寫出來,只是這次在 data 內新增多個變數來存放不同的表單元...

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

技術 開箱18:圖片/元件懶加載~vue3 + IntersectionObserver API範例應用

本篇要來介紹當使用者滑到該圖或該組件時,才載入圖或組件的應用 還記得我們在16篇以及17篇分別提到 圖片懶加載 IntersectionObserver...

技術 Vue 之溫習 component 的世界 - 2

元件內的內容並非固定,有時候我們會透過 Ajax 撈資料回來再渲染到頁面上,而通常我們撈回來的資料都會存放到 Vue 實體的 data 內,這時候元件想要讀取...

技術 Vue 在 Localhost 開發時出現 “[prerender-spa-plugin] Unable to prerender all routes!” 錯誤的解決方式

我在 Localhost 開發的時候會出現一個錯誤訊息困擾有許久,而且是機率性的。因為以 SPA(Single-Page Application) 開發專案項目...

鐵人賽 Modern Web DAY 27

技術 [30天 Vue學好學滿 DAY27] axios-mock-adapter-2

帶參數 mock mock_adapter.onGet("/todo-list", { params: { id: "1&quot...

鐵人賽 Modern Web DAY 22

技術 Day 22. 列表渲染 – v-for

昨天講了條件渲染,今天來講列表渲染(List Rendering)吧!! v-for 當我們在頁面上綁定資料時,遇到一些重複、複雜的data時(像是array、...

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

技術 開箱3:讓我來好好看看你~vue-easy-lightbox範例應用

本篇開箱的是vue-easy-lightbox,簡單應用就能有圖片預覽功能 ▲ 示意圖 介紹 基於Vue.js 3.0與TypeScript構建的圖片瀏覽(...

鐵人賽 自我挑戰組 DAY 17

技術 Day17 萬丈高樓平地起(5):元件間的溝通橋樑Props(2)

本文同步發表於斜槓女紙部落格:Day17 萬丈高樓平地起(5):元件間的溝通橋樑Props(2) 嗨!承接昨天的內容,今天要繼續和大家聊props的一些眉...

技術 Day36 - 實戰之引入 Bootstrap套件,客製化樣式

準備好之後,接下來我們要來引入 Bootstrap 套件了,參考 鐵人賽Day28 - Vue Cli 我們除了可以在 App.vue 的 style 引入 B...

鐵人賽 Modern Web DAY 14

技術 Day 14. 模板語法Template Syntax – 插值 Attribute、JavaScript 表達式

讓我們接續昨天的模板語法介紹吧,昨天講了v-once跟v-html,今天來說說屬性跟JavaScript 表達式! Attribute Mustache語法不能...

鐵人賽 自我挑戰組 DAY 16

技術 Day16 萬丈高樓平地起(4):元件間的溝通橋樑Props(1)

本文同步發表於斜槓女紙部落格:Day16 萬丈高樓平地起(4):元件間的溝通橋樑Props(1) 昨天說到Vue的每個元件是獨立運作,但Vue設計元件的目...

技術 Vue ⑅:要開始Vue之前要先做的事

JavaScript 學得差不多了,覺得應該可以開始 Vue 看看了但在 Vue 之前要先引入它 。 在引入它之前,還有幾個要下載的東西: Vue Devt...

鐵人賽 自我挑戰組 DAY 12

技術 Day 12 : 元件 Components 基礎介紹

元件 Components 基礎介紹 元件的概念在 Vue 中是非常重要的一個環節,Vue 應用程式都是從建立根實體開始,之後再一個一個元件搭建上去,而透過元件...

鐵人賽 自我挑戰組 DAY 11

技術 Day 11 一轉任務(二):將房間資料show到網頁畫面上(2)

本文同步發表於斜槓女紙部落格:一轉任務(二):將房間資料show到網頁畫面上(2) 昨天終於順利通過v-for和API串接這兩個小壞壞的考驗,接下來就是將...

鐵人賽 自我挑戰組 DAY 2
新手初探 Vue 系列 第 2

技術 鐵人賽Day02 - 在 Vue 建立應用程式

Vue 的引入跟 jQuery 一樣,這裡就不多贅述,版本一樣有壓縮版本跟開發人員版本。當引入好 Vue 之後,我們就可以先來建立第一個應用程式。 首先我們先在...

鐵人賽 自我挑戰組 DAY 14

技術 Day 14 : Props 特性,由外向內的資料傳遞

Props 特性,由外向內的資料傳遞 元件與元件之間的資料都是各個獨立的,所以才不會互相干擾,如果遇到需要由父層傳遞資料給子層的時候,我們可以使用 props,...

技術 如何取出陣列中重複/不重複的值

前幾天在群組剛好看到有人發問:有一組陣列:[1, 8, 2, 3, 4, 5, 4, 6, 2, 7]該如何取出不重複值讓陣列變成:[1, 8, 2, 3, 4...