iT邦幫忙

vue學習筆記相關文章
共有 333 則文章
鐵人賽 自我挑戰組 DAY 7

技術 Day7 切版任務(三):首頁畫面搭配ScrollReveal,網頁畫面動次動(2)

本文同步發表於斜槓女紙部落格:切版任務(三):首頁畫面搭配ScrollReveal,網頁畫面動次動(2) 嗨!又見面了,今天會持續將HTML標籤轉換成Vu...

鐵人賽 自我挑戰組 DAY 6

技術 Day 6 : 條件渲染

條件渲染 今天來介紹 v-if 和 v-show,並比較兩者之間的差異。 v-if 如果希望某些區塊在特定條件下才出現,就可以使用 v-if 、 v-else-...

鐵人賽 自我挑戰組 DAY 28

技術 Day 28 : Vuex

Vuex 接下來要來介紹的是 Vuex,在這我先附上官方文件。 什麼是 Vuex? Vuex 可以用來管理前端網站的資料狀態,以集中式的方式管理儲存所有元件的狀...

技術 CMoney軟體工程師戰鬥營_期末專題製作_Week 17

是時候來清這裡灰塵了這兩週實在是過得水深火熱接下來我會補齊這兩週事件17週多半是在刻畫面,後期開始接api18週就是大量的接api,跟補上還沒做的功能和畫面 老...

鐵人賽 自我挑戰組 DAY 15

技術 Day 15 : emit 向外層傳遞資訊

emit 向外層傳遞資訊 昨天我們提到了如何將資料由外層傳向內層,用 props 的方式可以將資料由外向內傳遞,那如果我們想要將內層的資料向外層傳遞時該怎麼做呢...

鐵人賽 自我挑戰組 DAY 24

技術 Day 24 : 同一路徑載入多個頁面元件

同一路徑載入多個頁面元件 現在我們已經能夠靠點擊連結來切換我們想要訪問的路徑,並且利用切換頁面元件的方式達到切換頁面的效果,是不是越來越有單頁式應用程式的感覺了...

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

技術 Day27 vue.js - 自定義指令 Custom Directive

自定義指令 Custom Directive 除了核心功能默認內置的指令集(v-model、v-if)之外,Vue還允許您註冊自己的自定義指令。那就是使用 V...

技術 【Vue】引用 bootstrap 5 不再依賴 JQuery |專案實作

npm 引用 bootstrap $ npm install bootstrap CDN 引用 bootstrap 不需要載入 JQuery 函式庫,減少載入...

新手初探 Vue 系列 第 26

技術 鐵人賽Day27 - 常用的陣列方法

