標籤: javascript 頁1

教學

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

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

教學

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

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

教學

[javascript] 複製內容至剪貼簿

要複製頁面上的內容,我們可以使用 exeCommand('copy'),但首先要複製的內容需要存在頁面上,可以參考以下寫法。

教學

[Vue.js] 自訂上傳按鈕

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

教學

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

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

教學

[Vue.js] 簡單計時器

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

教學

[Three.js] 概述與第一個範例

利用官方第一個範例來認識一下 Three.js。

教學

[Three.js] 基本元素介紹

在 Three.js 的基本元素有場景(Scene)、相機(Camera)、物體(Objects)、光源(Light)和渲染器(Renderer),我們將透過這些元素來建立場景。

教學

使用 Three.js 讓你的網頁有 3D 互動效果- 前言

網頁的發展到現在,偶爾能夠看到可以 3D 互動的頁面,而在操作 3D 的時候許多是利用到 WebGL 的 javascript API,但由於原生的 WebGL API 不是很好撰寫,後來就發展出了 Three.js 的 javascript 函式庫,它提供了比 WebGL 更簡單的 Javascript API,讓開發者能夠輕易在瀏覽器做 3D 繪圖。

教學

[jQuery] 取得滑鼠位置、元素位置與區塊內的相對位置

在 jQuery 裡可以使用 e.pageX, e.pageY 和 offset() 來取得頁面上的絕對位置與相對位置。

教學

[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 去取得資訊了。

教學

用 javascript 把 video 變成圖片

如果要把頁面給印出來,可能會遇到 video 沒辦法看的情況,這邊我使用 js 先把 video 轉成圖片後,應該就可以避免這個情況。

教學

[Vue.js] 單選切換 class

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

教學

[PHP, JS] 解決手機上傳圖片時照片旋轉 90 度的問題

要做圖片上傳的功能,遇到從手機選取照片時,可能會遇到照片轉了 90 度的情況,這是因為手機有旋轉角度拍攝時,網頁選取照片沒有把這個資訊給修正,這樣在預覽跟存到伺服器就會看到倒掉的照片,這個問題我們可以透過讀取照片的 exif 的資料來處理。