1 Feb 2021

How to getting started with Vue.js?


getting started with Vue js

Here in this post we going to learning; How to getting started with Vue.js? & also How to import Vue.js to your project via CDN links?

What is Vue.js?

Vue.js is JavaScript fornt-end framework like specially one - Reactjs.

Do you know already Reactjs?

ReactJS is a javascript open source library for building feature reach & intractive user interface (UI).

How to add Vue.js to project?

To work with vue. All of first we need to import its CDN link to XHTML head tag with script tag.

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

Vue Simple Hello World Example

  
  <body>
  
  <div id="app" >
  {{message}}
  </div>
  
  
  <script>
 
 let vm = new Vue({
 el : "#app",
 data : {
 message : "Vue, Hello World"
 }
 });

</script>
  
  </body>
  
  
Output
Vue, Hello World

Every View Application Start with simple new Vue({}) constructor.
Vue constructor takes an object or {}(JavaScript).

el - it takes ID (identifier) of an HTML Element in which we are going to implement Vue.
data - it contains Vue Application's data. it is also an JavaScript Object {}. here Little Bit, it's key is used as variable.


When the Vue intialises fully, it update the DOM with provided datas that has been given to Vue Apps.
Try to run above example, {{message}} is replaced by Vuejs's data. Here, Is it interesting?


Reaction:

No comments:

No Comments

COMMENT FROM MESSAGE