tweak twig with awesome vue.js by tejomay saha cdn for includung vue.js into you dom easily (makes...
TRANSCRIPT
![Page 1: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/1.jpg)
Tweak twig with awesome
Vue.jsby Tejomay Saha
![Page 2: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/2.jpg)
Tweak twig with awesome
Vue.jsby Tejomay Saha
![Page 3: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/3.jpg)
Hello!I am Tejomay Saha@tejomayonline
I am here as I love learning and expressing new
techs stuffs to ease coding.
![Page 4: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/4.jpg)
Working at Srijan Technologies pvt. Ltd.
As a Full Stack Developer
![Page 5: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/5.jpg)
1.What is vue?
![Page 6: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/6.jpg)
“Vue.js (pronounced /vju /, like view) is a
library for building interactive web interfaces
![Page 7: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/7.jpg)
Why using vue.js?
○ Reactive data binding
○ Composable view component
○ Mix and match small library
○ Progressive framework! (router, resource/ajax stuff, state management and many more)
○ Simple API (easy to learn)
○ Lightweight
○ Rapid grow community
![Page 8: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/8.jpg)
Vue based on MVVMWhat is MVVM and reactive?
![Page 9: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/9.jpg)
Vue flow of MVVM
![Page 10: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/10.jpg)
![Page 11: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/11.jpg)
Start with vue
Use <script src="https://unpkg.com/vue"></script>
Cdn for includung vue.js into you dom easily
<div id="app"> (makes you dom bind to
vue with script )
………………..
</div> <script>
new Vue({
el: '#app'})
</script>
.
![Page 12: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/12.jpg)
Reactive vue(jsfiddle link)
1.tree dynamic view(https://goo.gl/Qrt44N)
2.markdown(https://goo.gl/yi57Hk)
3.latest github commits(https://goo.gl/mKyx4H)
4.grid component(https://goo.gl/vMgBT1)
5.modal component(https://goo.gl/4QXYEU)
6.todos(https://goo.gl/7AMCYW)
![Page 13: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/13.jpg)
Vue v/s React v/s
Angular★ Performance★ Learning Curve★ Purpose★ Architecture★ Scaling up/down★ Ease factor
![Page 14: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/14.jpg)
Every component is responsible for
managing a piece of DOM
Nav
Content
Item
Sidebar
![Page 15: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/15.jpg)
The entire UI can be abstracted into
a tree of components
![Page 16: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/16.jpg)
Custom reusable nested vue components
<fab-button> </fab-button><tabs> <inner-tab></inner-tab> <inner-tab></inner-tab> <inner-tab></inner-tab></tabs>
![Page 17: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/17.jpg)
large scale management with vue
![Page 18: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/18.jpg)
Vue code flow
● Imported as a ES2015 module (thus easily testable)
● Collocation of Template, Logic & Style
● Just use what you already know: HTML, CSS & JavaScript
● Embedded pre-processor support: seamlessly use Babel, SASS or even Pug in the same file
● Component-scoped CSS with a single attribute
![Page 19: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/19.jpg)
Vue tools & extras
● Vue-cli for command line first development.
● Official chrome dev tools for vue support.
● Awesome vue.js community.● Built in Laravel support from Laravel
5.3.● Tiny learning curve.● Based on between react virtual dom
and angular data binding.● Awesome for building ui
components,animations.● 2 way data binding looks like realtime.● etc.
![Page 20: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/20.jpg)
Vue with Drupal8/7
★ We can easily blend vue.js with twig templating with the cdn or else
★ Using npm dependencies.★★ We can use it in .tpl files
directly.★★ We can use in custom module
development★★ Creating Reactive theme with
vue.
![Page 21: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/21.jpg)
Sources
● Google● Evan you’s slides.● Muhammad Rizki Rijal ● Toshiro Shimizu ● etc.
![Page 22: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/22.jpg)
Thanks!Any questions?You can find me at @tejomayonline
![Page 23: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/23.jpg)
Hello!I am Tejomay Saha@tejomayonline
I am here as I love learning and expressing new
techs stuffs to ease coding.
![Page 24: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/24.jpg)
Working at Srijan Technologies pvt. Ltd.
As a Full Stack Developer
![Page 25: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/25.jpg)
1.What is vue?
![Page 26: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/26.jpg)
“Vue.js (pronounced /vju /, like view) is a
library for building interactive web interfaces
![Page 27: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/27.jpg)
Why using vue.js?
○ Reactive data binding
○ Composable view component
○ Mix and match small library
○ Progressive framework! (router, resource/ajax stuff, state management and many more)
○ Simple API (easy to learn)
○ Lightweight
○ Rapid grow community
![Page 28: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/28.jpg)
Vue based on MVVMWhat is MVVM and reactive?
![Page 29: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/29.jpg)
Vue flow of MVVM
![Page 30: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/30.jpg)
![Page 31: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/31.jpg)
Start with vue
Use <script src="https://unpkg.com/vue"></script>
Cdn for includung vue.js into you dom easily
<div id="app"> (makes you dom bind to
vue with script )
………………..
</div> <script>
new Vue({
el: '#app'})
</script>
.
![Page 32: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/32.jpg)
Reactive vue(jsfiddle link)
1.tree dynamic view(https://goo.gl/Qrt44N)
2.markdown(https://goo.gl/yi57Hk)
3.latest github commits(https://goo.gl/mKyx4H)
4.grid component(https://goo.gl/vMgBT1)
5.modal component(https://goo.gl/4QXYEU)
6.todos(https://goo.gl/7AMCYW)
![Page 33: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/33.jpg)
Vue v/s React v/s
Angular★ Performance★ Learning Curve★ Purpose★ Architecture★ Scaling up/down★ Ease factor
![Page 34: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/34.jpg)
Every component is responsible for
managing a piece of DOM
Nav
Content
Item
Sidebar
![Page 35: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/35.jpg)
The entire UI can be abstracted into
a tree of components
![Page 36: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/36.jpg)
Custom reusable nested vue components
<fab-button> </fab-button><tabs> <inner-tab></inner-tab> <inner-tab></inner-tab> <inner-tab></inner-tab></tabs>
![Page 37: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/37.jpg)
large scale management with vue
![Page 38: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/38.jpg)
Vue code flow
● Imported as a ES2015 module (thus easily testable)
● Collocation of Template, Logic & Style
● Just use what you already know: HTML, CSS & JavaScript
● Embedded pre-processor support: seamlessly use Babel, SASS or even Pug in the same file
● Component-scoped CSS with a single attribute
![Page 39: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/39.jpg)
Vue tools & extras
● Vue-cli for command line first development.
● Official chrome dev tools for vue support.
● Awesome vue.js community.● Built in Laravel support from Laravel
5.3.● Tiny learning curve.● Based on between react virtual dom
and angular data binding.● Awesome for building ui
components,animations.● 2 way data binding looks like realtime.● etc.
![Page 40: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/40.jpg)
Vue with Drupal8/7
★ We can easily blend vue.js with twig templating with the cdn or else
★ Using npm dependencies.★★ We can use it in .tpl files
directly.★★ We can use in custom module
development★★ Creating Reactive theme with
vue.
![Page 41: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/41.jpg)
Sources
● Google● Evan you’s slides.● Muhammad Rizki Rijal ● Toshiro Shimizu ● etc.
![Page 42: Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………](https://reader031.vdocuments.site/reader031/viewer/2022021821/5b008e3a7f8b9a89598cca9e/html5/thumbnails/42.jpg)
Thanks!Any questions?You can find me at @tejomayonline