1 / 48 Introduction - by Examples Vue.JS Eueung Mulyana https://eueung.github.io/112016/vuejs CodeLabs | Attribution-ShareAlike CC BY-SA

Vue.JS Version: 2.1.6 Vue Material Version: 0.5.1 2 / 48

Outline Introduction Basic Examples vue-cli Vue Components 3 / 48

Introduction 4 / 48

5 / 48 Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries. Ref: Vue.JS - Guide Vue.JS

6 / 48 Vue & React They share many similarities: utilize a virtual DOM provide reactive and composable view components maintain focus in the core library, with concerns such as routing and global state management handled by companion libraries In React, everything is Just JavaScript, which sounds very simple and elegant - until you dig deeper. The unfortunate reality is that reinventing HTML and CSS within JavaScript, while solving some issues of the traditional model, can also cause pain of its own. Vue, instead, utilizes web technologies and build on top of them. Ref: Comparison. Deja Vue? Vue has many features that are clearly inspired by other frameworks. This is a good thing; it's great to see new frameworks take some ideas from other libraries and improve on them. In particular, you'll see Vue's templating is very close to Angular, but its components and component lifecycle methods are closer to React. Ref: jfranklin @SitePoint

Basic Examples 7 / 48

< ! D O C T Y P E h t m l > < h t m l l a n g = " e n " > < h e a d > < m e t a c h a r s e t = " u t f - 8 " > < t i t l e > V u e . J S < / t i t l e > < l i n k r e l = " s t y l e s h e e t " h r e f = " / / f o n t s . g o o g l e a p i s . c o m / c s s ? f a m i l y = R o b o t o : 3 0 0 , 4 0 0 , 5 0 0 , 7 0 0 , 4 0 0 i t a l i c " < l i n k r e l = " s t y l e s h e e t " h r e f = " / / f o n t s . g o o g l e a p i s . c o m / i c o n ? f a m i l y = M a t e r i a l + I c o n s " > < l i n k r e l = " s t y l e s h e e t " h r e f = " / / u n p k g . c o m / v u e - m a t e r i a l @ l a t e s t / d i s t / v u e - m a t e r i a l . c s s " > < s t y l e > . m a i n - c o n t e n t { p a d d i n g : 1 6 p x ; } . r e d { c o l o r : r e d ; } < / s t y l e > < / h e a d > < b o d y > < d i v i d = " a p p " > < m d - t o o l b a r > < h 1 c l a s s = " m d - t i t l e " > L e a r n i n g V u e . J S < / h 1 > < / m d - t o o l b a r > < d i v c l a s s = " m a i n - c o n t e n t " > < h 1 > { { m e s s a g e 1 } } < / h 1 > < h 3 c l a s s = " r e d " > v - o n : c l i c k < / h 3 > < m d - b u t t o n c l a s s = " m d - r a i s e d m d - p r i m a r y " v - o n : c l i c k = " r e v e r s e M e s s a g e " > R e v e r s e < / m d - b u t t o n > < h 3 c l a s s = " r e d " > v - b i n d : t i t l e < / h 3 > < p v - b i n d : t i t l e = " m e s s a g e 2 " > 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 < / p > < h 3 c l a s s = " r e d " > v - i f < / h 3 > < p v - i f = " s e e n " > v - i f s h o w - h i d e : N o w y o u s e e m e < / p > < h 3 c l a s s = " r e d " > v - f o r < / h 3 > < o l > < l i v - f o r = " t o d o i n t o d o s " > { { t o d o . t e x t } } < / l i > < / o l > < h 1 > { { m e s s a g e 3 } } < / h 1 > < h 3 c l a s s = " r e d " > v - m o d e l < / h 3 > < m d - i n p u t - c o n t a i n e r > < l a b e l > E n t e r M e s s a g e < / l a b e l > < m d - i n p u t v - m o d e l = " m e s s a g e 3 " > < / m d - i n p u t > < / m d - i n p u t - c o n t a i n e r > < h 3 c l a s s = " r e d " > C o m p o n e n t < / h 3 > < o l > < t o d o - i t e m v - f o r = " i t e m i n g r o c e r y L i s t " v - b i n d : t o d o = " i t e m " > < / t o d o - i t e m > < / o l > < / d i v > < / d i v > < s c r i p t s r c = " / / u n p k g . c o m / v u e / d i s t / v u e . j s " > < / s c r i p t > < s c r i p t s r c = " / / u n p k g . c o m / v u e - m a t e r i a l @ l a t e s t " > < / s c r i p t > 8 / 48 Example #1

9 / 48 Example #1

10 / 48 Example #1

11 / 48 Example #1 Interaction via Console

