vue.js

CSS 的模組化方法:OOCSS、SMACSS、BEM、CSS Modules、CSS in JS

OOCSS、SMACSS、BEM、CSS Modules、CSS in JS … 這些規範(或稱心法、解法)存在的目的都是為了讓程式碼易懂、可重用,進而有效率地開發和維護。

CSS Modules CSS in JS css BEM styled-components react.js vue.js babel · 留言


Vue.js: axios 與 axios-mock-adapter

axios 是以 Promise 為基礎、可供瀏覽器和 Node.js 環境來發出 HTTP client request。axios-mock-adapter 簡單說就是在發出 HTTP client request 後,提供假的回傳資料。

vue.js · 留言


Vue.js: 動態元件 Dynamic Components

動態元件(Dynamic-Components)是指可根據傳入參數的不同,而去切換不同的元件。

vue.js vue.js components · 留言


Vue.js: Slot

Slot 是一種用於內容分配(Content Distribution / Transclusion)的元件,適用於複雜或巢狀元件的實作上,可以想像成是空間預留的方法,在迭代過程中再把內容塞進去。

vue.js vue.js components · 留言


Vue.js: Mixins

Mixins 是一種讓元件共用功能的方法,使用方式即是將共用功能以物件的方式傳入 mixins option。mixin object 可傳入元件的任何 option,例如:data、computed 或 methods。當元件選用 Mixins 時,使用的 mixin object 會和此元件的其他 option 混用。

vue.js vue.js components · 留言


Vue.js: 進階過渡效果

Vue.js 的進階過渡效果,含載入時的漸變效果、過度模式、元件間的過渡、列表過渡、可重複使用的過渡效果。

vue.js vue.js transitions vue.js animations · 留言


Vue.js: 動畫 Animations

Vue.js 的基本動畫效果,含客製化樣式類別、鉤子和範例。

vue.js vue.js transitions vue.js animations css3 animations · 留言


Vue.js: 樣式與漸變 Transitions

Vue.js 提供已封裝好的 Transitions 元件,讓開發者在特定情況下處理單一元素或元件時,能加入進入(Enter)和離開(Leave)漸變(Transitions)的效果。 Vue.js 會自動將定義好的 class 用在漸變效果中,也可同 JavaScript 鉤子一起使用。

vue.js vue.js transitions css3 animations · 留言


Vue.js: Filter 過濾器

Filter 過濾器,並比較 Filter 和 Computed 的差異。

vue.js vue.js computed · 留言


Vue.js 學習筆記總整理

開發環境建置、Vue Instance、模版語法(Directives)、元件(Components)和 Todo List 小範例。

vue.js vue.js components vue.js directives vue-cli virtual dom v-model two-way binding 雙向綁定 vue.js computed vue.js transitions vue.js animations · 留言


Vue.js: 元件 Components - Events Up 自定義事件

使用 v-on 綁定自定義事件、使用自定義事件的表單輸入元件。

vue.js vue.js components v-model · 留言


Vue.js: 元件 Components - Prop

使用元件的目的是希望互相干擾的程度愈小愈好,因此非必要儘量不要溝通。若遇到需要由父層傳遞資料給子層的時候,使用 prop 即可。

vue.js vue.js components · 留言


Vue.js: 元件 Components 簡介 - 註冊與使用

每個 Vue.js 的應用程式都是從 Vue 建構式 (vue constructor) 建立根實體 (root vue instance) 開始,再由一個個元件 (Components) 搭建上去而來的,透過元件的方式能讓開發者將程式碼封裝而更好重用。

vue.js vue.js components · 留言


Vue.js: 自定義指令 Custom Directive

Vue.js 提供自定義指令 (Custom Directive) 讓開發者直接從底層操作 DOM 物件。

vue.js · 留言


Vue.js: v-cloak

使用 v-cloak 解決 Vue Instance 完成編譯前顯示變數的問題。

vue.js vue.js directives · 留言


Vue.js: 列表渲染 v-for

使用 v-for 迭代陣列或物件中的元素。

vue.js vue.js directives · 留言


Vue.js: 條件渲染 v-if、v-show

條件渲染 v-if、v-show,並比較兩者差異。

vue.js vue.js directives · 留言


Vue.js: 屬性綁定 v-bind、Class 與 Style 綁定

v-bind 屬性綁定、Class 與 Style 綁定。

vue.js vue.js directives · 留言


Vue.js: Methods 與事件處理 (Event Handling)

Methods 與事件處理 (Event Handling)。

vue.js · 留言


Vue.js: Watch

Watch 可讓我們監視某個值,當這個值變動的時候,就去做某些事情。

vue.js vue.js components · 留言


Vue.js: 計算屬性 Computed

計算屬性 (Computed Properties),並且和 Method、Watch 做比較。

vue.js vue.js computed · 留言


Vue.js: data、v-model 與雙向綁定

如何利用 data 與 v-model 實現雙向綁定?原理、語法與表單元件範例。

vue.js 雙向綁定 two-way binding vue.js directives v-model · 留言


Vue Instance

Vue Instance、Instance Lifecycle、Instance Lifecycle Hook 與 Virtual DOM。

vue.js virtual dom · 留言


Vue.js 開發環境建置

Vue.js 的開發環境建置有以下幾種方法:使用 CDN 或下載後使用本機檔案、npm 安裝和使用 vue-cli。

vue.js vue-cli · 留言


使用 xpepermint 建立 Vue.js 專案

如果需要快速建立一個 Vue.js + Node.js 的專案,可以考慮這個樣版 xpepermint,它提供了 server-side rendering、router、vuex store、form validation、i18n 與 l10n 等。

vue.js vue-cli · 留言


vue-cli

快速建立 Vue.js 專案的工具,對於 Node.js 工具熟悉的開發者,推薦使用 vue-cli。

vue.js vue-cli · 留言


Virtual DOM 概述

Virtual DOM 是以 JavaScript 物件模擬特定 DOM 結構而產生的樹狀結構。用途是不直接操作 DOM,而改操作這些物件。待一個段落後,再將這些變更更新回真實的 DOM 上,以期提升效能。

vue.js react.js virtual dom · 留言


Todo List with Vue.js and Vuex

利用 Vue.js 與 Vuex 實作一個 Todo List,並且使用 Bootstrap Vue。

vue.js vuex todo list Bootstrap · 留言


Todo List: Vue.js Example

利用 Vue.js 簡單實作一個 Todo List。功能含有新增 / 修改 / 刪除 todo、更新 todo 狀態、切換檢視模式、查看各檢視模式下的數量。

vue.js todo list vue.js components · 留言


利用 Object.defineProperty 和 MutationObserver 實作雙向綁定

雙向綁定就是 (一)可以經由改變model的值而自動更新DOM的內容,並且 (二)經由改變DOM的內容而自動更新model的值。以下分這兩部份來實作...

javascript vue.js 雙向綁定 two-way binding · 留言