Skip to content

Learning Vue JS-1

Honestly speaking, this is not my first vue js try maybe yours. Lets try again.

We will try this temporarily in jsfiddle.

On jsfiddle HTML section, insert these code:

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

<div id="app">
  <p>{{ title }}</p>
</div>

Then on Javascript section, place this code:

new Vue({
	el:'#app',
  data:{
  	title: 'Hello World!'
  }
});

Then click on run and see the result in result window “Hello World” text appears.

Because science works by explaining things, let me try to explain a little bit. The first line <script> </script> is used to include Vuejs into the page.

The new Vue() is a new instance of vuejs object. Each instance has one major job, control their own template of HTML code. In this test, The <div> with an ID #app and <p> tags are used to make a template for this instance, which is selected by the el: property. And when it runs, the {{ title }} is replaced by the title property of data object of the vuejs instance.

Leave a Reply

Your email address will not be published. Required fields are marked *