< ! D O C T Y P E h t m l > < h t m l l a n g = " e n " > < h e a d > < m e t a c h a r s e t = " u t f - 8 " > < t i t l e > V u e . J S < / t i t l e > < l i n k r e l = " s t y l e s h e e t " h r e f = " / / f o n t s . g o o g l e a p i s . c o m / c s s ? f a m i l y = R o b o t o : 3 0 0 , 4 0 0 , 5 0 0 , 7 0 0 , 4 0 0 i t a l i c " < l i n k r e l = " s t y l e s h e e t " h r e f = " / / f o n t s . g o o g l e a p i s . c o m / i c o n ? f a m i l y = M a t e r i a l + I c o n s " > < l i n k r e l = " s t y l e s h e e t " h r e f = " / / u n p k g . c o m / v u e - m a t e r i a l @ l a t e s t / d i s t / v u e - m a t e r i a l . c s s " > < s t y l e > . m a i n - c o n t e n t { p a d d i n g : 1 6 p x ; } . r e d { c o l o r : r e d ; } u l { p a d d i n g - l e f t : 0 ; } l i { l i s t - s t y l e : n o n e ; l i n e - h e i g h t : 4 0 p x ; } . m d - b u t t o n { m a r g i n - l e f t : 0 ; } < / s t y l e > < / h e a d > < b o d y > < d i v i d = " a p p " > < m d - t o o l b a r > < h 1 c l a s s = " m d - t i t l e " > L e a r n i n g V u e . J S < / h 1 > < / m d - t o o l b a r > < d i v c l a s s = " m a i n - c o n t e n t " > < m d - i n p u t - c o n t a i n e r > < l a b e l > E n t e r T o d o < / l a b e l > < m d - i n p u t v - m o d e l = " n e w T o d o " > < / m d - i n p u t > < / m d - i n p u t - c o n t a i n e r > < m d - b u t t o n c l a s s = " m d - r a i s e d m d - p r i m a r y " v - o n : c l i c k = " a d d T o d o " > A d d T o d o < / m d - b u t t o n > < u l > < l i v - f o r = " ( t o d o , i n d e x ) i n t o d o s " > < m d - b u t t o n c l a s s = " m d - i c o n - b u t t o n m d - w a r n " v - o n : c l i c k = " r e m o v e T o d o ( i n d e x ) " > < m d - i c o n > r e m o v e _ c i r c l e _ o u t l i n e { { t o d o . t e x t } } < / l i > < / u l > < / d i v > < / d i v > < s c r i p t s r c = " / / u n p k g . c o m / v u e / d i s t / v u e . j s " > < / s c r i p t > < s c r i p t s r c = " / / u n p k g . c o m / v u e - m a t e r i a l @ l a t e s t " > < / s c r i p t > < s c r i p t t y p e = " t e x t / j a v a s c r i p t " > V u e . u s e ( V u e M a t e r i a l ) 12 / 48 Example #2a

Example #2a 13 / 48

< h e a d > < m e t a c h a r s e t = " u t f - 8 " > < t i t l e > V u e . J S < / t i t l e > < l i n k r e l = " s t y l e s h e e t " h r e f = " / / f o n t s . g o o g l e a p i s . c o m / c s s ? f a m i l y = R o b o t o : 3 0 0 , 4 0 0 , 5 0 0 , 7 0 0 , 4 0 0 i t a l i c " < l i n k r e l = " s t y l e s h e e t " h r e f = " / / f o n t s . g o o g l e a p i s . c o m / i c o n ? f a m i l y = M a t e r i a l + I c o n s " > < l i n k r e l = " s t y l e s h e e t " h r e f = " / / u n p k g . c o m / v u e - m a t e r i a l @ l a t e s t / d i s t / v u e - m a t e r i a l . c s s " > < s t y l e > . m a i n - c o n t e n t { p a d d i n g : 1 6 p x ; } . r e d { c o l o r : r e d ; } u l { p a d d i n g - l e f t : 0 ; } l i { l i s t - s t y l e : n o n e ; l i n e - h e i g h t : 4 0 p x ; } . m d - b u t t o n { m a r g i n - l e f t : 0 ; } < / s t y l e > < / h e a d > < b o d y > < d i v i d = " a p p " > < m d - t o o l b a r > < h 1 c l a s s = " m d - t i t l e " > L e a r n i n g V u e . J S < / h 1 > < / m d - t o o l b a r > < d i v c l a s s = " m a i n - c o n t e n t " > < m d - i n p u t - c o n t a i n e r > < l a b e l > E n t e r T o d o < / l a b e l > < m d - i n p u t v - m o d e l = " n e w T o d o T e x t " p l a c e h o l d e r = " A d d a t o d o " > < / m d - i n p u t > < / m d - i n p u t - c o n t a i n e r > < m d - b u t t o n c l a s s = " m d - r a i s e d m d - p r i m a r y " v - o n : c l i c k = " a d d N e w T o d o " > A d d T o d o < / m d - b u t t o n > < u l > < l i i s = " t o d o - i t e m " v - f o r = " ( t o d o , i n d e x ) i n t o d o s " v - b i n d : t i t l e = " t o d o " v - o n : r e m o v e = " t o d o s . s p l i c e ( i n d e x , 1 ) " > < / l i > < / u l > < / d i v > < / d i v > < s c r i p t s r c = " / / u n p k g . c o m / v u e / d i s t / v u e . j s " > < / s c r i p t > < s c r i p t s r c = " / / u n p k g . c o m / v u e - m a t e r i a l @ l a t e s t " > < / s c r i p t > < s c r i p t t y p e = " t e x t / j a v a s c r i p t " > V u e . u s e ( V u e M a t e r i a l ) 14 / 48 Example #2b Vue Component Event

