An introduction to Vue.js
Download as PPTX, PDF1 like410 views
The document is an introduction to Vue.js by Aman K Mishra, detailing its features, advantages, and comparison with other frameworks like Angular and React. It discusses Vue's popularity, minimal code structure, template syntax, lifecycle hooks, components, and data flow, emphasizing its ease of use and low learning curve for developers. It also mentions the ecosystem surrounding Vue, including state management solutions and community resources.
![www.tothenew.com
Passing data to Component
Vue.component('child', {
// declare the props
props: ['myMessage'],
// just like data, the prop can be used inside templates
// and is also made available in the vm as this.message
template: '<span>{{ myMessage }}</span>'
})
<child my-message="hello!"></child>](https://image.slidesharecdn.com/vue-170925053137/85/An-introduction-to-Vue-js-26-320.jpg)
![www.tothenew.com
One way data flow
Our learning from react, data should flow top to bottom. It makes
application less error prone
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
Inside a Vue component, we achieve it as :](https://image.slidesharecdn.com/vue-170925053137/85/An-introduction-to-Vue-js-27-320.jpg)
![www.tothenew.com
Prop Validation
Vue.component('example', {
props: {
propA: Number, // basic type check (`null` means accept any type)
propB: [String, Number], // multiple possible types
propC: { // a required string
type: String, required: true
},
propD: { // a number with default value
type: Number, default: 100
},
propF: { // custom validator function
validator: function (value) {
return value > 10
}
}
}
})](https://image.slidesharecdn.com/vue-170925053137/85/An-introduction-to-Vue-js-29-320.jpg)
An introduction to Vue.js
- 1. www.tothenew.com Introduction to Vue.js Aman K Mishra 7 September, 2017
- 2. www.tothenew.com This is me A learner A NEWER (Working at TO THE NEW) for almost 3 years now Total experience : 5 Years ( AngularJs - 1, Groovy and Grails - 2, Java -2) Other self learnt skills : Angular 2, React.js, Node.js, MondoDB Associate Lead - Technology
- 3. www.tothenew.com How does minimal code look like <script src="https://unpkg.com/vue"></script> <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
- 4. www.tothenew.com About Vue Vue was created by Evan You after working for Meteor dev group and Google Originally released in February 2014 Latest stable release : 2.4.2 Backed by Laravel and Alibaba Evan you
- 5. www.tothenew.com Who are using it in production Here you can find some of people talking about their experience on using Vue.js Here you can find detailed list of project using Vuejs
- 6. www.tothenew.com Let’s compare : There will be blood
- 7. www.tothenew.com Popularity in 2016 Vue.JS project got more than 25,000 stars on Github last year, it means 72 stars per day, it's more than what any other framework got, including React and Angular.
- 8. www.tothenew.com Size comparison Approximation of gzipped versions
- 12. www.tothenew.com Let’s see some code now
- 13. www.tothenew.com Template Syntax <span>Message: {{ msg }}</span> <span v-once> This will never change: {{ msg }} </span> <div v-html="rawHtml"></div> <div v-bind:id="dynamicId"></div> {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div> var app = new Vue({ el: '#app-2', data: { message: 'You loaded this page on ' + new Date().toLocaleString() } })
- 14. www.tothenew.com Template Syntax : Cont... <p v-if="seen">Now you see me</p> <a v-on:click="doSomething"> <form v-on:submit.prevent="onSubmit"></form> <!-- full syntax --> <a v-bind:href="url"></a> <!-- shorthand --> <a :href="url"></a> <!-- full syntax --> <a v-on:click="doSomething"></a> <!-- shorthand --> <a @click="doSomething"></a> Values and methods defined in Vue instance
- 15. www.tothenew.com The Vue Instance var data = { a: 1 }; // Our data object // The object is added to a Vue instance var vm = new Vue({ data: data }) // These reference the same object! vm.a === data.a // => true // Setting the property on the instance also affects the original data vm.a = 2 data.a // => 2 // ... and vice-versa data.a = 3 vm.a // => 3
- 16. www.tothenew.com The Vue Instance : Cont... new Vue({ data: { a: 1 }, created: function () { // `this` points to the vue instance console.log('a is: ' + this.a) } }) Are you sure about scope of “this” here? Other life cycle hooks : ● beforeCreate ● created ● beforeMount ● mounted ● beforeDestroy ● Destroyed Life cycle event
- 17. www.tothenew.com Class and Style binding <div v-bind:class="{ active: isActive }"></div> <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> data: { isActive: true, hasError: false } <div v-bind:class="classObject"></div> data: { classObject: { active: true, 'text-danger': false } } <div v-bind:style="styleObject"></div> data: { styleObject: { color: 'red', fontSize: '13px' } }
- 18. www.tothenew.com Filters <!-- in mustaches --> {{ message | capitalize }} <!-- in v-bind --> <div v-bind:id="rawId | formatId"></div> new Vue({ // ... filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) {{ message | filterA | filterB }} Of course, Filter can be chained Filters are JavaScript functions, therefore they can take arguments: {{ message | filterA('arg1', arg2) }}
- 19. www.tothenew.com Directives ENOUGH. What’s New? Check this link for directives
- 20. www.tothenew.com Conditional Rendering <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> <h1 v-if="user"> {{user.username}}</h1> <h1 v-if="user"> {{user.firstName}}</h1> <h1 v-if="user"> {{user.lastName}}</h1> <div v-if=”user”> <span> {{user.username}}</span> <span> {{user.firstName}}</span> <span> {{user.lastName}}</span> </div> Code duplicacy You just increased DOM element count. What if it’s in loop? And this might break css styling also. <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> An invisible wrapper. The final rendered result will not include the <template> element. Angular way to do this
- 21. www.tothenew.com Conditional Reusable elements <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address"> </template> Vue tries to render elements as efficiently as possible, often re-using them instead of rendering from scratch. Beyond helping make Vue very fast, this can have some useful advantages. For example, if you allow users to toggle between multiple login types: Then switching the loginType in the code above will not erase what the user has already entered. Since both templates use the same elements, the <input> is not replaced - just its placeholder If you don’t need this, just use attribute “key” key="username" key="email"
- 22. www.tothenew.com Computed property <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () { return this.message.split('').reverse().join('') } } }) I don’t need computed property. I can do it like this. <p> Reversed message: "{{ reverseMessage() }}" </p> // in vue instance methods: { reverseMessage: function () { return this.message.split('').reverse().join('') } } Caching
- 23. www.tothenew.com What else? There are many more. Obviously, there are design level changes to overcome the problem of AngularJs like watchers and digest cycle
- 24. www.tothenew.com How do you feel so far.. So close to AngularJs and Angular2 . Learning curve is very low
- 25. www.tothenew.com Components - A smallest component <div id="example"> <my-component></my-component> </div> // register Vue.component('my-component', { template: '<div>A custom component!</div>' }) // create a root instance new Vue({ el: '#example' })
- 26. www.tothenew.com Passing data to Component Vue.component('child', { // declare the props props: ['myMessage'], // just like data, the prop can be used inside templates // and is also made available in the vm as this.message template: '<span>{{ myMessage }}</span>' }) <child my-message="hello!"></child>
- 27. www.tothenew.com One way data flow Our learning from react, data should flow top to bottom. It makes application less error prone props: ['initialCounter'], data: function () { return { counter: this.initialCounter } } Inside a Vue component, we achieve it as :
- 28. www.tothenew.com Hey, I could validate props in React
- 29. www.tothenew.com Prop Validation Vue.component('example', { props: { propA: Number, // basic type check (`null` means accept any type) propB: [String, Number], // multiple possible types propC: { // a required string type: String, required: true }, propD: { // a number with default value type: Number, default: 100 }, propF: { // custom validator function validator: function (value) { return value > 10 } } } })
- 30. www.tothenew.com A component with event <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:increment="incrementTotal"> </button-counter> <button-counter v-on:increment="incrementTotal"> </button-counter> </div> Vue.component('button-counter', { template: '<button v-on:click="incrementCounter">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { incrementCounter: function () { this.counter += 1 this.$emit('increment') } }, }) new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: function () { this.total += 1 } } })
- 31. www.tothenew.com Render function and JSX If you are not satisfied with templates, you can use Render function and JSX also. Check official documentation for more detail on this
- 32. www.tothenew.com Ecosystem Vue Router Vuex : State management for Vue Redux can also be integrated Let’s explore more, visit official documentation Vue-devtool vue-cli weex : For native app. Maintained by Alibaba
- 33. www.tothenew.com !(Why should you go for Vue.js) ● Not yet used for large applications like React ? ● If you stick to your current framework, you can utilize learning of your past projects the most ● You can also use a good %age of codebase from previous project
- 34. www.tothenew.com Why should you go for Vue.js Easy to kick start. Learning curve is very low as most of concepts are reused from Angular and React No need to learn ES6 and JSX as in case of React Faster in comparison to other libraries Also, smaller in size It is expected to be more popular in 2017 and coming years Easy integration with other popular libraries and axios, redux etc. Ecosystem is also good. Community has got everything to get you going. It brings best features of Angular and React together