Vue.js

Renaming the element or changing the html structure will break the code
Data Driven Approach is problematic
Source Vue.js taste of modern framework

Code complexity.

Data-Driven Approach
One way to reduce complexity(eg. With Vue.js)
v-model = data-binding
v-if = conditional rendering

$ 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”
})

Binding
<div id=”app”>
<h1>{{message}}</h1>
</div>
new Vue({
el: “#app”,
data: {
message: “Hello World”
}

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

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' }
]
}

DOM events

<a v-on:click="sayHi"></a>

<a @click="sayHi"></a>
new Vue({
el: '#app',
methods: {
sayHi: function() {
alert(“Hi”);
}
}
})

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>

Demo
cd VueTuts/customer-mgmt
(npm run dev)
cd railsproject/customer-management-api
rails s

Thank You!
Any Queries? Lets Discuss

Vue.js

More Related Content

Similar to Vue.js (20)

More from Jyaasa Technologies (20)

Recently uploaded (20)

Vue.js