Vue.js is a JavaScript framework for building user interfaces that offers speed, simplicity, and an MIT license. It uses a virtual DOM for faster DOM manipulation compared to other frameworks. Templates in Vue.js use plain HTML with data bindings and directives. Common directives include v-for, v-if, and v-model. Components, routing, state management with Vuex, and transitions are also part of Vue.js and allow building large scale applications. Vue.js provides an alternative to frameworks like Angular and React with a simpler API.
7. SIMPLICITY
• Templating
• Good ol’ HTML
• Minimize the amount of code you write
• Insulate you from changes
• Declarative Bindings
• Bridge between UI and data
• Removes the burden of managing the DOM
• Approachable
13. DIRECTIVES
• Tell Vue to do something with a
DOM element
• You can create your own custom
directives!
• Consider components first though
Out of the Box
v-cloak v-for v-pre
v-if v-text v-bind
v-else-if v-html v-on
v-else v-model v-once
v-show
14. MODIFIERS
• A way to filter an event
• Enforce separation between UI and
logic
Out of the Box
prevent enter up
capture tab down
stop delete left
self escape right
once space alt
left middle ctrl
meta shift trim
<input type="search"
v-model.trim="query"
v-on:keypress.enter.prevent=“runQuery"
v-on:keyup.ctrl.enter=“runInNewWindow"
/>
Example
15. COMPONENTS
• Building blocks for
apps
• Can be local or global
• Can be in a single-file
Vue.component('rating', {
template: '<ul class="list-inline">' +
'<li v-for="i in max">' +
'<i v-bind:class="{'open-star':(i>value),
'star':(i<=value) }">{{ i }}</i></li>' +
'</ul>’,
data: function() {
return { max: 5 };
},
props: {
value: {
type: Number,
default: 0
}
}
});
16. ROUTING
• Routes map URLs to
templates
• Not “part” of Vue
• Officially supported library:
vue-router
• Works with third-party
routers:
• Page.js
• Director
/
/customers
/customers/12345 /customers/tickets
/orders
/orders/12345 /orders/shipped
21. FEATURES
• Templates
• Directives
• Modifiers
• Components
• Routing
• State Management
• Transitions
Covered in my Vue.js: Getting Started Training Course
Covered in my Vue.js: Going Deeper Course
22. THE NEW JQUERY
“Vue provides an answer to the issue of JavaScript
fatigue, and it is a worthy successor to the legacy of
jQuery.”
Peter Jang – Dean of Instruction at Actualize
source: http://anyonecanlearntocode.com/blog_posts/why-vue-not-react-is-the-new-jquery