標籤: 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

Ｖue 是一套用於建建用户界面的漸進式框架。與其它大型框架不同的是，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 中處理資料。