Downloaded 438 times
Uploaded byTechMagic
Intro to vue.js
Vue.js is a lightweight framework for building user interfaces, focused on the view layer and easily integrates with other libraries. Key features include its simplicity, reactivity, and component-based architecture, with a current version of 2.4.1. The document also outlines installation methods, essential directives, components, and additional resources for further learning.
More Related Content
![[DevDay2019] Vue.js - By Nguyen Viet Cuong, Engineer at MTI Technology](https://cdn.slidesharecdn.com/ss_thumbnails/cuongnguyenviet-devdayslide-190408081904-thumbnail.jpg?width=640&height=640&fit=bounds)
Intro to vue.js
- 1.
- 2. What is Vue.js? ●Framework for building user interfaces ● Focused on the view layer ● Easily integrate with other libraries ● Current version: 2.4.1
- 3. Key features ● Simple(lowbarrier of entry) ● Lightweight (~24kb min+gzip) ● Fast ● Reactive ● Component based
- 4. History Creator: Evan You -ex employee of Google, and Meteor Dev Group First commit: Jul 2013 First release: Feb 2014 Discovered by Laravel Apr 2015 Release of second(current) version: Sep 2016
- 5. Ghost in theShell Evangelion
- 6. How it relatesto Vue.js?
- 7.
- 10. 2016 JavaScript FrameworksRising Stars
- 11.
- 12. Vue can also! React Components JSX Fast Flexiblearchitecture Testable components Angular Components First-class TypeScript support Full offering - officially supported router and state management, among others
- 13. Installing ● CDN ● NPM ●Bower ● CLI
- 14. Ecosystem Ajax github.com/vuejs/vue-resource ||github.com/mzabriskie/axios Routing github.com/vuejs/vue-router Flux-like State github.com/vuejs/vuex CLI Generator github.com/vuejs/vue-cli Linting github.com/vuejs/vue-validator ... ...
- 15.
- 16.
- 17. Directives ● v-text ● v-html ●v-show ● v-if ● v-else ● v-else-if ● v-for ● v-on ● v-bind ● v-model ● v-pre ● v-cloak ● v-once https://vuejs.org/v2/api/#Directives
- 18.
- 19.
- 20.
- 21.
- 22. Event modifiers ● .stop ●.prevent ● .capture ● .self ● .once https://vuejs.org/v2/guide/events.html#Event-Modifiers
- 23. Keys modifiers ● .enter ●.tab ● .delete (captures both “Delete” and “Backspace” keys) ● .esc ● .space ● .up ● .down ● .left ● .right ● .ctrl ● .alt ● .shift ● .meta Mouse modifiers ● .left ● .right ● .middle https://vuejs.org/v2/guide/events.html#Modifier-Keys
- 24.
- 25.
- 26. Example of usinghooks https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
- 27.
- 28.
- 29.
- 30. Fast start withCLI ● $ npm install -g vue-cli ● $ vue init <template-name> <project-name>
- 31.
- 32. What About Separationof Concerns?
- 33.
- 34.
- 35. There are alot more in Vue ● custom directives, ● mixins, ● slots, ● events bus, ● animation, ● dynamic components ● vue-router, router guards ● vue-resource, interceptors ● vuex ● server side rendering(nuxt.js) ● ...
- 36. Cons ● Relatively smallcommunity ● Is not backed by giant company ● Relatively small amount of resources
- 37. Resources https://vuejs.org https://github.com/vuejs/awesome-vue https://github.com/vuejs/vue-cli https://css-tricks.com/guides/vue/ https://www.udemy.com/vuejs-2-the-complete-guide/ https://github.com/vuejs/vue-router https://github.com/vuejs/vuex https://nuxtjs.org/ https://vuejs-tips.github.io/cheatsheet/ https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd // Simple bookCRUD made with Vue.js https://github.com/Graniron/tm-vue-library
- 39.