Code Affairs Web Technologies!

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=""></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


Our HTML code should look like:

<script src=""></script>
<div id="app">
    <input type="text" v-on:input="changeTitle">

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.

new Vue({
    el: '#app',
    data: {
        title: 'Hello World!'
    methods: {
        changeTitle: function(event) {
            this.title =;

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

You can look on JsFiddle.

bubble_chart Short Description

history_toggle_off Created: March 30, 2019, 9 a.m.

category Related Categories

visibility Total Read: 8