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.