Vue.js

Posted on January 30, 2018January 30, 2018 by PeterPan

Properties

//index.html

<div id="vue-app">
	<h1>Hey, {{ name }}</h1>
</div>
 
//app.js 
 
new Vue({
    el: '#vue-app',
    data: {
        name: 'Peter'
    }
});

    

Methods

//index.html

<div id="vue-app">
     <h1>{{ greet('afternoon') }}</h1>
</div>

//app.js

new Vue({
    el: '#vue-app',
    data: {
        name: 'Peter'
    },
    methods: {
        greet: function(time){
            return 'Good ' + time + ', ' + this.name;
        }
    }
});

Data binding

//index.html
<div id="vue-app">
	<p><a v-bind:href="website">Siteland.eu<</a></p>
	<p v-html="websiteTag"></p>
	<p><input type="text" v-bind:value="name" /><</p>    
</div>

//app.js

new Vue({
    el: '#vue-app',
    data: {
        name: 'Peter',
        website: 'http://www.siteland.eu',
        websiteTag: '<a href="http://siteland.eu">The Net Ninja Website</a>'
    }
});

Events

//index.html
<div id="vue-app">
            <button v-on:click="add(1)">Add a Year</button>
            <button v-on:click="subtract(1)">Subtract a Year</button>
            <button v-on:dblclick="add(10)">Add 10 Years</button>
            <button v-on:dblclick="subtract(10)">Subtract 10 Years</button>
            <p>My age is {{age}}</p>
            <div id="canvas" v-on:mousemove="updateXY">{{ x }} , {{ y }}</div>   
</div>


//app.js
new Vue({
    el: '#vue-app',
    data: {
        age: 25,
        x: 0,
        y: 0
    },
    methods: {
        add: function(inc){
            this.age += inc;
        },
        subtract: function(dec){
            this.age -= dec;
        },
        updateXY: function(event){
            this.x = event.offsetX;
            this.y = event.offsetY;
        }
    }
});

Event Modifiers

.stop
.prevent
.capture
.self
.once

//index.html
<button v-on:click.once="add(1)"/>Fired once</button>
<a v-on:click.prevent="click" href="http://www.siteland.eu">Siteland.eu<a>

Key modifiers

.enter
.tab
.delete 
.esc
.space
.up
.down
.left
.right
//index.html
<label>Name:</label>
<input type="text" v-on:keyup.enter="logName" />
<label>Age:</label>
<input type="text" v-on:keyup.alt.enter="logAge" />

Computed properties

//index.html
<div id="vue-app">
	<button v-on:click="a++">Add to A</button>
	<button v-on:click="b++">Add to B</button>
	<p>A - {{ a }}</p>
	<p>B - {{ b }}</p>
	<p>Age + A = {{ addToA }}</p>
	<p>Age + B = {{ addToB }}</p>   
</div>

//app.js

new Vue({
    el: '#vue-app',
    data: {
        a: 0,
        b: 0,
        age: 20
    },
    computed: {
        addToA: function(){
            return this.a + this.age;
        },
        addToB: function(){
            return this.b + this.age;
        }
    }
});

Conditionals

//index.html
<div id="vue-app">
	<button v-on:click="error = !error">Toggle error</button>
	<button v-on:click="success = !success">Toggle success</button>
	<!-- <p v-if="error" class="error">There has been an error</p>
	<p v-else-if="success" class="success">Whooo, success :)</p> -->
	<p v-show="error" class="error">There has been an error</p>
	<p v-show="success" class="success">Whooo, success :)</p>    
</div>


//app.js
new Vue({
    el: '#vue-app',
    data: {
        error: false,
        success: false
    },
    methods: {

    },
    computed: {

    }
});

Looping

//index.html
<div id="vue-app">
<ul>
	<li v-for="character in characters">{{ character }}</li>
</ul>
<ul>
	<li v-for="(ninja, index) in ninjas">{{ index }} . {{ ninja.name }} - {{ ninja.age }}</li>
</ul>
<template v-for="ninja in ninjas">
	<div v-for="(val, key) in ninja">
		<p>{{key}} - {{ val }}</p>
	</div>
	<hr />
</template>   
</div>


//app.js
new Vue({
    el: '#vue-app',
    data: {
        characters: ['Mario', 'Luigi', 'Yoshi', 'Bowser'],
        ninjas: [
            { name: 'Ryu', age: 25 },
            { name: 'Yoshi', age: 35 },
            { name: 'Ken', age: 55 }
        ]
    },
    methods: {

    },
    computed: {

    }
});