標籤: javascript 頁1

教學

[Vue.js] Component 的運用

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

教學

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

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

教學

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

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

好網站

為網頁寫的 2D 物理碰撞引擎- matter.js

matter.js 是一個為網頁寫的 2D 物理碰撞引擎,如果有需要處理跟物理碰撞有關的行為可以嘗試看看。

教學

[Vue.js] 事件控制

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

教學

使用 javascript 計算兩個經緯度間的距離

要使用 javascript 計算兩個經緯度間的距離,可以照以下公式套用就可以了,其中 lat 跟 lon 可以輸入第一個點跟第二個點的經緯度。

教學

[Vue.js] v-for 與列表

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

教學

[Vue.js] 單選切換 class

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

教學

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

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

教學

[Vue.js] 設定 class 與 style

由於 class 與 style 都是 html 元素上 attribute 的一部分,我們便可以透過 v-bind 來改變這些屬性。

好網站

不用寫程式也能套生動的動畫- AniJS

AniJS 只要讀入他寫好的 js 和 css,再在 html 上加上類似 data-anijs="if: mouseover, on: body, do: swing animated" 的敘述,就可以把動畫套到上面去了。

教學

使用 javascript 取得網址(url) 與 window.location 類別

我們可以使用 window.location 類別來取得網址資訊、轉址或重讀等動作。

教學

[Vue.js] 點擊後 focus 到指定的輸入欄位

要設定點擊某的地方後 focus 到指定的輸入欄位,在 Vue 2.0 後可以利用 ref 搭配 focus() 幫我們指定。

教學

[Vue.js] 開始使用 vue.js

Vue 是一套用於建建用户界面的漸進式框架。與其它大型框架不同的是,Vue 被設計為可以自底向上逐層應用。Vue 的核心只關注 view ,不僅容易上手,還方便與第三方整合。

好網站

幫你製造生動的 CSS3 動畫效果- Bounce.js

Bounce.js 是一個可以幫你快速產生 CSS3 動畫效果的 library,只要透過一些參數的設定就可以讓你的元素加上 CSS3 的動畫。

好網站

輕鬆製作 css 的動畫效果- Animate.css

animate.css 是一個幫我們做好許多內建的 CSS3 效果的動畫庫,簡單的把 css 檔讀入後再照著文件說明使用就可以把效果加到頁面上了。

教學

使用 leaflet.js 來製作互動地圖

使用 leaflet.js 來製作互動地圖,內含套用 mapbox 的樣式。

教學

使用 Indexed Database API 存取資料

使用 Indexed Database API 開發的步驟為:1. 建立資料庫 2.建立 object store 3. 在 transaction 中處理資料。