Vue JS overview
by Dmytro Golysh
What will we do today? 🗓
- A lot of code 💻
- Vue 😍
- How it works
- Ask questions 🤔
- Deep insights
What it a Vue? 👀
What it a Vue? 👀
Boilerplates - @vue/cli 🛠️
Boilerplates - @vue/cli 🛠️
Architecture 🧐
Entry point
Architecture 🧐
How does component look like? 🧐
Architecture 🧐
Directives
Better for low-level Dom operations
Architecture 🧐
Mixins
Architecture 🧐
Filters
Apply text formatting
Can be local (for one component) or global for the whole app
Architecture 🧐
Plugins
- Add some global methods or properties
- Add one or more global assets: directives/filters/transitions etc.
- Add some component options by global mixin.
- Add some Vue instance methods by attaching them to Vue.prototype.
- A library that provides an API of its own
Architecture 🧐
Other
And of course, you can you es6/typescript classes to split functionality into different services
Syntax 🧐
Single File Components
Syntax 🧐
Template Syntax
Syntax 🧐
Additional
Syntax 🧐
Syntax 🧐
Properties
Syntax 🧐
Properties
Syntax 🧐
Properties
Syntax 🧐
Syntax 🧐
Syntax 🧐
Rendering 🌆
Rendering 🌆
Render function
JSX
Rendering 🌆
Render function
All Vue templates compiles into render function
Example
Forms
State management
And will emit change
Where child will use props to get input data
State management
A child needs to do
State management
Routing
Routing
Routing
Lazy-loaded
Routing
Routing
Routing
Auth example
Routing
Auth example
Testing
Jest
Testing
Jest
Testing
Jest
Testing
Snapshot Testing
Testing
Vue Test Utils
http
No default HTTP client
Axios
Pros / Cons
Additional features
Additional features
Bonus +
Thanks
Vue JS overview
By Dmytro Golysh
Vue JS overview
For JSMP 2019
