iT邦幫忙

vue3相關文章
共有 424 則文章
鐵人賽 自我挑戰組 DAY 20

技術 vue3 Composition API 學習手冊-20 vue cli 環境架設

像前面文章中提到vue是一套漸進式的框架,他適合在各種不同的需求中使用,無論你是只想用它來綁定一些表單資料或是使用他Virtual DOM特性,甚至更深入的使用...

鐵人賽 自我挑戰組 DAY 19

技術 vue3 Composition API 學習手冊-19 組件的綜合練習

Vue3 Composition API的文章寫到了Component的階段,想要來整理一下前面的進度,來製作一個綜合的案例,這個案例的規劃如下: 製作一個F...

鐵人賽 自我挑戰組 DAY 18

技術 vue3 Composition API 學習手冊-18 組件emit的用法

上一篇文章我們提到Components可以接收父層傳遞過來的參數進行處理,這次我們首先就來看看子層通知父層的方法。 利用上一篇文章的最後一個範例來進行說明,當時...

鐵人賽 Modern Web DAY 18
全端成長之旅 系列 第 18 篇

技術 Day.18 前端下一步

在前面幾天中我邊對照 Vue2 與 Vue3 的文件邊跟大家分享,希望有幫助到大家。 另外,前幾天也很巧地碰到了 Vue3 的第一個 release v3.0....

鐵人賽 自我挑戰組 DAY 17

技術 vue3 Composition API 學習手冊-17 組件的資料和函數

呈上一篇組件設計的文章,今天來介紹組件資料和方法的應用,在使用組件的時候,各個子層可以有獨立的data與methods不會互相干擾,不過需要注意使用的方式: &...

鐵人賽 自我挑戰組 DAY 16

技術 vue3 Composition API 學習手冊-16 組件設計入門

如同「vue.js 學習手冊 框架的選擇與導入」這篇文章中提到的,我們使用框架能更方便地進行前後端分離式的開發;享受Virturl DOM提升頁面效能外;另外還...

鐵人賽 自我挑戰組 DAY 15

技術 vue3 Composition API 學習手冊-15 安裝Chrome擴充功能

在繼續未來的課程前,先跟大家介紹一個我們常用的Chrome Extension:「Vue.js devtools 」(免費的喔!),我們可以在瀏覽器透過他來監控...

鐵人賽 Modern Web DAY 16
全端成長之旅 系列 第 16 篇

技術 Day.16 Vue3 介紹 Part 11

今天介紹前面幾天一直在文中默默出現的 setup 方法 This 當 setup 被 Vue 執行時,元件還沒有被 new 出來,所以在 setup 方法裡不能...

鐵人賽 自我挑戰組 DAY 14

技術 vue3 Composition API 學習手冊-14 透過axios載入外部json

在前面“多層次動態選單”的文章中,我們把選單資料放在Javascript中進行描述,可以發現整支Javascript中邏輯運算的部分極少,大多都是描述頁面資料的...

鐵人賽 自我挑戰組 DAY 13

技術 vue3 Composition API 學習手冊-13 生命週期

前一篇文章,介紹到我們如何用已經學習到的進度製作一個連動的選單,其實大家應該不難發現在Javascript的程式中,實際上邏輯運算相關的程式碼並不多,反而是描述...

鐵人賽 自我挑戰組 DAY 12

技術 vue3 Composition API 學習手冊-12 實作 多層次動態選單

在經歷了前幾篇文章的分享後,這篇文章想要整合一下前面所提到的進度,來製作一個整合性的範例,幫助大家停下腳步想想,除了每個項目分別的作用之外,有沒有什麼事可以透過...

鐵人賽 Modern Web DAY 17
全端成長之旅 系列 第 17 篇

技術 Day.17 Vue3 介紹 Part 12

