widgets Let's Create First VueJs Example (Hello World)

This article we will create our first simple vueJs example. Let’s start. First, create a .html file you can give any name.

Created "test.html" file. 

Open the file and use the latest vue.js from cdn server. Also, you can found url vue documentation.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Then create a div id app

<div id="app"></div>

Inside the div create a new input and listen input events with v-on:input and make it related with changeTitle method

<input type="text" v-on:input="changeTitle">

Create a output for out text with title variable inside P

<p>{{title}}</p>

Our HTML code should look like:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <input type="text" v-on:input="changeTitle">
    <p>{{title}}</p>
</div>

Lets continue with Js part end of the this code create a new Vue class and define data title. Then if any event on changeTitle method change the title live.

<script>
new Vue({
    el: '#app',
    data: {
        title: 'Hello World!'
    },
    methods: {
        changeTitle: function(event) {
            this.title = event.target.value;
        }
    }
});
</script>

Now if you change input your P text can be change at the same time.

You can look on JsFiddle.