iT邦幫忙

vue學習筆記相關文章
共有 375 則文章
鐵人賽 Vue.js DAY 14
Vue3歡樂套件箱耶 系列 第 14

技術 開箱14:前端圖片壓縮~Compressor.js範例應用

要使用圖片壓縮工具來處理網頁時,一種是打包後處理圖片,像是Webpack 插件image-webpack-loader ,另一種則是幫助您在瀏覽器中進行圖片壓縮...

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

技術 開箱13:圖片轉文字不專業版~Tesseract.js範例應用

本篇開箱Tesseract.js是能圖像中取得文字的工具 介紹 Tesseract.js 是一個 JavaScript 函式庫,它是基於 Google 的...

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

技術 開箱12:語音轉文字不專業版~SpeechRecognition範例應用

Web Speech API 可讓您將語音資料合併到 Web 應用程式中。分兩個功能:(Speech Synthesis)語音合成(文字轉語音)和(Speech...

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

技術 開箱10:自適應高度TextArea~resize-textarea-vue3範例應用

本篇介紹根據內容自動更新文字區域的高度的工具resize-textarea-vue3 <input>只能輸入單行,而<textarea&g...

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

技術 開箱9:輕鬆實現多行文本溢出顯示...~vue-ellipsis-3範例應用

本篇開箱的是vue-ellipsis-3,是一款簡單上手就能實現的文字縮略元件。 相信大家在網頁功能上一定會碰到這個需求,超過某個寬度時要出現...省略號(...

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

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

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

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

技術 開箱5:輕量視窗follow me~VueFinalModal範例應用

本篇開箱的是Vue Final Modal 4,簡單應用就能有modal視窗 ▲ 示意圖 介紹 Vue Final Modal 是一個輕量、無渲染、對行動裝...

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

技術 開箱4:超強輪播插件~Vue-Swiper範例應用

本篇開箱的是Swiper一個流行的、功能強大的插件庫,用於創建滑動式的輪播、幻燈片和相冊...等。 ▲ 示意圖 介紹 Swiper是一個電腦和手機端全螢幕滑...

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

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

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

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

技術 開箱2:最愛跟你拖拖拉拉了~vue.draggable範例應用

本篇開箱的是vue.draggable.next,是一款簡單上手vue3的拖曳插件也就是vue.draggable升級版本。 ▲ 官方典型範例示意圖 介紹...

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

技術 開箱1:Vue3套件歡樂箱耶_參賽前言

系列總回顧 https://ithelp.ithome.com.tw/articles/10339831 睽違兩年姐姐再度登場拉!看到很多前輩說每年都不想參...

鐵人賽 Vue.js DAY 12

技術 從入門到入土一條龍Vue.js Day12 - Mixins

什麼是Mixins? Mixins 是 Vue.js 中用來封裝重用的功能的一種方式。當你發現多個組件有共用的邏輯,但卻不適合使用組件繼承或其他方法時,可以使用...

鐵人賽 Vue.js DAY 11

技術 從入門到入土一條龍Vue.js Day11-Vuex狀態管理

什麼是Vuex? 當我們的應用越來越複雜,並且多個組件需要共享相同的狀態時,這時我們需要一個集中式的狀態管理。Vuex 就是為此而生,它為我們提供了一個集中管理...

鐵人賽 Vue.js DAY 10

技術 從入門到入土一條龍Vue.js Day10- Vue Router 的使用(二)

昨天說明了VueRouter基本的使用,今天要進階說明VueRouter的兩個功能,分別是路由守衛和路由懶加載。 路由守衛(Route Guards) 路由守衛...

鐵人賽 Vue.js DAY 9

技術 從入門到入土一條龍Vue.js Day09- Vue Router 的使用

Vue Router Vue Router 是官方的路由管理器,允許我們建立單頁應用(SPA)。隨著 Vue 應用不斷增長,我們需要的不只是基礎功能,還有如何管...

鐵人賽 Vue.js DAY 8

技術 從入門到入土一條龍Vue.js Day08- To Do List(實做)

template 輸入和添加 v-model綁定input的數據,裡面的字顯示新增待辦,也加上enter和按鈕觸發事件 待辦列表 v-for渲染我們的filte...

鐵人賽 Vue.js DAY 7

技術 從入門到入土一條龍Vue.js Day07- To Do List(構思)

待辦清單 待辦清單是每位工程師入門程式語言時都會碰到的經典專案。透過這個簡單卻具代表性的應用,可以很直觀地評估和鞏固一個人對於某種語言或框架的掌握程度。不僅如此...

鐵人賽 Vue.js DAY 6

技術 從入門到入土一條龍Vue.js Day06-指令進階用法(二)

v-for Vue 中的 v-for 指令允許我們基於數據渲染一個列表。上面的例子中,items 是一個包含三個物件的數組。v-for 會遍歷每個物件,並對每個...

鐵人賽 Vue.js DAY 5

技術 從入門到入土一條龍Vue.js Day05-指令進階用法(一)

Vue指令進階 在第三天我們說明了數據綁定的方法,分別是{{}}動態數據,v-bind屬性綁定和v-model表單數據綁定。除了前面的之外還有很多其他的指令,今...

鐵人賽 Vue.js DAY 4

技術 從入門到入土一條龍Vue.js Day04-基礎系列之Vue組件系統

什麼是組件? 在 Vue 中,組件可以被看作是一個可重用的 Vue 實例,帶有名稱。它們和常規的 Vue 實例很相似,只是它們用於定義可重用的代碼塊。組件是構建...

鐵人賽 Vue.js DAY 3

技術 從入門到入土一條龍Vue.js Day03-基礎系列之數據綁定

Vue.js基礎之數據綁定 數據綁定是Vue的核心功能之一,允許我們建立視圖(模板)與數據之間的關聯。當數據發生變化時,視圖會自動更新,反之亦然。 開新專案(步...

鐵人賽 Vue.js DAY 2

技術 從入門到入土一條龍Vue.js Day02-核心觀念介紹

重要說明-這是我個人了解之後白話文的解說 我們都知道Vue方便,那請問Vue方便在什麼地方?接下來假設我們要建立一個按鈕,按鈕按下去之後按鈕數字會增加。同樣的東...

技術 準備開始一些前端相關的技術文章

如標前端小白我打算開發分享一些目前為止所學的前端知識,順便透過分享知識來提高自己對於程式的記憶點, 對大家也是win win double win啦!這幾天會乘...

技術 Vue Cli 環境安裝

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

技術 Vue框架加上Bootstrap5 modal ?

在專案開始時遇到一個問題,就是關於Modal該如何關閉,如何開啟?當然可以用data-bs-target,data-bs-dismiss,但是會有相對的副作用,...

技術 如何將 Google Ad Manager 添加到 Nuxt.js ?

第一,將 Google Ad Manager 腳本添加到 head 標籤,加載GPT腳本: <!-- app.html --> <scrip...

技術 如何將 Google AdSense 添加到 Nuxt.js ?

第一步,將 Google AdSense 腳本添加到 head 標籤(app.html 文件內): <script async src=&quo...

技術 單元測試-概念

單元測試是甚麼 1.對程式碼做最小單位(每一個邏輯)的測試,確保程式的邏輯不會在維護的過程中出錯2.維護程式碼的品質。 為什麼要單元測試 1.確保在開發的時候不...

技術 【Vue】params vs. query | Vue Router

params - 命名的路由,加上参数讓路由建立 url 動態的參數前要加上冒號 ":" let router = new VueRoute...