Menu

Vue.js – Beginners Guide

July 29, 2017 - HTML, javascript

I am sure you have already heard about React, Angular and maybe Vue.js. Today you will get a glimpse into Vue.js and it’s amazing features.

Installation

Simply include the following code into your web page and you will have Vue.js available:

 <script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js" type="text/javascript"></script>

unpkg.com is a CDN and will help you out to obtain the minified current version of any library featured on nmp.
If you enter https://unpkg.com/vue in your web browser you will get the most recent version. At the time of writing this article, the version was https://unpkg.com/vue@2.4.2

First app

To give you a headstart try out this code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Learning Vue</title>
</head>
<body>
<div id="app">
<!-- Binding Text - Semantic -->
    <h1> {{ appName }} </h1>
    <p> or </p>
        <!-- Binding Text - Declarative -->
    <h1 v-text="appName"></h1>
            <p> or </p>
        <!-- Binding Text - One time Binding -->
    <h1 v-once>{{ appName }} </h1>
</div>
    <script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var content = new Vue({ 
                      // mount instance
            el: '#app',   // or document.getElementById('app')
                        // Data property  - accessible in console: content.data.appName or content.appName
            data: {
                appName: 'Amazing App'
            }
        });
    </script>
</body>
</html>

Chrome plugin: Vue.js devtools

Add Plugin to Chrome from chrome web store and enable it in the browser by clicking on the icon in the menu.

When you will next Inspect an element you will notice a Vue tab with all the data available:
Vue.js devtools
If you have issues and the tab is not visible try adding the following code below your Vue.js Instance in the HTML script tag:

// Enable devtools
Vue.config.devtools = true;

vue-cli setup

sudo npm install -g vue-cli
vue init webpack-simple myvue
cd myvue
sudo npm install
npm run dev
npm run build