Vue js is becoming more and more popular every day. It has a community of great developers. Also, you can develop almost any types of a web application with Vue. Besides, The Vue.js is an open-source progressive JavaScript framework for building user interfaces. Vue can also function as a web application framework capable of powering advanced single-page applications. In this article, you will learn about Vuejs computed properties vs methods. Also, where should you use methods and where should you use computed properties.

Vuejs Computed Properties VS Methods

Firstly, I expect you know the basics of Vue and want’s to learn the differences between computed property and methods. So, we will discuss with clear and real-life examples.

You write the computed properties and methods almost in the same way. Let’s see an example and then we will explain it more.

[codepen_embed height=”432″ theme_id=”0″ slug_hash=”GOxPbN” default_tab=”js,result” user=”Hujjat”]See the Pen <a href=’https://codepen.io/Hujjat/pen/GOxPbN/’>GOxPbN</a> by Hujjat Nazari (<a href=’https://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

In the above example, we have a collection of tasks. Then, we display them based on completed and incompleted tasks. As you can see, we have once computed property and one method. They do almost the same thing but opposite to each other.

Return completed tasks:

  computed: {
    completedTasks() {
      return this.tasks.filter(task => task.completed);
    }
  }

Return Incompleted tasks:

methods: {
    InCompletedTasks() {
      return this.tasks.filter(task => !task.completed);
    }
  }

Note: As you can see, we could use computed property or methods for both. Instead, we put them in two ways so that you can understand that, what we can do with methods can be done with computed properties as well.

So, there are some significant difference and usage you should consider while using them.

Computed Properties

In a nutshell, computed properties are called computed value as well. It means, they update and can be changed anytime. Also, it caches the data until it changes. When the Vue is instantiated, computed properties are converted into a property. Therefore, you reference a computed property just like you would a data property.

Example:

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

You can use it like this.

<p>Original message: "{{ message }}" </p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>

As you can see, the reverse message is not written like function. It’s just like a keyword. Additionally, you can’t pass a value to a computed property despite the fact that it’s like function.

Methods

You probably work with function a lot. Methods are the same as function and work the same way. Besides, a method does nothing unless you call it. Also, like all javascript functions, it accepts parameters and will be re-evaluated every time it’s called. After that, they can’t cache values. Additionally, you must use methods when you want to pass a value to modify it. 

Example:

[codepen_embed height=”305″ theme_id=”0″ slug_hash=”yPjjyg” default_tab=”html,result” user=”Hujjat”]See the Pen <a href=’https://codepen.io/Hujjat/pen/yPjjyg/’>Vuejs example for tutorial</a> by Hujjat Nazari (<a href=’https://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

As you can see. We can call it like a function and pass value. Then, you can change it or add something.

In a nutshell, if you want to pass value, methods are good. Otherwise, computed properties are better for cache and speed.

Conclusion

I hope the Vuejs computed properties VS methods compression has been informative for you. If you have any questions or suggestions, feel free to comment below. Besides, you can join our forum and ask questions frequently.

The post Vuejs Computed Properties vs Methods Comparison With Example appeared first on TECHNIG.

Vuejs is by far the most popular JavaScript framework nowadays. So, if you want to build an appealing and brilliant web application, definitely you should learn Vue. Also, it’s becoming more popular day by day. The job opportunities are a lot for this framework. Besides, they have a community of great and active people who can help you in anytime. So, Vue-CLI is one of the many features of Vue. One of the most common problems that beginners face is how to install and configure it. Furthermore, you will learn how to solve Vue command not found error step by step with an example.

1. What’s Vue-CLI?

In the first place, you must know what’s Vue-CLI? Shortly, Vue-CLI let you install Vue applications or templates with the command line. For instance, when you install Laravel, you use a command line, so, the same case with Vue.

2. How to install Vue-CLI

To install Vue-CLI, you must have Nodejs and Git installed on your system. So, if you don’t have Nodejs, just go to their website and download the current version.

Install Vue-CLI with the following command

npm install -g vue-cli

It will install Vue-CLI globally, which according to the documentation when you install any NPM package globally, you can access it through the command line.

Open your command line and run the following command.

vue init webpack my-project

The above command normally installs a demo project form Webpack, but you should get an error.

Or your error might be list Vue command not found.

How to Solve Vue command not found

In order to solve this problem, you should add the Vue path to your environment variable manually. So, here is how you can do that.

• Press Win + R
• Type “control sysdm.cpl,,3” and press enter
• Press N to open environment variables.
• Select the path and click Edit.
• Click new to add a new path.
• Paste the path to NPM folder in your AppData.
• Click OK for all windows and you are done.

NPM path is normally in the following folder. Just change your username on your system.

C:\Users\UserName\AppData\Roaming\npm

Your show hidden files option must be on the view this files.

You are done now. So, this time if you open the command line and type the following command, it should install the Webpack demo template in the current directory.

vue init webpack my-project

After installing, you can run the following command to open the project in the browser.

npm run dev

So, it will run a server in the following URL

http://localhost:8080/#/

Conclusion

All in all, it was that easy. Besides learning what’s Vue-CLI, you learned how to install it from the command line. So, if you have any questions or problems related to how to solve Vue command not found, feel free to comment it below.

The post How to Solve vue Command not found on Windows? appeared first on TECHNIG.