An Introduction: What is Vuejs
Vuejs is a library used for creating Reactive components of Modern web interfaces. What Reactive components mean its means Vuejs is a framework to make your web applications more reactive to control parts of your dom (Document object Model) to dynamically update to listen and react to user events to bring a mobile app feeling to a web application, so making an app reactive is very first important take a way. You can think vuejs js as a kind of replacement for JQUERY, Vuejs fixes many of the flaws that jquery have.Vue js is mostly used to create single page applications. In order to get started with Vue js please visit the official page of vue Js (https://vuejs.org/) and click on Get Started ButtonInstalling VueJS 2
There are different options available to install vueJs.It depends on how you may install it by simply importing script and get started with a lighter way or setting a more complex workflow using web pack. Importing script is easiest and quickest way to get started with VueJS.
In This post we will see How to install Vuejs by importing script.
Below are steps to install and use vuejs by simply importing the VueJs script.
Downloading Vue Js
Goto https://vuejs.org/v2/guide/installation.html and download the latest version of vue js by clicking on https://unpkg.com/vue link under CDN.Adding or importing Vuejs to your application.
Add a <script> tag in head section of your webpage and import the downloaded script in that.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VueJs:An Introduction</title>
<script type="text/javascript" src="scripts/vue@2.3.4.js" />
</head>
<body>
<div id="app"></div>
</body>
</html>
Initiating the VueJs Framework
You can intiate a VueJs obj by new keyword followed by Vue() object which is provided to us because we have imported the Vuejs script.<script type="text/javascript"> new Vue(); </script>You have noticed that we have not storing this view instance to any variable because we are not interacting with its instance itself but it still get created because we have used new keyword.Right now this Vue instance is not doing anything , we have to pass an object in that in order to configure and use it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VueJs:An Introduction</title>
<script type="text/javascript" src="scripts/vue@2.3.4.js" />
</head>
<body>
<div id="app">{{ title }}</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
title:"Welcome to MasterJs.net"
}
});
</script>
</html>
In this object, we have a lot of different properties and methods we can use.This Vue instance is the core of our Vuejs application.
In above example, our Vuejs obj has two properties first is el and second is data.In view, js "el" property is used to identify the element which needs to control by Vue.
The second property is "data" is used to passing data from Vue js to Html.
source(http://masteringjs.net/)
No comments