The document discusses using Vue.js to reduce complexity in web development. It introduces some key concepts in Vue.js like data binding with v-model, conditional rendering with v-if, listing data with v-for, handling events with v-on, and conditional rendering with v-if and v-show. It also provides examples of how to install Vue.js via npm, bower or CDN, and basic usage with el, data, methods. Towards the end, it mentions running a demo customer management app using Vue and Rails.

1. http://jyaasa.comCopyright 2017. Jyaasa Technologies.

2. http://jyaasa.comCopyright 2017. Jyaasa Technologies.

3. http://jyaasa.comCopyright 2017. Jyaasa Technologies.

4. http://jyaasa.comCopyright 2017. Jyaasa Technologies.

5. http://jyaasa.comCopyright 2017. Jyaasa Technologies.
Renaming the element or changing the html structure will break the code
Data Driven Approach is problematic
Source Vue.js taste of modern framework

6. http://jyaasa.comCopyright 2017. Jyaasa Technologies.
Code complexity.
Source Vue.js taste of modern framework

7. http://jyaasa.comCopyright 2017. Jyaasa Technologies.
Data-Driven Approach
One way to reduce complexity(eg. With Vue.js)
v-model = data-binding
v-if = conditional rendering
Source Vue.js taste of modern framework

8. http://jyaasa.comCopyright 2017. Jyaasa Technologies.
$ npm install vue
$ bower install vue
or Just CDN
<script type=”text/javascript”
src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js”>
<div id=”app”></div>
new Vue({
el: “#app”
})

9. http://jyaasa.comCopyright 2017. Jyaasa Technologies.
Binding
<div id=”app”>
<h1>{{message}}</h1>
</div>
new Vue({
el: “#app”,
data: {
message: “Hello World”
}

10. http://jyaasa.comCopyright 2017. Jyaasa Technologies.
Two Way Binding
<div id=”app”>
<h1>{{message}}</h1>
<input type=”text” v-model=”message”>
</div>
new Vue({
el: '#app',
data: {
message: 'Hello World'
}
})

11. http://jyaasa.comCopyright 2017. Jyaasa Technologies.
Lists
<div id="app">
<ul>
<li v-for="address in addresses"> {{ address.district }} </li>
</ul>
</div>
new Vue({
el: '#app',
data: {
addresses: [
{ district: 'Gulmi' },
{ district: 'Arghakanchi' }
]
}

12. http://jyaasa.comCopyright 2017. Jyaasa Technologies.
DOM events
<!-- full syntax -->
<a v-on:click="sayHi"></a>
<!-- shorthand -->
<a @click="sayHi"></a>
new Vue({
el: '#app',
methods: {
sayHi: function() {
alert(“Hi”);
}
}
})

13. http://jyaasa.comCopyright 2017. Jyaasa Technologies.
Conditional Rendering
<p v-if=“visible”>I am visible</p>
<p v-else>I am hidden</p>
<p v-show=“visible”>I am visible</p>

14. http://jyaasa.comCopyright 2017. Jyaasa Technologies.
Demo
cd VueTuts/customer-mgmt
(npm run dev)
cd railsproject/customer-management-api
rails s

15. Thank You!
Any Queries? Lets Discuss
http://jyaasa.comCopyright 2017. Jyaasa Technologies.