Point of Vue

An Introduction to Vuejs
 Hemant Rai
Cloudnaut Technologies

@hemantisme thisDOTname
Introduction
1 Progressive framework

2 Lightweight, powerful & fast

3 Declarative

4 Clean, semantic & legible

5 Easy to maintain

6 Reactive

7 VirtualDOM
<script>
Vue Instance
let vm = new Vue({
// Options
});

</script>
Vue Instance Lifecycle
Data & Methods
// Data

let vm = new Vue({

data: {
}
})

Data properties can

be accessed with the
this keyword
// Methods

let vm = new Vue({

data: {}
methods: { Methods can
methodName: function () { be accessed
// Method logic goes here
with the this
},
methodNameB: function () { keyword
// Method logic goes here
},
}
})
Template Syntax
<span>Message: {{msg }} </span>
<span v-once>
This will never change: {{msg}}
</span>
<span v-html=”rawHTML”></span>
<button
v-bind:id=”dynamicId”
v-bind:disabled=”isDisabled”
> Button </button>
<p v-if=”seen”>Now you see me</p>
<a v-on:click=”doSomething”>...</a>
<form v-on:submit.prevent=”onSubmit”> … </form>
Directives
1 v-text 8 v-on

2 v-html 9 v-bind

3 v-show 10 v-model

4 v-if 11 v-pre

5 v-else 12 v-cloak

6 v-else-if 13 v-once

7 v-for
1 Conditional Rendering 3 Event Handling

2 List Rendering 4 Form Input Bindings

// v-show

<h1 v-show="ok">Hello!</h1>

// v-if / v-else

<h1 v-if="awesome"> Vue is awesome! </h1>

<h1 v-else>Oh no 😢</h1>

// v-else-if

<div v-if="type === 'A'"> A </div>

<div v-else-if="type === 'B'"> B </div>

<div v-else-if="type === 'C'"> C </div>

<div v-else> Not A/B/C </div>

<template>
<ul id=”listApp”>
<li v-for=”(item, index) in items”>
{{ parentMessage }} # {{ index }} - {{ item.message }}
</li>
</ul>
</template>
<script>
let listApp = new Vue({
el: ‘#listApp’,
data: {
parentMessage: ‘JS Framework’,
items: [
{ message: ‘Vue’}, { message: ‘React’}, { message:
‘Angular’}, { message: ‘Backbone’}, { message: ‘Ember’}
]
}
})
</script>
<template>
<div id=”objectListApp”>
<div v-for=”(value, name, index) in object”>
{{ index }}. {{ name}}: {{ value }}
</div>
</template>
<script>
new Vue({
el: ‘#objectListApp’,
data: {
object: {
title: ‘How to do object lists in Vue’,
author: ‘Jane Doe’,
publishedAt: ‘2016-04-10’
}
}
})
</script>
1 Event Modifiers

2 Key Modifiers

3 System Modifier Keys

4 .exact Modifier

5 Mouse Button Modifiers

1 Dynamic Options Rendering

2 Value Bindings

3 Modifiers
Computed Properties
Watchers
Class & Style Bindings
// Object Syntax // Inline Syntax

<div <div v-bind:style="{

class="static" color: activeColor,
v-bind:class="{ fontSize: fontSize + 'px'
active: isActive, }"></div>
‘text-danger': hasError
}" // Object Syntax
></div>
<div
// Array Syntax v-bind:style="styleObject"></div>

<div v-bind:class="[activeClass, // Array Syntax

errorClass]"></div>
<div v-bind:style="[baseStyles,
// With Component overridingStyles]"></div>

<my-component v-bind:class="{
active: isActive
}"></my-component>
Components
1 Props 3 Child component events

2 v-model 4 Slots
Single File Component
<template>
<div>
<!-- Write your HTML templates with Vue in here -->
</div>
</template>

<script>
export default {
// Write your Vue component logic here
}
</script>

<style scoped>
/* Write your styles for the component here */
</style>
<template>
<div>
<content></content>
</div>
</template>

<script>
import content from “./components/content.vue”;

export default {
component: {
content
}
};
</script>

<style scoped>
/* Write your styles for the component here */
</style>
Filters
 <script>

//Global filter
// Syntax Vue.filter(‘filterName’, (value) => {
return //formatted value
{{ data | filter }} });

{{ data | filA | filB }} //Local filter, just like method or

{{ data | filter(arg1, arg2) }}
computed

filters: {
filterName(value) {
// Example
return //formatted value
{{ text | capitalize }} }
}
{{ bill | tip | round }}
</script>
{{ date | display(tz, format) }}
Thank you.

@hemantisme thisDOTname