vuejs Introduction hello world example

vuejs Introduction hello world example

Today, We want to share with you vuejs Introduction hello world example.In this post we will show you vuejs Introduction and hello world example, hear for vue js tutorial pdf we will give you demo and example for implement.
In this post, we will learn about Hello World Example using Vue.js with an example.

vue.js List Of Features

vuejs Means The Progressive JavaScript(js) Framework.and Vue.js is an Intuitive, Fast debugging and Composable MVVM freamworks for building interactive(app’s) interface.

• Creating a Vue Instance with new Vue().
• 2-Way Data Binding with v-model.
• Handling Events with v-on.
• Conditional Rendering with v-if and v-show.
• Rendering Lists in Vue with v-for.
• Computed Properties.
• Wrapping Up.

Three IMP stages:

Approachable : HTML, CSS and JavaScript
Versatile : Simple, minimal
Performant : 17kb min+gzip Runtime (DOM)

vuejs:Introduction and hello world example

Include Script

<a href="http://vuejs.org/js/vue.min.js">http://vuejs.org/js/vue.min.js</a>

index.html Body Part

<div id="first_demo">
    <p>{{msg_data}}</p>
    
	<p>wel-come My Firsat Program</p>
</div>

index.html Script Part

var data_value = {
    msg_data: 'Hello World Vue.js! - wel-come'
}

var first_demo = new Vue({
    el: '#first_demo',
    data: data_value
})

Full Example : index.html

<title>Vuejs Simple Hello-world Example</title>
<a href="http://vuejs.org/js/vue.min.js">http://vuejs.org/js/vue.min.js</a>


<div id="first_demo">
    <p>{{msg_data}}</p>
    
	<p>wel-come My Firsat Program</p>
</div>

var data_value = {
    msg_data: 'Hello World Vue.js! - wel-come'
}

var first_demo = new Vue({
    el: '#first_demo',
    data: data_value
})

View Demo

We hope you get an idea about vuejs Introduction hello world example
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.