What Is Vue.js

Vue.js may be a rapidly growing front-end framework for JavaScript, inspired by Angular.js, Reactive.js, and Rivets.js that gives simplistic user-interface design, manipulation, and deep reactivity.

It is described as a MVVM patterned framework, Model-View View-Model, which is based on the concept of two-way binding data to components and views.

It is incredibly fast, exceeding speeds of other top-tier JS frameworks, and very user friendly for easy integration and prototyping.

Hello, World!” Program With Simple Example

To start using Vue.js, make sure you have the script file included in your HTML. For example, add the following to your HTML.

<script src="https://npmcdn.com/vue/dist/vue.js">

HTML template

<div id="app">
{{ message }}
</div>

Edit JavaScript File

new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})

Your Output:-

Hello World Program in Vue 2 (The JSX way)

JSX is not meant to be interpreted by the browser. It must be first transpiled into standard
Javascript.

To use JSX you need to install the plugin for babel babel-plugin-transform-vue-JSX.

Run the Command

npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-mergeprops --save-dev

and add it to your .babelrc like this:

{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}

code with VUE JSX

import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
methods: {
handleClick () {
alert('Hello!')
}
},
render (h) {
return (
<div>
<h1 on-click={this.handleClick}>Hello from JSX</h1>
<p>Hello World</p>
</div>
)
}
})

By using JSX you can write concise HTML/XML-like structures in the same file as you write JavaScript code.

Handling User Input In Vue.js

VueJS can be used to easily handle user input as well, and the two way binding using v-model makes it really easy to change data easily.

HTML File

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
{{message}}
<input v-model="message">
</div>

Js File

new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})

It is very easy to do a two-way binding in VueJS using v-model directive.

This article is written by our awesome writer
Comments to: “Hello, World!” Program In Vue.js

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

Attach images - Only PNG, JPG, JPEG and GIF are supported.

New Dark Mode Is Here

Sign In to access the new Dark Mode reading option.

Join our Newsletter

Get our monthly recap with the latest news, articles and resources.

By subscribing you agree to our Privacy Policy.

Latest Articles

Explore Tutorials By Categories

About

Codeverb is simply an all in one interactive learning portal, we regularly add new topics and keep improving the existing ones, if you have any suggestions, questions, bugs issue or any other queries you can simply reach us via the contact page

Login

Welcome to Codeverb

Ready to learn something new?
Join Codeverb!

Read Smart, Save Time
  •  
    Strength indicator
  •  
  •  
    Log In | Lost Password