Example #2b 15 / 48

vue-cli 16 / 48

17 / 48 Install & Scaffold $ s u d o n p m i n s t a l l - g v u e - c l i $ v u e i n i t w e b p a c k - s i m p l e m y p r o j T h i s w i l l i n s t a l l V u e 2 . x v e r s i o n o f t e m p l a t e . F o r V u e 1 . x u s e : v u e i n i t w e b p a c k - s i m p l e # 1 . 0 m y p r o j ? P r o j e c t n a m e m y p r o j ? P r o j e c t d e s c r i p t i o n A V u e . j s p r o j e c t ? A u t h o r E M v u e - c l i . G e n e r a t e d " m y p r o j " . T o g e t s t a r t e d : c d m y p r o j n p m i n s t a l l n p m r u n d e v m y p r o j $ t r e e . | - - i n d e x . h t m l | - - p a c k a g e . j s o n | - - R E A D M E . m d | - - s r c | | - - A p p . v u e | | - - a s s e t s | | | - - l o g o . p n g | | - - m a i n . j s | - - w e b p a c k . c o n f i g . j s 2 d i r e c t o r i e s , 7 f i l e s

18 / 48 package.json m y p r o j $ c a t p a c k a g e . j s o n { " n a m e " : " m y p r o j " , " d e s c r i p t i o n " : " A V u e . j s p r o j e c t " , " v e r s i o n " : " 1 . 0 . 0 " , " a u t h o r " : " E M " , " p r i v a t e " : t r u e , " s c r i p t s " : { " d e v " : " c r o s s - e n v N O D E _ E N V = d e v e l o p m e n t w e b p a c k - d e v - s e r v e r - - o p e n - - i n l i n e - - h o t " b u i l d " : " c r o s s - e n v N O D E _ E N V = p r o d u c t i o n w e b p a c k - - p r o g r e s s - - h i d e - m o d u l e s " } , " d e p e n d e n c i e s " : { " v u e " : " ^ 2 . 1 . 0 " } , " d e v D e p e n d e n c i e s " : { " b a b e l - c o r e " : " ^ 6 . 0 . 0 " , " b a b e l - l o a d e r " : " ^ 6 . 0 . 0 " , " b a b e l - p r e s e t - e s 2 0 1 5 " : " ^ 6 . 0 . 0 " , " c r o s s - e n v " : " ^ 3 . 0 . 0 " , " c s s - l o a d e r " : " ^ 0 . 2 5 . 0 " , " f i l e - l o a d e r " : " ^ 0 . 9 . 0 " , " v u e - l o a d e r " : " ^ 1 0 . 0 . 0 " , " v u e - t e m p l a t e - c o m p i l e r " : " ^ 2 . 1 . 0 " , " w e b p a c k " : " ^ 2 . 1 . 0 - b e t a . 2 5 " , " w e b p a c k - d e v - s e r v e r " : " ^ 2 . 1 . 0 - b e t a . 9 " } }

19 / 48 Install & Run m y p r o j $ n p m i n s t a l l m y p r o j $ n p m r u n d e v > m y p r o j @ 1 . 0 . 0 d e v / h o m e / e m / v u e d i r / m y p r o j > c r o s s - e n v N O D E _ E N V = d e v e l o p m e n t w e b p a c k - d e v - s e r v e r - - o p e n - - i n l i n e - - h o t - - h o s t 0 . 0 P r o j e c t i s r u n n i n g a t h t t p : / / 0 . 0 . 0 . 0 : 8 0 8 0 / w e b p a c k o u t p u t i s s e r v e d f r o m / d i s t / 4 0 4 s w i l l f a l l b a c k t o / i n d e x . h t m l m y p r o j $ n p m r u n b u i l d

vue init webpack-simple 20 / 48

< h t m l l a n g = " e n " > < h e a d > < m e t a c h a r s e t = " u t f - 8 " > < t i t l e > m y p r o j < / t i t l e > < / h e a d > < b o d y > < d i v i d = " a p p " > < / d i v > < s c r i p t s r c = " / d i s t / b u i l d . j s " > < / s c r i p t > < / b o d y > < / h t m l > # A p p . v u e < t e m p l a t e > < d i v i d = " a p p " > < i m g s r c = " . / a s s e t s / l o g o . p n g " > < h 1 > { { m s g } } < / h 1 > < h 2 > E s s e n t i a l L i n k s < / h 2 > < u l > < l i > < a h r e f = " h t t p s : / / v u e j s . o r g " t a r g e t = " _ b l a n k " > C o r e D o c s < / a > < / l i > < l i > . . . < / l i > < / u l > < h 2 > E c o s y s t e m < / h 2 > < u l > < l i > < a h r e f = " h t t p : / / r o u t e r . v u e j s . o r g / " t a r g e t = " _ b l a n k " > v u e - r o u t e r < / a > < / l i > < l i > . . . < / l i > < / u l > < / d i v > < / t e m p l a t e > < s c r i p t > e x p o r t d e f a u l t { n a m e : ' a p p ' , d a t a ( ) { r e t u r n { m s g : ' W e l c o m e t o Y o u r V u e . j s A p p ' } } } < / s c r i p t > < s t y l e > # a p p { f o n t - f a m i l y : ' A v e n i r ' , H e l v e t i c a , A r i a l , s a n s - s e r i f ; 21 / 48 webpack- simple index.html App.vue main.js

22 / 48 Example #2a Recycled $ n p m i n s t a l l $ n p m i n s t a l l - - s a v e v u e - m a t e r i a l $ t r e e . | - - d i s t | | - - b u i l d . j s | - - i n d e x . h t m l | - - p a c k a g e . j s o n | - - R E A D M E . m d | - - s r c | | - - A p p . v u e | | - - c s s | | | - - a p p . c s s | | - - m a i n . j s | - - w e b p a c k . c o n f i g . j s $ n p m r u n b u i l d $ n p m r u n d e v

23 / 48 package.json webpack.config.js $ c a t p a c k a g e . j s o n { . . . " d e p e n d e n c i e s " : { " v u e " : " ^ 2 . 1 . 0 " , " v u e - m a t e r i a l " : " ^ 0 . 5 . 1 " } , . . . } $ c a t w e b p a c k . c o n f i g . j s m o d u l e : { r u l e s : [ . . . { t e s t : / \ . c s s $ / , l o a d e r : ' v u e - s t y l e - l o a d e r ! c s s - l o a d e r ' } , . . . ] , } . . .

< ! D O C T Y P E h t m l > < h t m l l a n g = " e n " > < h e a d > < m e t a c h a r s e t = " u t f - 8 " > < l i n k r e l = " s t y l e s h e e t " h r e f = " / / f o n t s . g o o g l e a p i s . c o m / c s s ? f a m i l y = R o b o t o : 3 0 0 , 4 0 0 , 5 0 0 , 7 0 0 , 4 0 0 i t a l i c " < l i n k r e l = " s t y l e s h e e t " h r e f = " / / f o n t s . g o o g l e a p i s . c o m / i c o n ? f a m i l y = M a t e r i a l + I c o n s " > < t i t l e > m y p r o j < / t i t l e > < / h e a d > < b o d y > < d i v i d = " a p p " > < / d i v > < s c r i p t s r c = " / d i s t / b u i l d . j s " > < / s c r i p t > < / b o d y > < / h t m l > # - - - - - - - - - - - - - - - - - - - . m a i n - c o n t e n t { p a d d i n g : 1 6 p x ; } . r e d { c o l o r : r e d ; } u l { p a d d i n g - l e f t : 0 ; } l i { l i s t - s t y l e : n o n e ; l i n e - h e i g h t : 4 0 p x ; } . m d - b u t t o n { m a r g i n - l e f t : 0 ; } 24 / 48 Example #2a index.html src/css/app.css

i m p o r t V u e f r o m ' v u e ' i m p o r t A p p f r o m ' . / A p p . v u e ' i m p o r t V u e M a t e r i a l f r o m ' v u e - m a t e r i a l ' i m p o r t ' v u e - m a t e r i a l / d i s t / v u e - m a t e r i a l . c s s ' i m p o r t ' . / c s s / a p p . c s s ' V u e . u s e ( V u e M a t e r i a l ) n e w V u e ( { e l : ' # a p p ' , r e n d e r : h = > h ( A p p ) } ) / * - - - - - - - - - - - - - - - - - - - - - - - - - - - * / < t e m p l a t e > < d i v i d = " a p p " > < m d - t o o l b a r > < h 1 c l a s s = " m d - t i t l e " > L e a r n i n g V u e . J S < / h 1 > < / m d - t o o l b a r > < d i v c l a s s = " m a i n - c o n t e n t " > < m d - i n p u t - c o n t a i n e r > < l a b e l > E n t e r T o d o < / l a b e l > < m d - i n p u t v - m o d e l = " n e w T o d o " > < / m d - i n p u t > < / m d - i n p u t - c o n t a i n e r > < m d - b u t t o n c l a s s = " m d - r a i s e d m d - p r i m a r y " v - o n : c l i c k = " a d d T o d o " > A d d T o d o < / m d - b u t t o n > < u l > < l i v - f o r = " ( t o d o , i n d e x ) i n t o d o s " > < m d - b u t t o n c l a s s = " m d - i c o n - b u t t o n m d - w a r n " v - o n : c l i c k = " r e m o v e T o d o ( i n d e x ) " > < m d - i c o n > r e m o v e _ c i r c l e _ o u t l i n e < / m d - i c o n > < / m d - b u t t o n > { { t o d o . t e x t } } < / l i > < / u l > < / d i v > < / d i v > < / t e m p l a t e > < s c r i p t > e x p o r t d e f a u l t { n a m e : ' a p p ' , d a t a ( ) { r e t u r n { n e w T o d o : ' ' , t o d o s : [ { t e x t : ' A d d s o m e t o d o s ' } ] } 25 / 48 Example #2a main.js src/App.vue

Example #2a (webpack) 26 / 48

Vue Components 27 / 48

28 / 48 Example #3 Example #3a Based on an Article @SitePoint by Jack Franklin Components are re-organized to a single i n d e x . v u e Example #3b Example #3a + Vue Material

29 / 48 Example #3a Structure $ t r e e . | - - b u i l d | | - - m a i n . j s | - - i n d e x . h t m l | - - p a c k a g e . j s o n | - - s r c | | - - A p p | | | - - i n d e x . v u e | | - - b u s . j s | | - - G i t h u b I n p u t | | | - - i n d e x . v u e | | - - G i t h u b O u t p u t | | | - - i n d e x . v u e | | - - G i t h u b U s e r D a t a | | | - - i n d e x . v u e | | - - m a i n . j s | - - w e b p a c k . c o n f i g . j s 6 d i r e c t o r i e s , 1 0 f i l e s

{ " n a m e " : " v u e 2 - i n t r o - c o d e " , " v e r s i o n " : " 1 . 0 . 0 " , " d e s c r i p t i o n " : " " , " m a i n " : " i n d e x . j s " , " s c r i p t s " : { " s t a r t " : " l i v e - s e r v e r " , " b u i l d " : " w e b p a c k - - w a t c h " } , " k e y w o r d s " : [ ] , " a u t h o r " : " " , " l i c e n s e " : " I S C " , " d e v D e p e n d e n c i e s " : { " b a b e l - c o r e " : " 6 . 1 8 . 2 " , " b a b e l - l o a d e r " : " 6 . 2 . 7 " , " b a b e l - p r e s e t - e s 2 0 1 5 " : " 6 . 1 8 . 0 " , " c s s - l o a d e r " : " 0 . 2 5 . 0 " , " l i v e - s e r v e r " : " 1 . 1 . 0 " , " v u e " : " 2 . 1 . 6 " , " v u e - l o a d e r " : " 1 0 . 0 . 0 " , " v u e - t e m p l a t e - c o m p i l e r " : " ^ 2 . 1 . 0 " , " w e b p a c k " : " 1 . 1 3 . 3 " } } / * - - - - - - - - - - - - - - - - - - - - - - - - - - - * / m o d u l e . e x p o r t s = { e n t r y : ' . / s r c / m a i n ' , o u t p u t : { p a t h : ' . / b u i l d ' , f i l e n a m e : ' m a i n . j s ' , } , m o d u l e : { l o a d e r s : [ { t e s t : / \ . v u e $ / , l o a d e r : ' v u e ' , } , { t e s t : / \ . j s $ / , l o a d e r : ' b a b e l ' , e x c l u d e : / n o d e _ m o d u l e s / , 30 / 48 Example #3a package.json webpack.con g.js index.html

31 / 48 i m p o r t V u e f r o m ' v u e ' i m p o r t A p p C o m p o n e n t f r o m ' . / A p p / i n d e x . v u e ' c o n s t v m = n e w V u e ( { e l : ' # a p p ' , c o m p o n e n t s : { a p p : A p p C o m p o n e n t , } , r e n d e r : h = > h ( ' a p p ' ) , } ) / * - - - - - - - - - - - - - - - - - - - - - - - - - - - * / i m p o r t V u e f r o m ' v u e ' c o n s t b u s = n e w V u e ( ) e x p o r t d e f a u l t b u s Example #3a src/main.js src/bus.js

< t e m p l a t e > < d i v > < p > E n t e r y o u r u s e r n a m e t o g e t s o m e G i t h u b s t a t s ! < / p > < g i t h u b - i n p u t > < / g i t h u b - i n p u t > < g i t h u b - o u t p u t > < / g i t h u b - o u t p u t > < / d i v > < / t e m p l a t e > < s c r i p t > i m p o r t G i t h u b I n p u t f r o m ' . . / G i t h u b I n p u t / i n d e x . v u e ' i m p o r t G i t h u b O u t p u t f r o m ' . . / G i t h u b O u t p u t / i n d e x . v u e ' e x p o r t d e f a u l t { n a m e : ' A p p ' , c o m p o n e n t s : { ' g i t h u b - i n p u t ' : G i t h u b I n p u t , ' g i t h u b - o u t p u t ' : G i t h u b O u t p u t , } , d a t a ( ) { r e t u r n { } } , } < / s c r i p t > < s t y l e s c o p e d > p { c o l o r : r e d ; } < / s t y l e > 32 / 48 Example #3a src/App/index.vue

< t e m p l a t e > < f o r m v - o n : s u b m i t . p r e v e n t = " o n S u b m i t " > < i n p u t t y p e = " t e x t " v - m o d e l = " u s e r n a m e " p l a c e h o l d e r = " E n t e r a g i t h u b u s e r n a m e h e r e " / > < b u t t o n t y p e = " s u b m i t " > G o ! < / b u t t o n > < / f o r m > < / t e m p l a t e > < s c r i p t > i m p o r t b u s f r o m ' . . / b u s ' e x p o r t d e f a u l t { n a m e : ' G i t h u b I n p u t ' , m e t h o d s : { o n S u b m i t ( e v e n t ) { i f ( t h i s . u s e r n a m e & & t h i s . u s e r n a m e ! = = ' ' ) { b u s . $ e m i t ( ' n e w - u s e r n a m e ' , t h i s . u s e r n a m e ) } } } , d a t a ( ) { r e t u r n { u s e r n a m e : ' ' , } } } < / s c r i p t > 33 / 48 Example #3a src/GithubInput/index.vue

< t e m p l a t e > < d i v > < p v - i f = " c u r r e n t U s e r n a m e = = n u l l " > E n t e r a u s e r n a m e a b o v e t o s e e t h e i r G i t h u b d a t a < / p > < p v - e l s e > B e l o w a r e t h e r e s u l t s f o r { { c u r r e n t U s e r n a m e } } : < g i t h u b - u s e r - d a t a : d a t a = " g i t h u b D a t a [ c u r r e n t U s e r n a m e ] " > < / g i t h u b - u s e r - d a t a > < / p > < / d i v > < / t e m p l a t e > < s c r i p t > i m p o r t b u s f r o m ' . . / b u s ' i m p o r t V u e f r o m ' v u e ' i m p o r t G i t h u b U s e r D a t a f r o m ' . . / G i t h u b U s e r D a t a / i n d e x . v u e ' e x p o r t d e f a u l t { n a m e : ' G i t h u b O u t p u t ' , c o m p o n e n t s : { ' g i t h u b - u s e r - d a t a ' : G i t h u b U s e r D a t a , } , c r e a t e d ( ) { b u s . $ o n ( ' n e w - u s e r n a m e ' , t h i s . o n U s e r n a m e C h a n g e ) } , d e s t r o y e d ( ) { b u s . $ o f f ( ' n e w - u s e r n a m e ' , t h i s . o n U s e r n a m e C h a n g e ) } , m e t h o d s : { o n U s e r n a m e C h a n g e ( n a m e ) { t h i s . c u r r e n t U s e r n a m e = n a m e t h i s . f e t c h G i t h u b D a t a ( n a m e ) } , f e t c h G i t h u b D a t a ( n a m e ) { i f ( t h i s . g i t h u b D a t a . h a s O w n P r o p e r t y ( n a m e ) ) r e t u r n c o n s t u r l = ` h t t p s : / / a p i . g i t h u b . c o m / u s e r s / $ { n a m e } ` f e t c h ( u r l ) . t h e n ( r = > r . j s o n ( ) ) . t h e n ( d a t a = > { V u e . s e t ( t h i s . g i t h u b D a t a , n a m e , d a t a ) c o n s o l e . l o g ( J S O N . s t r i n g i f y ( t h i s . g i t h u b D a t a ) ) } ) } } , 34 / 48 Example #3a src/GithubOutput/index.vue

35 / 48 < t e m p l a t e > < d i v v - i f = " d a t a " > < h 4 > { { d a t a . n a m e } } < / h 4 > < p > { { d a t a . c o m p a n y } } < / p > < p > N u m b e r o f r e p o s : { { d a t a . p u b l i c _ r e p o s } } < / d i v > < / t e m p l a t e > < s c r i p t > e x p o r t d e f a u l t { n a m e : ' G i t h u b U s e r D a t a ' , p r o p s : [ ' d a t a ' ] , d a t a ( ) { r e t u r n { } } } < / s c r i p t > Example #3a src/GithubUserData/index.vue

Example #3a 36 / 48

Example #3a 37 / 48

38 / 48 Example #3b Structure $ t r e e . | - - d i s t | | - - b u i l d . j s | | - - b u i l d . j s . m a p | - - i n d e x . h t m l | - - p a c k a g e . j s o n | - - s r c | | - - A p p | | | - - i n d e x . v u e | | - - b u s . j s | | - - c s s | | | - - a p p . c s s | | - - G i t h u b I n p u t | | | - - i n d e x . v u e | | - - G i t h u b O u t p u t | | | - - i n d e x . v u e | | - - G i t h u b U s e r D a t a | | | - - i n d e x . v u e | | - - m a i n . j s | - - w e b p a c k . c o n f i g . j s 7 d i r e c t o r i e s , 1 2 f i l e s

{ " n a m e " : " m y p r o j " , " d e s c r i p t i o n " : " A V u e . j s p r o j e c t " , " v e r s i o n " : " 1 . 0 . 0 " , " a u t h o r " : " E M " , " p r i v a t e " : t r u e , " s c r i p t s " : { " d e v " : " c r o s s - e n v N O D E _ E N V = d e v e l o p m e n t w e b p a c k - d e v - s e r v e r - - o p e n - - i n l i n e - - h o t - - h o s t 0 . 0 . 0 . 0 " " b u i l d " : " c r o s s - e n v N O D E _ E N V = p r o d u c t i o n w e b p a c k - - p r o g r e s s - - h i d e - m o d u l e s " } , " d e p e n d e n c i e s " : { " v u e " : " ^ 2 . 1 . 0 " , " v u e - m a t e r i a l " : " ^ 0 . 5 . 1 " } , " d e v D e p e n d e n c i e s " : { " b a b e l - c o r e " : " ^ 6 . 0 . 0 " , " b a b e l - l o a d e r " : " ^ 6 . 0 . 0 " , " b a b e l - p r e s e t - e s 2 0 1 5 " : " ^ 6 . 0 . 0 " , " c r o s s - e n v " : " ^ 3 . 0 . 0 " , " c s s - l o a d e r " : " ^ 0 . 2 5 . 0 " , " f i l e - l o a d e r " : " ^ 0 . 9 . 0 " , " v u e - l o a d e r " : " ^ 1 0 . 0 . 0 " , " v u e - t e m p l a t e - c o m p i l e r " : " ^ 2 . 1 . 0 " , " w e b p a c k " : " ^ 2 . 1 . 0 - b e t a . 2 5 " , " w e b p a c k - d e v - s e r v e r " : " ^ 2 . 1 . 0 - b e t a . 9 " } } 39 / 48 Example #3b package.json

v a r p a t h = r e q u i r e ( ' p a t h ' ) v a r w e b p a c k = r e q u i r e ( ' w e b p a c k ' ) m o d u l e . e x p o r t s = { e n t r y : ' . / s r c / m a i n . j s ' , o u t p u t : { p a t h : p a t h . r e s o l v e ( _ _ d i r n a m e , ' . / d i s t ' ) , p u b l i c P a t h : ' / d i s t / ' , f i l e n a m e : ' b u i l d . j s ' } , m o d u l e : { r u l e s : [ { t e s t : / \ . v u e $ / , l o a d e r : ' v u e - l o a d e r ' , o p t i o n s : { l o a d e r s : { / / S i n c e s a s s - l o a d e r ( w e i r d l y ) h a s S C S S a s i t s d e f a u l t p a r s e m o d e , w e m a p / / t h e " s c s s " a n d " s a s s " v a l u e s f o r t h e l a n g a t t r i b u t e t o t h e r i g h t c o n f i g s h e r e . / / o t h e r p r e p r o c e s s o r s s h o u l d w o r k o u t o f t h e b o x , n o l o a d e r c o n f i g l i k e t h i s n e s s e s s a r y . ' s c s s ' : ' v u e - s t y l e - l o a d e r ! c s s - l o a d e r ! s a s s - l o a d e r ' , ' s a s s ' : ' v u e - s t y l e - l o a d e r ! c s s - l o a d e r ! s a s s - l o a d e r ? i n d e n t e d S y n t a x ' } / / o t h e r v u e - l o a d e r o p t i o n s g o h e r e } } , { t e s t : / \ . c s s $ / , l o a d e r : ' v u e - s t y l e - l o a d e r ! c s s - l o a d e r ' } , { t e s t : / \ . j s $ / , l o a d e r : ' b a b e l - l o a d e r ' , e x c l u d e : / n o d e _ m o d u l e s / } , { t e s t : / \ . ( p n g | j p g | g i f | s v g ) $ / , l o a d e r : ' f i l e - l o a d e r ' , o p t i o n s : { n a m e : ' [ n a m e ] . [ e x t ] ? [ h a s h ] ' } 40 / 48 Example #3b webpack.con g.js

< ! D O C T Y P E h t m l > < h t m l l a n g = " e n " > < h e a d > < m e t a c h a r s e t = " u t f - 8 " > < l i n k r e l = " s t y l e s h e e t " h r e f = " / / f o n t s . g o o g l e a p i s . c o m / c s s ? f a m i l y = R o b o t o : 3 0 0 , 4 0 0 , 5 0 0 , 7 0 0 , 4 0 0 i t a l i c " < l i n k r e l = " s t y l e s h e e t " h r e f = " / / f o n t s . g o o g l e a p i s . c o m / i c o n ? f a m i l y = M a t e r i a l + I c o n s " > < t i t l e > m y p r o j < / t i t l e > < / h e a d > < b o d y > < d i v i d = " a p p " > < / d i v > < s c r i p t s r c = " / d i s t / b u i l d . j s " > < / s c r i p t > < / b o d y > < / h t m l > / * - - - - - - - - - - - - - - - - - - - - - - - - - - - * / i m p o r t V u e f r o m ' v u e ' i m p o r t A p p C o m p o n e n t f r o m ' . / A p p / i n d e x . v u e ' i m p o r t V u e M a t e r i a l f r o m ' v u e - m a t e r i a l ' i m p o r t ' v u e - m a t e r i a l / d i s t / v u e - m a t e r i a l . c s s ' i m p o r t ' . / c s s / a p p . c s s ' V u e . u s e ( V u e M a t e r i a l ) c o n s t v m = n e w V u e ( { e l : ' # a p p ' , c o m p o n e n t s : { a p p : A p p C o m p o n e n t , } , r e n d e r : h = > h ( ' a p p ' ) , } ) / * - - - - - - - - - - - - - - - - - - - - - - - - - - - * / . m a i n - c o n t e n t { p a d d i n g : 1 6 p x ; } . r e d { c o l o r : r e d ; } u l { p a d d i n g - l e f t : 0 ; } l i { l i s t - s t y l e : n o n e ; l i n e - h e i g h t : 4 0 p x ; } . m d - b u t t o n { m a r g i n - l e f t : 0 ; } 41 / 48 Example #3b index.html src/main.js src/css/app.css

< t e m p l a t e > < d i v i d = " a p p " > < m d - t o o l b a r > < h 1 c l a s s = " m d - t i t l e " > L e a r n i n g V u e . J S < / h 1 > < / m d - t o o l b a r > < d i v c l a s s = " m a i n - c o n t e n t " > < p > E n t e r y o u r u s e r n a m e t o g e t s o m e G i t h u b s t a t s ! < / p > < g i t h u b - i n p u t > < / g i t h u b - i n p u t > < g i t h u b - o u t p u t > < / g i t h u b - o u t p u t > < / d i v > < / d i v > < / t e m p l a t e > < s c r i p t > i m p o r t G i t h u b I n p u t f r o m ' . . / G i t h u b I n p u t / i n d e x . v u e ' i m p o r t G i t h u b O u t p u t f r o m ' . . / G i t h u b O u t p u t / i n d e x . v u e ' e x p o r t d e f a u l t { n a m e : ' A p p ' , c o m p o n e n t s : { ' g i t h u b - i n p u t ' : G i t h u b I n p u t , ' g i t h u b - o u t p u t ' : G i t h u b O u t p u t , } , d a t a ( ) { r e t u r n { } } , } < / s c r i p t > < s t y l e s c o p e d > p { c o l o r : r e d ; } < / s t y l e > 42 / 48 Example #3b src/App/index.vue

< t e m p l a t e > < d i v > < m d - i n p u t - c o n t a i n e r > < l a b e l > G i t h u b U s e r < / l a b e l > < m d - i n p u t v - m o d e l = " u s e r n a m e " p l a c e h o l d e r = " E n t e r a g i t h u b u s e r n a m e h e r e " > < / m d - i n p u t > < / m d - i n p u t - c o n t a i n e r > < m d - b u t t o n c l a s s = " m d - r a i s e d m d - p r i m a r y " v - o n : c l i c k = " o n S u b m i t " > G o ! < / m d - b u t t o n > < / d i v > < / t e m p l a t e > < s c r i p t > i m p o r t b u s f r o m ' . . / b u s ' e x p o r t d e f a u l t { n a m e : ' G i t h u b I n p u t ' , m e t h o d s : { o n S u b m i t ( e v e n t ) { i f ( t h i s . u s e r n a m e & & t h i s . u s e r n a m e ! = = ' ' ) { b u s . $ e m i t ( ' n e w - u s e r n a m e ' , t h i s . u s e r n a m e ) } } } , d a t a ( ) { r e t u r n { u s e r n a m e : ' ' , } } } < / s c r i p t > 43 / 48 Example #3b src/GithubInput/index.vue

Example #3b 44 / 48

Example #3b 45 / 48

Refs 46 / 48

Refs 1. vuejs.org 2. vuejs/vue: Simple yet powerful library for building modern web interfaces. 3. Comparison with Other Frameworks - vue.js 4. Introduction - Vue Material 5. Getting up and Running with the Vue.js 2.0 Framework 6. jackfranklin/vue2-demo-proj 47 / 48

48 / 48 END Eueung Mulyana https://eueung.github.io/112016/vuejs CodeLabs | Attribution-ShareAlike CC BY-SA