iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
自我挑戰組

新手遇上Vue.js 系列

利用這次鐵人賽,學習從沒碰過的Vue.js,這30天中將會把我的學習過程紀錄其中,從簡單的指令到後面完成實作

參賽天數 11 天 | 共 30 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day10 事件修飾符 (1)

Vue提供了一些常用的修飾符,它可以直接套上,減少程式碼,盡量的單純處裡邏輯.stop.prevent.capture.self.once.passive...

2021-09-25 ‧ 由 Allen1515 分享
DAY 11

Day12 按鍵修飾符

Day12 按鍵修飾符 今天來介紹一下按修飾符吧~鍵盤上每個按鈕都有編號(keycode),當我們想要以特定的按鍵觸發事件,就可以設定按鍵編號在上面 設定按鍵修...

2021-09-26 ‧ 由 Allen1515 分享
DAY 11

Day 13 Class與v-bind

v-bindv-bind常與class和style的綁定,可以用於綁定一個或是多個屬性(class、style),會以{}或是[]出現 當我將滑鼠放上text上...

2021-09-27 ‧ 由 Allen1515 分享
DAY 11

Day14 v-cloak與v-pre

今天再多來看看兩個Vue的指令,v-cloak與v-pre v-cloak使用v-cloak的原因是當網路太慢,網頁在載入時Vue還來不及渲染,導致網頁上會短暫...

2021-09-28 ‧ 由 Allen1515 分享
DAY 11

Day15 元件系統

甚麼是元件?元件(Conponent)是Vue最主要的特性,提供HTML DOM的擴充性,將可以建立根(root)再將元件堆疊上去,有利於人員的開發與維護當專案...

2021-09-29 ‧ 由 Allen1515 分享
DAY 11

Day16 filter過濾器

Filter可以做甚麼?主要的使用是在處理格式化文字(英文字母大小寫轉換,千分號) 如何使用Filter?可以使用mustache語法或是V-bind綁定 局部...

2021-09-30 ‧ 由 Allen1515 分享
DAY 11

Day17 動畫介紹

概述Vue提供了transition元件,在DOM中新增、刪除、更改時提供了多種應用過渡效果,可以加入進入(Enter)離開(Leave)和轉換(Transit...

2021-10-01 ‧ 由 Allen1515 分享
DAY 11

Day18 動畫介紹(2)

前言:昨天介紹完進入時的漸入效果,今天會繼續將剩下的範例介紹完並在最後會介紹自定義前綴詞 範例:4.v-leave 5.v-leave-active 6.v-l...

2021-10-02 ‧ 由 Allen1515 分享
DAY 11

Day19 樣式變化(動畫3) CSS轉換

JavaScript Hooks使用JavaScrip Hooks以v-on的方式來監聽,來完成我們所需要的動作 beforeEnter : 淡入或動畫前觸發...

2021-10-03 ‧ 由 Allen1515 分享
DAY 11

Day20 樣式變化(動畫4)

元件間的轉換 在元素間的轉換可以更加簡單,,因為有了這一個動態組件當按下單選鍵A會出現Component A, 按下單選鍵B會出現Component B,藉由點...

2021-10-04 ‧ 由 Allen1515 分享