標籤: Vue.js 頁1

教學

[Vue.js] component 狀態保留- keep-alive

如果我們利用 is 切換 componet,預設 componet 會整個更新,也就是說如果我們有更新 component 裡面的資料的話,會被整個刷新成初始狀態,這時我們就可以利用 keep-alive 來幫我們做 cache。

教學

[Vue.js] component 的 動態元件(Dynamic-Components):is

我們可以使用 vue 的 is 來做到動態切換 component 的效果。

教學

[Vue.js] 自訂上傳按鈕

簡單敘述使用 Vue.js 處理上傳檔案的方法。

教學

[Vue.js] 透過 axios 的 ajax 上傳

如何透過 vue.js 達成 axios 的 ajax upload

教學

[Vue.js] 簡單計時器

簡單說明使用 vue.js 搭配 setInterval 來製作一個計時器的方法。

教學

[Vue.js] 自訂動畫效果- Animation

延續 transition,在 vue 裡要做 transition 的效果可以使用之前提的 name="xxx" 修改動畫 class 前綴的字,也可以使用以下屬性直接設定動畫進入或離開時的 class name,比如使用一些預設的 css 動畫函式庫就會很有用像是 animate.css。

教學

[Vue.js] 的漸變(transition)效果

在 Vue.js 裡面,提供已經封裝好的 transition 元件來幫我們做到 css 的 transition 的效果,transition 可以和 v-if 或 v-show 及動態元件的增減搭配組合,我們可以在其中設定進入(Enter)和離開(Leave)的效果。

教學

[Vue.js] 在 Vue 裡監聽事件- addEventListener 與移除監聽事件 removeEventListener

簡述在 Vue 裡監聽事件- addEventListener 與移除監聽事件 removeEventListener 的寫法。

教學

[Vue.js] Component 的運用

當我們想要重複利用某一些 UI 的時候,就可以利用 vue 的 component 來幫我們好好處理,設計得好的話再開發上便能更有彈性及節省時間。

教學

[Vue.js] 操作或取得 DOM 的資訊- ref ($refs)用法

在 Vue.js 裡,如果我們想要去取得某個 Dom 的資訊,可以使用 ref 這個 Attr,比如我們要取得某個區塊的寬跟高,可以在那個區塊上設定 ref="var" 這樣,接下來我們就可以透過 this.$refs.var 去取得資訊了。

教學

[Vue.js] 單選切換 class

如果想要做單選並切換顯示的 class,可以寫成當被點到的那個元素並改變 class。

教學

[Vue.js] vue leaflet 基本設置與地圖樣式

在 vue leaflet 裡有確實安裝 component 後,只要使用 l-map 就可以把地圖顯示出來了,一樣透過 props 把參數傳進去後就能生成地圖了。

教學

[Vue.js] 使用 vue leaflet 來製作互動地圖- 基本安裝

之前我們提過用 leaflet.js 來取代 google maps製作互動地圖,這邊來用 vue 建立 web app,剛好有人弄好方便的工具 vue leaflet,測試一下還滿方便的,有興趣的可以用看看。

教學

[Vue.js] 取得 component 中 input 的資料

在 vue 裡面我們可以透過 v-model 來取得 component 輸入的資料。

教學

[Vue.js] 取得指定元素的寬度與高度

想要透過 Vue.js 來取得指定元素的寬與高,可以透過 ref 這個 attr,再透過 this.$refs.infoBox.clientWidth 取得就可以了。

教學

[Vue.js] 事件控制

使用 v-on 可以偵測到頁面上一些事件的發生,並藉此處理不一樣的事情。

教學

[Vue.js] v-for 與列表

我們可以利用 v-for 把 data 裡的陣列物件渲染成列表,可以設定 index 當陣列物件的索引。

教學

[Vue.js] Vue 的條件判斷- v-if 與 v-show

在 Vue.js 裡我們可以利用 v-if 或 v-show 來切換顯示的內容,差別在於 v-if 跟對應的 v-else 會讓 dom 真正的增加或刪除,而 v-show 則是原本就存在但靠 display 去切換顯示狀態而已。