Basics of Vue js to get you started. The tutorial is located at https://github.com/parespat/try_vue

1. Vue.js
A primer

2. What we will go
through..
What is Vue?
Life Cycle events
Components
Parent-child components
Data vs props vs computed vs methods
$root $ref $emit @ :
nextTick()
Tools
Npm : package management
Babel : transpiling
Webpack : packaging
Chrome plugin : debugging
Vue cli : scaffolding https://github.com/parespat/try_vue

3. What is Vue?
• Approachable :
Already know javascript,
html, css… start using vue!
• Versatile : Use it either
as a library or as a
framework
• Performant : small
size, fast virtual dom,
minimal optimization
efforts
Progressive Javascript
Framework (?)
§ In an existing
application, we can plug
view into just one part of
the application.
§ If we need to build more
business logic on client
end, vue has eco system
that we can use to scale :
(Core + Vuex + Vue-Router)

4. Lifecyclediagram

5. Lifecyclediagram

6. Lifecyclediagram

7. Components
- Reusable Vue instances with a name.
- Data can be passed to child components
using props
- Every component must have a single root
element
- Data can be passed to parent using events.
- Vue components are very similar to Custom
Elements, which are part of the Web
Components Spec

8. Data vs props vs computed vs methods
‘data’ must be a function so that each instance can
maintain an independent copy of returned data object
‘props’ are custom attributes that we register on a
component. The value passed to a prop attribute becomes
a property on the component. Hence they are used to
pass data to components.
‘methods’ are ways to make our page interactive.
’computed’ : expressions are convenient, but for
complex logic they are not maintainable. Use computed
property for it.
Computed properties are cached based on their
dependencies. It only re-evaluate when some of its
dependencies have changed.

9. $root, $ref, $emit, @, :
$root : The root Vue instance of the current component
tree.
Any data or method defined in the vue instance is availabe
using $root from a component under it.
We can provide ref attribute to any component and access it
from container using $ref. Thus $ref returns an object of
DOM elements and component instances, registered with ref
attributes.
$emit: emits an event, that the even handler can listen to
and act upon.
@ : short form for v-on, registering an event.
: short for v-bind, binding the values to the attributes.

10. nextTick()
Defer the callback to be executed after the
next DOM update cycle.
Use it immediately after you’ve changed some
data to wait for the DOM update.

11. @squeezedthought
Thank You
Tutorial code at:
https://github.com/parespat/try_vue
https://vuejs.org/