前一篇有講到 .forEach() 和 .map(),所以這裡就不講這兩個部分,我們先有個基本的陣列資料: const people = [ { n...

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

網頁上難免有些內容,會需要差不多的架構,僅替換部分的內容,簡單來說,我們前面講到的元件拿來重複利用,只是我們要替換掉部分的內容,讓元件可以達到最佳的利用化,這時...

技術 Vue cli 使用

vue create 專案名稱 新增專案 Props(父 => 子)父畫面 <ProductCard :product=&quo...

技術 Vue 使用 errorHandler, warnHandler 即時攔截網頁錯誤

在前端其中一個頭痛的問題就是網頁 Bug,我會想知道使用者在前端操作上遇到了什麼問題,因此在 Vue 中,你可以透過 errorHandler 攔截網頁錯誤,你...

技術 CMoney軟體工程師戰鬥營_Vue框架_Week 15

歐拉~本週結束了分領域雖然每週都為了Web的演示以及龐大的作業量追著跑但是結束並沒有感到鬆一口氣因為接下來迎接我的就是。。。期末專題拉!真的同時被 學習前端技術...

鐵人賽 自我挑戰組 DAY 10

技術 Day 10 : Filter 過濾

Filter 過濾 今天來介紹過濾 filter,過濾顧名思義就是能夠將資料在顯示之前作前處理的方式,直接來看範例會比較清楚。 <div id=&quot...

技術 [筆記]vue-cli i18n 多語系應用練習

參考文章: https://medium.com/easons-murmuring/%E5%9C%A8-vue-cli-%E4%B8%AD%E4%BD%BF%E...

鐵人賽 自我挑戰組 DAY 30

技術 Day 30 : Vuex 計數器範例 - 2

Vuex 計數器範例 - 2 今天來把昨天的計數器的範例整理成正確的資料結構,如果你還沒完成昨天的範例的話,建議先完成一下,今天的內容才會比較看得懂唷! 物件展...

新手初探 Vue 系列 第 30

技術 鐵人賽Day31 - 新增路由路徑及連結

按照鐵人賽的規則,只要發文30篇即可,但是我不小心把 Day5 給刪了,所以才會有 Day31 的出現 雖然我中間因為忘記發文早已失去資格了 但是這裡我還是會繼...

鐵人賽 自我挑戰組 DAY 19

技術 Day 19 : Transition 漸變

Transition 漸變 Vue 有封裝好的 transition 元件可以使用,可以讓我們在撰寫漸變特效時更方便,而且我們可以自定義漸變的樣式類別,設計出屬...

鐵人賽 自我挑戰組 DAY 11

技術 Day 11 : 生命週期 Lifecycle

Vue Instance Vue 的生命週期是一個相當重要的觀念, Vue 應用程式是從 Vue 建構式( Vue constructor )建立根實體( Vu...

鐵人賽 自我挑戰組 DAY 26

技術 Day26 閒不下來的史萊姆(四):幫專案搬新家吧!

本文同步發表於斜槓女紙部落格:Day26 閒不下來的史萊姆(四):幫專案搬新家吧! 嗨!又見面了。 是的沒錯,我又手癢了~今天要來試著把之前的coding...

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

技術 Day04-v-model雙向綁定

說了v-bind,綁定了數據資料,使的我們在管理資料上面更加容易。但怎麼看都是單方面的,並且除了在標籤屬性上面有做資料管理外,這到底還能夠做什麼呢? Vue:其...

技術 Vue.js實做星星評分功能

今天要來簡單的實做星星評分的功能在這項單元內也會簡單的講解到props與$emit的傳遞先附上成品圖:先在components中新增一個Star的元件...

鐵人賽 Modern Web DAY 28

技術 [前端暴龍機,Vue2.x 進化 Vue3 ] Day28.Vue3 小補充 Magic ~

下面來介紹一下,Vue 3 的一些小小魔法(個人覺得很 Magic ~ 哈哈),有些是補充說明,有些可能會很少使用到,就連官方都有提醒 " 請謹慎使用...

鐵人賽 自我挑戰組 DAY 24

技術 Day24 萬丈高樓平地起(7):Vue CLI專案檔案結構簡介

本文同步發表於斜槓女紙部落格:Day24 萬丈高樓平地起(7):Vue CLI專案檔案結構簡介 延續昨天的進度,安裝好Vue CLI-3專案以後,應該可以...

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

技術 Day02-CDN-Vue初始化

疫情影響,既有業務轉型。平常有在寫程式的我,突然被老闆叫去一個專案,開發客戶平台。 起先,還是挺興奮的,直到了解客戶需求後,先是愣住。因為內容表格增刪查找較多,...

鐵人賽 自我挑戰組 DAY 10

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

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

鐵人賽 Modern Web DAY 23

技術 [30天 Vue學好學滿 DAY23] Vue Router-2

昨天筆記了基礎Vue Router 以及 History概念,今天繼續筆記其他細項用法。 動態路由 將不同路由導向同個元件,可視為帶入不同參數至同元件中。 於r...

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

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

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

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

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

鐵人賽 自我挑戰組 DAY 13

技術 Day 13 : 元件 Components

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