技術 vue-form

Vue-form 表單驗證套件，支援Vue.js2.2以上的版本。 Github fergaldoyle/vue-form 範例 例如表單上有一個必填欄位：...

JB ‧ 2018-10-15

技術 （第二天）自我學習 - Vue 與 index.html

上一篇(自我學習 - 簡單認識 Vue) 今天Lucy老師要跟大家一起學習的有二個部分 Vue 在 index.html 可以如何使用？ 什麼事 Trello...

LucyLiou ‧ 2018-10-15

技術 Day 16 : 元件插槽 Slot

元件插槽 Slot 我們會將需要重複使用的區塊建立成元件，這樣可以方便我們重複使用，但是如果遇到我需要替換部份內容的時候，該怎麼辦呢？難道要再新建一個元件嗎？答...

Magisheng ‧ 2018-10-16

技術 Day 15 : emit 向外層傳遞資訊

emit 向外層傳遞資訊 昨天我們提到了如何將資料由外層傳向內層，用 props 的方式可以將資料由外向內傳遞，那如果我們想要將內層的資料向外層傳遞時該怎麼做呢...

Magisheng ‧ 2018-10-15

技術 Day 1 : 前言 - 嘗試用 Go-Vue-PostgreSQL 來重構 MEAN Stack 的緣由

希望在三十天中用 Go-Vue-PostgreSQL 來重構 MEAN Stack，過去為了快速搭建服務，選擇全JS的技術棧 MEAN Stack 來達成目標。...

Aoma ‧ 2018-10-15

技術 Day 14 : Props 特性，由外向內的資料傳遞

Props 特性，由外向內的資料傳遞 元件與元件之間的資料都是各個獨立的，所以才不會互相干擾，如果遇到需要由父層傳遞資料給子層的時候，我們可以使用 props，...

Magisheng ‧ 2018-10-14

技術 Day 13 : 元件 Components

全域註冊 昨天介紹了 Vue 中非常重要的元件，今天我們就來看看元件究竟要怎麼使用吧！首先來是全域註冊的方式，直接來看範例： <div id="...

Magisheng ‧ 2018-10-13

技術 Day 12 : 元件 Components 基礎介紹

元件 Components 基礎介紹 元件的概念在 Vue 中是非常重要的一個環節，Vue 應用程式都是從建立根實體開始，之後再一個一個元件搭建上去，而透過元件...

Magisheng ‧ 2018-10-12

技術 Day 11 : 生命週期 Lifecycle

