Vue JS

Directives:

//One Way Data Binding
<a v-bind:href="link">Name</a>

Render Once
v-once // Eg: <h1 v-once> {{ title }} </h1>

Render HTML Content
v-html // Eg: <p v-html="link"></p>

EVENTS
v-on:click="clickFunc" //Eg: <button v-on:click="func">Click Me</button>

Passing Click events - passed by default
<p v-on:mousemove="updateCoordinates">Coordinates {{ x }} - {{ y }}</p>

Event Modifiers
<p v-on:mousemove.stop="">Dead Spot</p>

//Two Way Data Binding
<input type="text" v-model="name">
<p> {{ name }} </p>


//SAMPLE CODE
new Vue({
    el:"#app",
    data: {
       counter: 0,
       secondCounter: 0
    },
    computed: {
        checkAns: function() {
            console.log('Computed');
            return (this.counter > 5) ? 'Greater than 5' : 'Lesser Than 5';
        }
    },
    watch: {
        counter: function() {
            vm = this;
            setTimeout(function() {
                vm.counter = 0;
            }, 2000)
        }
    },
    methods: {
        checkResult: function() {
            console.log('Method');
            return (this.counter > 5) ? 'Greater than 5' : 'Lesser Than 5';
        }
    }
});


//Attaching CSS class
<div class="demo" :class="{'red':true}"></div>
---------------------------------------
<div class="demo" :class="color"></div>
---------------OR----------------------
<div class="demo" :class=[color, {red: true}]></div>
---------------------------------------
<input type="text" v-model="color">



//UPDATING CSS STYLES DIRECTLY - witout classes
<div class="demo" :style="{ 'background-color': color}"></div>
---------------------------------------
<input type="text" v-model="color">


//CONDITIONS AND LISTS -- completely attaches ore detaches element from/to DOM
<p v-if="true">Some Dummy text and its nested elements are shown</p>
<p v-else-if="val">like else-if.</p>
<p v-else>if te v-if fails then this is used.</p>

//In HTML5 we can use template tag to group tags and add v-if together

Eg:
<template v-if="val">
    <p>Some Value</p>
    <p>Some Value</p>
    <h3>Some Value</h3>
</template>

v-show -- doesnt remove element from DOM only sets display to none
<p v-show="val">Some Dummy text and its nested elements are shown</p>

---LIST and Loops--
v-for // Same as for loop

Eg 1:
<ul>
<li v-for="element in elementsArray">{{ element }}</li>
</ul>

if we need index too
Eg 2:
<ul>
<li v-for="(element,index) in elementsArray">{{ element }} - {{ index }}</li>
</ul>

Eg 3:
<template v-for="(element,index) in elementsArray">
    <h3>{{ element }}</h3>
    <p> {{ index }} </p>
</template>

//Iteration over Objects
Eg: persons = [
    {
        fName:"Ashish",
        lname: "Verma"
    }, {
        fName:"Anand",
        lName:"Kumar"
    }
]

<li v-for="person in persons">
    <div v-for="(value, key, index) in person">{{ key }}: {{value}} - {{ index }}</div>
</li>


//looping only through numbers
<p v-for="n in 10"> {{ n }} </p>