Vue.Js First Program
Vue.Js First Program: Vue.Js First Program shows that how does a Vue.Js program looks like and works in execution. So in order to understand it we need to take a brief overview .
Let us understand very simple program in Vue.Js in which we will update view template according to Javascript object i.e data model.
In below example we will explain all which you need in a simple way in order to understand program’s execution flow.
The very basic step is to create a Vue instance which takes input data from model and renders it into view according to the functionality of program.
Remember Vue constructor initialised with a new keyword once you created your Vue instance.
Vue.Js First program | Example
In this very first example you will observe that value of message is rendered over view when vue’s instance is being created. Also you can see the output of below program in screenshot.
Hello World | Example
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<div id="app">
{{ message }}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message:'The Tutorialsplane is the best and largest web development tutorials website'
}
})
</script>
|
Advertisements
