Friday, January 20, 2017

VUE.js nuggets in JSFiddle from simple to complex (being updated)

My first VUE , very simple:  https://jsfiddle.net/py9qodLt/2/
Second one https://jsfiddle.net/ra59u7bm/13/
Template in VUE.js https://jsfiddle.net/py9qodLt/2/
Template second example: https://jsfiddle.net/dr567qo9/

VUE Component used in real  nugget  from  "TPS Quick Bill" project  Sorry still playing with jsfiddle  :https://jsfiddle.net/rbm2u1na/49/
                      How to extend existing VUE.JS component:
Extending local VUE Component https://jsfiddle.net/rpag8L16/
Overriding  "parent" (any component) method by passing it as parameter : https://jsfiddle.net/rpag8L16/4/
Event handling nuggets:

  1. Event handling by mount() function (only from  VUE 2.0 ): https://jsfiddle.net/2rwzuqfd/25/ 
  2. Event handling passing event by v-on:increment  component tag attribute (see: doc  ) approach  https://jsfiddle.net/c9u6ytk9/ 
  3. Event handling by app,$on similar to  #1  but simplified https://jsfiddle.net/c9u6ytk9/1/

Overriding  "parent" (any component) method,  nugget from  "TPS Quick Bill" project  :
https://jsfiddle.net/rbm2u1na/54/
Useful pagination examplehttps://jsfiddle.net/taha_sh/hmapx482/ from pagination plugin: https://github.com/TahaSh/vue-paginate
Useful Scheduler component . I'm working on it to make it more complex and more extendable . It should be transformed  to Appointment board:
https://jsfiddle.net/fycxhqpf/ .
This was really tough nugget. After 3 hours staring into miracle of  styling from Jayzou.  Thank you to mister Jayzou 谢谢   I want to make completely functional multi-user appointment board Now it will be easy to add "Add appointment " link on every cell of schedule  (in future I can add condition which prevent to draw it if this time frame is busy.

  1. Step 1. This nugget after adding link "Add appointment": https://jsfiddle.net/fycxhqpf/1/
  2. Step 2. This nugget after adding 'hide/show appointments' : https://jsfiddle.net/fycxhqpf/5/
  3. This nugget after adding  'Add appointments' functionality :https://jsfiddle.net/ph5ao2f6/

No comments: