![Vue Data
- v-model directive allows two-way binding on form elements
Vue.component('demo', {
template: ‘#demo-template',
data: function () {
return {
fname: 'Holly',
lname: 'Schinsky',
isDisabled: false,
items: ['Milk','Bread','Cereal','Peanut Butter'],
counter: 0
}
},
- When data items change, the view ‘reacts’ automatically to them
- Data properties are only reactive if they existed when the instance was
created
<input type="text" v-model="message"/>](https://image.slidesharecdn.com/vue-preso-certified-fresh-171006161415/85/The-Point-of-Vue-Intro-to-Vue-js-15-320.jpg)
![Props
Vue.component('hello', {
template: '#hello-template',
props: ['message'],
data: function () {
return {
fname: 'Holly',
lname: 'Schinsky',
}
}
})
<hello v-bind:message=“message"></hello>
<h1>{{ message }}</h1>
hello component
uses
parent component
passes](https://image.slidesharecdn.com/vue-preso-certified-fresh-171006161415/85/The-Point-of-Vue-Intro-to-Vue-js-16-320.jpg)
![Angular vs Vue
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent { name = 'Angular'; }
var helloApp =
angular.module("helloApp", []);
helloApp.controller("HelloCtrl",
function($scope) {
$scope.name = "Calvin Hobbes";
});
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Angular 1
Angular 2
Vue](https://image.slidesharecdn.com/vue-preso-certified-fresh-171006161415/85/The-Point-of-Vue-Intro-to-Vue-js-26-320.jpg)
The Point of Vue - Intro to Vue.js
- 1. The Point of Exploring JavaScript Frameworks
- 4. Creator - Evan You Initial release in Feb 2014 Previously worked at Google and Meteor Works on Vue full time Funded by the Patreon campaign “…what if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved?”
- 5. Why Vue? Approachable Scalable … makes developers happy :) Productive
- 7. Vue Features Reactive Interfaces Declarative Rendering Data Binding Directives Template Logic Components Event Handling Computed Properties CSS Transitions and Animations Filters See vuejs.org for full details
- 8. Vue Basics Apps are made up of nested and reusable components <div id="app"> <app-nav></app-nav> <app-view> <app-sidebar></app-sidebar> <app-content></app-content> </app-view> </div>
- 9. Simple Vue Example var demo = new Vue({ el: '#demo', data: { message: ‘Vue is the best!’ } }) <div id="demo"> <p>{{ message }}</p> <input v-model="message"> </div>
- 12. Component Registration Vue.component('hello', { template: '#hello-template', // ... }) new Vue({ el: '#app', // ... } Global var Goodbye = { template: '<div> Goodbye World!</div>' } Vue.component('hello', { template: '#hello-template', components: { 'Goodbye': Goodbye } }); Local import Hello from './components/Hello' export default { name: 'app', components: { Hello }, // ... } Local by Module Defined before root app instance
- 14. Templates <h1>Msg: {{ msg.split('').reverse().join('') }}</h1> Support JavaScript expressions <h1>Message: {{ msg }}</h1> Mustache-like syntax for basic text interpolation (like Angular) Use v-bind directive (or : prefix) within an HTML attribute <button :disabled="isButtonDisabled">Go</button> <div v-bind:id="dynamicId"></div>
- 15. Vue Data - v-model directive allows two-way binding on form elements Vue.component('demo', { template: ‘#demo-template', data: function () { return { fname: 'Holly', lname: 'Schinsky', isDisabled: false, items: ['Milk','Bread','Cereal','Peanut Butter'], counter: 0 } }, - When data items change, the view ‘reacts’ automatically to them - Data properties are only reactive if they existed when the instance was created <input type="text" v-model="message"/>
- 16. Props Vue.component('hello', { template: '#hello-template', props: ['message'], data: function () { return { fname: 'Holly', lname: 'Schinsky', } } }) <hello v-bind:message=“message"></hello> <h1>{{ message }}</h1> hello component uses parent component passes
- 17. Events <button @click="addToCount">Add 1</button> <button v-on:click="addMore(4, $event)">Add 4</button> Use v-on or @ prefix (shorthand) <input v-on:keyup.enter="submit"> <a v-on:click.stop="doThis"></a> Modifiers restrict handling to certain specific events
- 18. 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 <input type="text" v-model="message"/> <li v-for="item in items"> {{ item }} </li> <button v-on:click="counter+=1">Add 1</button> <textarea v-bind:disabled='isDisabled' v-bind:class='{ disabled: isDisabled }'>{{ taVal }} </textarea> <h1 v-if="isWinner">Winner winner chicken dinner!</h1> <h1 v-else>Sorry about your luck</h1>
- 19. Filters <!-- in text interpolation --> {{ message | capitalize }} <!-- in v-bind --> <div v-bind:id="rawId | formatId"></div> Use the pipe | symbol to add a filter function: Define filter function in instance options: new Vue({ // … filters: { capitalize: function (value) { if (!value) return '' return value.toString().toUpperCase(); } } })
- 20. Computed Properties - Computed properties are cached based on their dependencies. - Use for more complex logic to keep it out of your HTML or for things that don’t require reactive properties Vue.component('demo', { template: ‘#demo-template', //.. computed: { fullName: function () { return this.fname + ' ' + this.lname; } }
- 21. new Vue({ data: { a: 1 }, created: function () { console.log('a is: ' + this.a) } }) // => "a is: 1" created(), mounted(), updated(), destroyed() etc Lifecycle Hooks Run code at different stages of a Vue component lifecycle https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks
- 24. Framework Similarities - Vue and Angular - Similar templates - Use of directives syntax (ie: {{ }} and v-if to ng-if etc) - Some automatic data binding - Vue and React - Uses a Virtual DOM - View layer focused - Reactive components
- 25. Framework Differences - Vue vs Angular - Not an opinionated stack, core focus is on the View layer - Data binding in a one way data flow from parent to child - Much smaller file size (20KB min+gzip) - No dirty checking - Works without additional tooling - Vue vs React - Gives you a visually scannable template with encapsulated logic - Templates vs JSX (less CPU) - Faster ramp up vs less intuitive (JSX) - Less boilerplate code needed in Vue - Vue works out of the box (without a build system)
- 26. Angular vs Vue import { Component } from '@angular/core'; @Component ({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>`, }) export class AppComponent { name = 'Angular'; } var helloApp = angular.module("helloApp", []); helloApp.controller("HelloCtrl", function($scope) { $scope.name = "Calvin Hobbes"; }); <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) Angular 1 Angular 2 Vue
- 27. React vs Vue var HelloMessage = React.createClass({ render: function () { return <h1>Hello {this.props.message}!</h1>; } }); ReactDOM.render(<HelloMessage message="World" />, document.getElementById('root')); <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) React Vue
- 28. Vue and Mobile Small file size of Vue.js lends itself well to mobile Several UI libraries available with bindings Framework7 - https://framework7.io/vue/ Onsen UI - https://onsen.io/vue/ Get started quickly using PhoneGap starter project templates - https://github.com/phonegap/phonegap-app- stockpile
- 29. vuex - state management - https://vuex.vuejs.org vue-router - routing between views in your SPA - https://router.vuejs.org/en/ axios - HTTP Request library - https://github.com/ axios/axios Popular Add-ons