Just for the fun's sake, let's see how easy it is to get started with Vue (with no drama).

No drama involves:

  • No configuration
  • No bundling technique
  • No CSS
  • No third party tool
  • Just Vue and HTML

To get started we'll do the following:

Table of Contents

    1. Create an index.html on your machine in any directory of choice. The desktop is fine.
    2. Add Vue from CDN to the index file:
    <html>
        <head></head>
        <body>
    
            <!-- Add Vue -->
            <script src="https://unpkg.com/vue/dist/vue.js"></script>
        </body>
    </html>
    1. Create a JavaScript Vue instance
    <html>
        <body>
    
            <script src="https://unpkg.com/vue/dist/vue.js"></script>
            <script>
               /* Create a Vue instance*/
                new Vue({
                    template: '#app',
                    data: function() {
                        return {
                            name: ''
                        }
                    }
                }).$mount('#app');
            </script>
        </body>
    </html>

    The Vue instance must take an object that describes the Vue app. The template is where in our DOM Vue is allowed to perform magic.

    In this case, we chose the section with a parent div of app ID.

    Vue works with the Model–view–viewmodel (MV-VM) pattern so you can carry out two-way binding. The data property is a function (not necessarily) that returns an object. The returned object properties are used as the model and can be bound to the template (view).

    1. Bind the model to view
    <html>
        <body>
    
            <!-- Template -->
            <div id="app">
                <div>
                    <input type="text" v-model="name" placeholder="Your name?" />
                    <h5>Hello, {{name}}</h5>
                </div>
            </div>
    
            <script src="https://unpkg.com/vue/dist/vue.js"></script>
            <script>
               /* Create a Vue instance*/
                new Vue({
                    template: '#app',
                    data: function() {
                        return {
                            name: ''
                        }
                    }
                }).$mount('#app');
            </script>
        </body>
    </html>

    Within the Vue template (with app ID), we create an input and bind the name property to it using v-model:

    <input type="text" v-model="name" placeholder="Your name?" />

    Then we greet the name using another type of binding called interpolation:

    <h5>Hello, {{name}}</h5>

    The {{}} will not be handled as HTML but will resolve the value of data bound to it.

    Note: Notice that we also have a child div within the main <div id="app">. It's a necessity for Vue to have only one root element.

    When you start typing your name in the input box, expect to see the name update after the Hello, text.

    See Codepen demo below:

    See the Pen Vue.js Template by Chris Nwamba (@codebeast) on CodePen.

    Chris Nwamba

    104 posts

    JavaScript Preacher. Building the web with the JS community.