iT邦幫忙

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

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

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

跟 VueJS 認識的30天 系列 第 21

技術 [DAY21]跟 Vue.js 認識的30天 - Vue 過濾器(`filter`)

這是一個在 Vue 3 被拿掉的功能,但還是來了解一下。 filter 用途及用法 filter 是讓雙花括號({{}})或 v-bind 表達式中的值通過...

跟 VueJS 認識的30天 系列 第 20

技術 [DAY20]跟 Vue.js 認識的30天 - Vue 插件(Plugin)

這一篇說實在的,現在的我還不能寫出有用的插件,所以這一篇筆記主要也是學習使用別人寫好的插件。 使用插件 Vue.use('PluginName', { //...

跟 VueJS 認識的30天 系列 第 19

技術 [DAY19] 跟 Vue.js 認識的30天 - Vue 自定義指令(`directive`)

在粗淺的看過這一章時,覺得 Vue 真的有好多功能啊,目前的我似乎還是沒辦法很熟用 Vue 的每項語法,只希望未來在遇到各種問題時,我能有印象可以使用哪種語法。...

跟 VueJS 認識的30天 系列 第 18

技術 [DAY18]跟 Vue.js 認識的30天 - Vue 混入(`mixin`)

混入(mixin)似乎也是個初學 Vue 比較少被用到的功能,但還是照順序的了解一下。 基礎運用 在模組中如果有重複出現的模組 option 內容,就可以透過...

跟 VueJS 認識的30天 系列 第 17

技術 [DAY17]跟 Vue.js 認識的30天 - Vue 過渡(轉場)及動畫效果下篇(`<transition-group>`) - 多個元素的過渡及列表過渡

這一篇就來接續寫完 Vue 過渡及動畫的內容啦!希望能順利寫完我的 Vue 筆記。 多個元素的切換轉場 以後就用 .v-* 跟 .transitionName-...

跟 VueJS 認識的30天 系列 第 16

技術 [DAY16]跟 Vue.js 認識的30天 - Vue 過渡(轉場)及動畫效果上篇(`<transition>`)

先看上圖來了解 Vue 將動畫進入跟離開這 2 種階段,而在進入跟離開階段又分別配置了 3 種狀態 — 初始狀態(進入前、離開前)、進行中狀態、結束狀態(進入...

跟 VueJS 認識的30天 系列 第 15

技術 [DAY15]跟 Vue.js 認識的30天 - Vue 動態模組(Dynamic Components)

這次寫的內容是之前都沒使用過的,所以就盡量讓自己有概念,希望之後能使用到。 使用 v-bind:is 來切換模組 切換模組的基本語法 <component...

跟 VueJS 認識的30天 系列 第 14

技術 [DAY14]跟 Vue.js 認識的30天 - Vue 模組插槽(`slot`)

最近在 youtube 找到一個學習 webpack 很好用的教學影片,所以正努力的學習 webpack 中,一個不小心就太沉迷在新技術的練習了,導致有點忽略...

技術 Vue ⑅:v-bind 動態綁定 HTML 屬性

如標題 (⑅•ᴗ•⑅) v-bind 可以動態綁 HTML 屬性、將資料傳遞到元素上。   幾個重點 ( 官方文件參照 ★ ) v-bind 可以直接縮寫成...

技術 Vue ⑅:將資料呈現在畫面上

Vue Data 呈現於畫面上有以下幾種方法: {{ }}:神奇的雙大括號 v-text:跟神奇大括號一樣的效果,但是寫在標籤裡 v-once:綁定的標籤只會...

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

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

跟 VueJS 認識的30天 系列 第 13

技術 [DAY13] 跟 Vue.js 認識的30天 - Vue 模組自定義事件(Custom Events)

每次寫筆記都在想要怎麼寫得讓大家(包含未來的我)看得懂,所以每次都要寫很久,但好像自己的內容有點太無聊了 XD 。 自定義事件( Custom Events )...

跟 VueJS 認識的30天 系列 第 12

技術 [DAY12]跟 Vue.js 認識的30天 - Vue 模組資料傳遞(`props`)

props 的命名及使用 HTML attribute 是大小寫不敏感的,所以必須要注意 prop 的命名跟使用。 命名 可以使用 PascalCase (首...

跟 VueJS 認識的30天 系列 第 11

技術 [DAY11]跟 Vue.js 認識的30天 - Vue 的模組註冊(`component`)

模組的命名 一個模組的命名關係到我們是否能快速地知道這個模組的功能是甚麼,同時可以避免跟現有的 HTML 標籤相衝突。 在Vue.js - 风格指南中, com...

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

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

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

鐵人賽 自我挑戰組 DAY 4
跟 VueJS 認識的30天 系列 第 10

技術 [DAY10]跟 Vue.js 認識的30天 - Vue 的基本模組(`component`)概念

Vue 的模組 - component 作用 Vue 的模組 component 是可以重複使用的 Vue 實例,所以也擁有 data、computed、wa...

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

技術 Day029-透過Vuex-實作簡易部落格-打包你的專案吧!

Vue:還記得第10天時,我們才剛認識Vue CLI,但你還記得我的介面嗎? 接著,我們試試看這個指令: npm run build 如此,產生的資料即打包...

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

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

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

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

技術 Day027-透過Vuex-實作簡易部落格-列舉及刪除文章

Vue:昨日,我們已將文章新增實做出來了!現在只要將文章列舉在首頁,只需要使用之前學到的v-for迴圈,即可完成! 透過 v-for,將vuex中state的...

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

技術 Day026-透過Vuex-實作簡易部落格-新增文章

Vue:文章為本專案的共用資料。當許多頁面都需要用到時,這個時候使用Vuex就是最佳時機。下圖,可以看到,在其中一個元件下(Add-Article元件)新增文章...

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

技術 Day025-透過Vuex-實作簡易部落格

Vue:接下來透過幾天,我們將把之前學的router、Vuex等,實現在這個專案上面。 由上圖首頁,除了基本路由設定(首頁和文章),將會以組件方式生成文章列表...

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

技術 Day024-Vuex 資料控管介紹(四)-Getters改變資料內容

Vue:資料改變,除了利用method或computed,還有getter。 Getter好處是當資料集中管理,部分組件或元件需要用到不同資料下,可提供相對應的...

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

技術 Day023-Vuex 資料控管介紹(三)-Mutation與Actions資料運作

需要用的頁面上: import Action和 State進來 透過methods調用mapActions 透過computed調用mapState...

鐵人賽 自我挑戰組 DAY 4
跟 VueJS 認識的30天 系列 第 9

技術 [DAY09]跟 Vue.js 認識的30天 - Vue 的資料雙向綁定

在別人都完成30天鐵人賽的路上,我真的是太難了QQ,我才發現我一個禮拜的產量竟然只有1-2篇,在看文件的時候才發現自己之前練習 Vue 遇到的問題,真的是絕大部...

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

技術 Day022-Vuex 資料控管介紹(二)-Sate資料內容

Vue:今日首先來了解一下Vuex中的State部分: State部分來說,相當於Vue的data,專門儲存資料。我們首先可以在這邊定義資料來源,將其為我們所需...

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

技術 Day021-Vue 資料控管介紹(一)

Vue:前陣子,我們學到了組件資料的相互傳遞,包含父元件利用props傳遞資料給子元件、子元件利用$emit傳遞給父元件。然而,這些都是單向資料傳遞: 對於單...

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

技術 Day019-Vue Router介紹(三)巢狀路由:

Vue:昨日講述了基本的Route設定後,今天我們再來看看巢狀路由吧! 對於頁面上的切換,是很容易透過Route做到的。但有沒有可能,會需要將頁面某一部分,作...

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

技術 Day018-Vue Router介紹(二)路由設定

Vue:設定基本路由,可以拆解成以下步驟: 定義模板 template 配置模板路線(routes)(每一條路線,都會對應到相應的component;而這邊的...

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

技術 Day017-Vue Router介紹(一)基本介紹

Vue:還記得在Vue CLI建置專案時候,也有遇上Vue Router嗎? 無論你是使用history mode或hash mode,設置路由,將可以導入...