今天介紹 Vue 3 的 Provide/Inject Provide provide 最常用的 3個用法: import { provide, ref, re...

鐵人賽 自我挑戰組 DAY 11

技術 vue3 Composition API 學習手冊-11 監聽器

上一篇文章中介紹到了Vue.js裡面的計算屬性(Computed),也比較了Computed與Methods之間的差異,今天再來介紹一個跟他們也有幾許類似的監聽...

鐵人賽 自我挑戰組 DAY 10

技術 vue3 Composition API 學習手冊-10 計算屬性的setter

如前一篇所提Computed能夠自動監看指定的數據,當數據發生變化後自動重新計算結果,但如果我們想直接修改Computed的結果,在沒有使用Setter的狀態下...

鐵人賽 自我挑戰組 DAY 9

技術 vue3 Composition API 學習手冊-9 計算屬性

今天來跟大家分享一個在Vue裡面非常方便實用的屬性:計算屬性,它可以在Vue中的數據更改後,自動進行運算取得一個新的結果,例如: <div id=&quo...

鐵人賽 Modern Web DAY 15
全端成長之旅 系列 第 15 篇

技術 Day.15 Vue3 介紹 Part 10

今天來介紹 Vue 3 的 Composition API。 Vue 2 元件最大的痛點就是,相關邏輯必須被強制的拆分到不同的 Lifecycle Hooks裡...

鐵人賽 自我挑戰組 DAY 8

技術 vue3 Composition API 學習手冊-8 v-for為何要定義key呢?

講到了v-for和v-bind就不得不提key的這個屬性,主要就是要討論透過v-for所渲染的項目,在資料更新時會怎麼處理,若在v-for渲染的項目中“沒有”加...

鐵人賽 Modern Web DAY 14
全端成長之旅 系列 第 14 篇

技術 Day.14 Vue3 介紹 Part 9

今天介紹 watchEffect 與 Lifecycle hooks watchEffect const count = ref(0) watchEffect...

鐵人賽 自我挑戰組 DAY 7

技術 vue3 Composition API 學習手冊-7 清單渲染

看過前幾篇文章的朋友應該會發現,我們開頭的範例都非常類似,一個下拉選單可以更改頁面中的值,今天也不例外,但要透過框架強化的項目會有所不同。 在案例中,我們的下拉...

鐵人賽 Modern Web DAY 13
全端成長之旅 系列 第 13 篇

技術 Day.13 Vue3 介紹 Part 8

今天來介紹 Vue3 的 computed 和 watch API computed computed API 有兩種使用方式:immutable、writab...

鐵人賽 自我挑戰組 DAY 6

技術 vue3 Composition API 學習手冊-6 雙向資料綁定

在之前的範例掩飾中,我們透過一個下拉式選單更改後來改變網頁中的值,實現的方法有兩種: 不使用框架,透過Script進行資料更新與畫面更新 使用vue框架,透過...

鐵人賽 Modern Web DAY 12
全端成長之旅 系列 第 12 篇

技術 Day.12 Vue3 介紹 Part 7

Vue 官方很用心地寫了詳細的文件來跟大家解說 What is Reactivity?,內容主要是解說一些 Vue3 如何透過 Proxy 來做到資料驅動,有興...

鐵人賽 自我挑戰組 DAY 5

技術 vue3 Composition API 學習手冊-5 事件 修飾符

上一篇文章提到了Vue結合了事件上的用法,這篇文章來加強一下事件上的使用: 事件修飾符 事件修飾符在vue裡面也是極為好用,透過下面這個範例來說明: <...

鐵人賽 自我挑戰組 DAY 4

技術 vue3 Composition API 學習手冊-4 事件

接續昨天的範例,我們透過下拉式選單來改變vue中的資料,視圖就會跟著連動改變,這部分是透過Javascript原生的事件去觸發函數來執行,也是在網頁中常見的動作...

鐵人賽 自我挑戰組 DAY 3

技術 vue3 Composition API 學習手冊-3 起手式

上一篇文章介紹過了選擇使用前端框架的因素,若你的專案符合使用他的條件,或是你現在正在找一份前端工程師的工作,那認識框架就變成勢在必行的功課了,我們選擇介紹的前端...

鐵人賽 Modern Web DAY 11
全端成長之旅 系列 第 11 篇

技術 Day.11 Vue3 介紹 Part 6

今天介紹一些 v-model 在 v3 一些改動以及新特性 v-model 搭配 Computed 使用 這個範例只有在 Vue 3 的文件中出現不過看起來 V...

鐵人賽 Modern Web DAY 10
全端成長之旅 系列 第 10 篇

技術 Day.10 Vue3 介紹 Part 5

Event 重點新特性:多事件監聽者現在可以同時掛多個事件監聽者,如下: <button @click="one($event), two($e...

鐵人賽 Modern Web DAY 9
全端成長之旅 系列 第 9 篇

技術 Day.9 Vue3 介紹 Part 4

Template Template 的部分,Vue 3 跟 Vue 2 在關防文件上除了排序與樣式的不同,內容幾乎不變,因此這部分可以預測為完全不需要改動。...

鐵人賽 Modern Web DAY 8
全端成長之旅 系列 第 8 篇

技術 Day.8 Vue3 介紹 Part 3

這篇主要給 Plugin 開發者 ~ 由於特定的全域 API 已經變成開放 APIs,因此如果插件有使用到化也要做相對應的修改: // before v3 co...

鐵人賽 Modern Web DAY 7
全端成長之旅 系列 第 7 篇

技術 Day.7 Vue3 介紹 Part 2

今天介紹 Vue 3 的一項優化:Global API Treeshaking Vue 2 有些全域 API 例如 Vue.nextTick、Vue.set這些...