First Vue.JS Hello world program
- PRADEEP R
- Feb 4, 2023
- 1 min read
Updated: Feb 5, 2023
Create the new HelloWord.html file. Paste the below program into it. And open it in browser.
Program
<!DOCTYPE html> <html lang="en"> <head> <title>First Vue.JS Program </title> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script> </head> <body> <div id="app1"> {{ message }} <br> {{ description }} </div> <div id="app2"> {{ message }} <br> {{ description }} </div> <div id="app3"> <h1>{{ message }}</h1> <p>Application lanaguage is: {{ applicationLanguage }}</p> <p>Application version is: {{ VersionHistory.Version }}</p> <image v-bind:src='imagePath'/> <image :src='imagePath1'/> <h1> BookName: {{ VersionHistory.Book.bookName }} </h1> </div> <script> var app = new Vue({ el: '#app1', data: { message: 'Application Object1' , description:'First Vue JS html application object' } }) ; var app2 = new Vue({ el: '#app2', data: { message: 'Application Object2' , description:'Second Vue JS html application object' } }) var app3 = new Vue({ el: '#app3', data: { message: 'Hello World! - Application Object3', applicationLanguage :'VueJS', VersionHistory: { Version:3.0, Book: { bookName :"Vue.js 3 by Example", } }, imagePath:'https://m.media-amazon.com/images/I/41Hdn2F6B8S._SX404_BO1,204,203,200_.jpg', imagePath1:'https://static.packt-cdn.com/products/9781838826222/cover/smaller' } }) </script> </body> </html>
Output
Once you just open this html file in browser, you can see browser is rendered with html page without any issues.
You can use Visual Studio Code tool as well for Vue JS code writing purpose.
Comments