At this post, you need to have Node.js install and version >= 8 because I am using it. @vue/cli 3.0. Otherwise, it will not work. Vue is also perfectly capable of powering sophisticated Single-Page Applications.
Vue cli Tutorial
Vue provides reactive and composable view components. It utilizes a virtual DOM. It focuses on the core library, with concerns such as routing and global state management handled by companion libraries.
First, we will install the vue cli, and then we will start working on that.
Step 1: Install Vue cli.
Go to your terminal and hit the following command.
npm install -g @vue/cli
or
yarn global add @vue/cli
It will install Vue cli globally. Now to generate the vue project, type the following command.
vue create vuepro
It will install the necessary files and dependencies. After that, you need to start the server with the following command.
npm serve or yarn serve
Switch to this browser URL: http://localhost:8080/ You can see our Vue.js project is up and running.
Step 2: Folder Structure.
Following is the folder structure of the project. Remember here; We are using Components in Vue. So the syntax of the data property is different. In a simple vue project, we are defining the data property to access the values of properties. Still, in this scenario, we are using data as a function, and it returns the object that contains the value.
Our primary concern folder is the src folder. In this folder, there are two files and one folder.
- App.vue
- main.js
- components folder
In the App.vue file, all the components are included in this file. Right now, in this file, there is one component called HelloWorld.vue.
HelloWorld.vue file resides in the components folder. So all the other components are created inside the components folder and included in the App.vue file. Vue initialization is done inside a main.js file.
// main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
Now, go to the public folder. In that, there is an index.html file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
<title>vuepro</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Here our Vue application is running inside the div tag of the id app. Vue instance is binding with this div tag.
Step 3: Create one component.
Inside the components folder, make one component called Ether.vue
// Ether.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'Ethereum',
props: {
msg: String
}
}
</script>
Above two-way is a standalone component. It has its own properties and methods. If we want to see the output of this component, then import this component in the App.vue file.
// App.vue
template>
<div id="app">
<HelloWorld msg="welcome to the blockchain world"/>
<Ether msg="Ethereum" />
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
import Ether from './components/Ether.vue';
export default {
name: 'app',
components: {
HelloWorld,
Ether
}
}
</script>
Here I have passed the property name msg. So we can display that property inside our component. So the necessary flow is from top to bottom. A parent can give the property to its child component.
Event Binding in Vue.
If we want to change the property’s value when the button is clicked, you can write the following code to do that.
// Ether.vue
<template>
<div>
<h1>
{{ price }}
</h1>
<button @click="clicking()">Change Value</button>
</div>
</template>
<script>
export default {
data() {
return {
price: 200
};
},
methods: {
clicking() {
this.price = 300;
}
}
}
</script>
So, now when we click the button, a click event is triggered. Click event calls the clicking() function. That function changes the price value. Vue is reactive, so when the property is changed, it immediately reflects the value in the dom and gets updated.
Handling User Input.
In the components folder, make one file call Form.vue
// Form.vue
<template>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Add User</h3>
</div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" placeholder="Name" v-model="name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" placeholder="Email" v-model="email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<div class="panel panel-success">
<div class="panel-body">
My Name is : {{ name }}
My Email is : {{ email }}
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
name: '',
email: ''
}
}
}
</script>
Here, we have used the two-way data binding concept.
Now, import this file into the App.vue file.
// App.vue
<template>
<div id="app">
<Form />
</div>
</template>
<script>
import Form from './components/Form.vue';
export default {
components: {
Form
}
}
</script>
Now, go to the browser; as you typing in the name text box, its value is updated in the below panel. So, two-way data binding is there.
Computed Properties.
In the components folder, make one new file called Computed.vue.
// Computed.vue
<template>
<div class="container">
<button v-on:click="counter++" class="btn btn-success">Increment</button>
<button v-on:click="counter--" class="btn btn-danger">Decrement</button>
<hr/>
<p>{{ view }}</p>
</div>
</template>
<script>
export default {
data () {
return {
counter: 0
}
},
computed: {
view: function () {
return this.counter < 0 ? 0 : this.counter;
}
}
}
</script>
Here, we have taken two buttons.
- Increment
- Decrement
When the counter value is < 1, it is set to 0. So it will compute the counter property and set it according to written logic in the function. In our case, set to 0.
Import this file into the App.vue file.
// App.vue
<template>
<div id="app">
<Computed />
</div>
</template>
<script>
import Computed from './components/Computed.vue';
export default {
components: {
Computed
}
}
</script>
That’s it for this tutorial.
Good day!
I would just like to ask.. after I ran the command ‘yarn add -g @vue/cli’ it says that ‘yarn is not recognized as an internal or external command,’
operable program or batch file.
May I know what’s wrong with this?
Please install yarn by npm install -g yarn
Thank you so much Krunal! You are awesome. You have answered my confusion.
Please do consider, if I will be back again for some queries and questions. I am just beginning studying vue.js.