Vue Instance Vue 的生命週期是一個相當重要的觀念， Vue 應用程式是從 Vue 建構式( Vue constructor )建立根實體( Vu...

Magisheng ‧ 2018-10-11

技術 Day 10 : Filter 過濾

Filter 過濾 今天來介紹過濾 filter，過濾顧名思義就是能夠將資料在顯示之前作前處理的方式，直接來看範例會比較清楚。 <div id=&quot...

Magisheng ‧ 2018-10-10

技術 Day 9 : Watch 監聽屬性

Watch 監聽屬性 今天來介紹監聽 watch 的用法，這個可以讓我們監聽某個值，而當這個值有更動的時候，就去執行某些事情，請看下面範例： <!-- 這...

Magisheng ‧ 2018-10-09

技術 Day 8 : Computed 計算屬性

計算屬性 Computed 今天來介紹的是 computed 這個方法，能夠直接將結果存到變數之中，並且是可以直接使用的，直接來看下面的範例會比較清楚唷！ &l...

Magisheng ‧ 2018-10-08

技術 Day 7 : 列表渲染

列表渲染 在 Vue 中，我們會使用 v-for 來迭代陣列中的元素。下方我先在 Vue 的應用程式中建立一個陣列為 list ： new Vue({ el...

Magisheng ‧ 2018-10-07

技術 Day 6 : 條件渲染

條件渲染 今天來介紹 v-if 和 v-show，並比較兩者之間的差異。 v-if 如果希望某些區塊在特定條件下才出現，就可以使用 v-if 、 v-else-...

Magisheng ‧ 2018-10-06

技術 Day 5 : 動態切換 className

動態切換 className 今天來介紹一點運用的範例，這是關於是件綁定跟屬性綁定的運用，如果對事件綁定 ( v-on ) 和屬性綁定 ( v-bind )還不...

Magisheng ‧ 2018-10-05

技術 Day 4 : 事件綁定 v-on

前面有提到屬性綁定，在這裡我來介紹事件綁定及資料綁定，就讓我們開始吧！ 事件綁定 v-on 在網頁上，常常會有點擊、輸入資料等的互動事件，而如果你對 JavaS...

Magisheng ‧ 2018-10-04

技術 Day 3 : Class 與 Style 的綁定

上一篇提到了 v-bind 的屬性綁定，今天就來提更多的屬性綁定的方法。 Class 與 Style 的綁定 我們先來看一個範例： <!-- 這是HTML...

Magisheng ‧ 2018-10-03

技術 Day 2 : 模版語法

上一篇介紹了如何用 CDN 的方式使用 Vue，然後建立一個 Vue 的應用程式，接下來幾天會介紹在 Vue 裡常用的一些語法。 屬性綁定：v-bind 能夠將...

Magisheng ‧ 2018-10-02

達標好文 技術 主廚的話 - 餐點簡介與相關說明

Alex ‧ 2018-10-16 ‧團隊浪流連九程式匠自然產生的佛系碼農專區

技術 Day 1 : 前言

本人是前端新手，想藉由鐵人賽讓自己更熟悉 Vue，所以將學習筆記分享給大家。先附上官方文件，搭配官方文件服用可以更快速了解 Vue，文中若有觀念不正確之處，請不...

Magisheng ‧ 2018-10-01

技術 vue製作排版不同的list清單

使用v-model綁定切換樣式原本想買白爛貓的飲料袋(不是業配)沒搶到只好來仿它的購物清單白爛貓 HTML <div id="app"...

技術 VUE的多項tab製作

使用component和slot的概念，製作兩個左右的tab製作一個tab選單及tab內容的模版，可直接共用在HTML裡更換文字內容 這次仿momo購物網裡的其...

技術 使用vue製作Shoppingcart

簡單購物清單的畫面有實現邏輯的部分有: 新增及刪除部分 總價計算出上面所有填入的單價*數量之和 vue的HTML <div id="app&...

技術 [筆記][Vue.js]打開Vue.js世界的大門(12)-讓組件與父元素溝通的$emit和v-model的綁定篇

嗨！讓我抓住禮拜天的尾巴，繼續研究Vue.js吧XD，之後就要分心處理React了，那廢話不多說，分隔線下進入正文！ 對父級做事件處理 首先提一下關於組件的事...

技術 [筆記][Vue.js]打開Vue.js世界的大門(11)-壓軸登場的組件基礎和Props使用方式篇

Hello！大家好！前幾天突然看到鐵人賽在十月開始，實在來的太快，讓小弟我感到非常錯愕XD，去年因為害怕所以沒有參加，但那時候也立志了今年要參加的決心！所以之後...

技術 [筆記][Vue.js]打開Vue.js世界的大門(10)-事件綁定的後綴修飾符Part2篇

Hello！大家好！Part1篇在這裡，今天讓我們繼續事件修飾符的Part2篇(簡單迅速切入正文，因為時間有點晚了XD)！ 首先登板的是.once！ 1. ....

技術 [筆記][Vue.js]打開Vue.js世界的大門(9)-事件綁定的後綴修飾符Part1篇

HI！其實第一篇已經簡單介紹過事件綁定了，但是我看他官方文件上面好像還有很多可以講，就在這裡把他獨立出來了XD 再講新的之前先複習一下之前學過的綁定方式：HT...

技術 [筆記][Vue.js]打開Vue.js世界的大門(8)-用Vue來玩轉style！

嗨！大家好！最近都維持著兩三天就一篇文章的頻率，說實在有點累人XD，不過年底就要到了很多事情都還沒有一個著落，突然覺得有點著急，才想說加緊個腳步 昨天我們說了c...

技術 [筆記][Vue.js]打開Vue.js世界的大門(7)-class也飛不出Vue的掌心！

嗨啊！今天台南終於放晴了，那麼好的天氣，就輕鬆打個文章吧XD，內容來說說如何使用Vue.js來操作class屬性。 class 不就用v-bind綁定clas...

技術 [筆記][Vue.js]打開Vue.js世界的大門(6)-讓watch來當你的眼睛！

HI！大家好啊！緊接著computed之後，今天再來學習新的Vue.js的屬性watch吧！ watch 這是什麼？ 如果我們要在一個表單上的值發生改變的時候...