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.

JavaScipt is by far the most popular programming language now. It will definitely rank in 2018. Also, you can almost develop anything with javascript. Web application, mobile, desktop and even work with a database. Besides, it has a large community of developers and contributors. Additionally, ES6 or ECMAScript 2015 is making the JavaScript better and better each day. So, we have collected the top best JavaScript Frameworks. If you want to learn any framework 2018, you may want to know which is the best, most popular and easy-to-use. Therefore, we collected these 5 best frameworks.

Furthermore, we show the resources that you can learn these frameworks in the best ways. Plus, we will compare them with Google trend to see the trending.

Best JavaScript Frameworks

Below are the lists of top JavaScript Frameworks that will rank in 2018. 

• Vue.js
• React
• Angular
• jQuery
• Redux

These frameworks are selected based on popularity on Github, most active users, eas of use, rich features and Google trends.

Notice: The above chart is the comparison of 5 best JavaScript frameworks on Google trend. In such a manner, you may not agree with it, but it’s the Google trend search terms. So, we don’t pay too much attention to that as well. What people search on Google doesn’t determine that it’s the best. Therefore, we order these frameworks more based on user-friendly, active users, updates plus most stars on Github.

Vue.js

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. Besides, it has a lot of pre-made components. Also, one the strongest reason why it’s popular is Laravel Framework. By default, Laravel comes with Vue installed. That way, most Laravel user will use it. The second reason is that Vue become popular in a short time. It was released in early 2014.

Additionally, it has great documentation and many other learning resources. Also, at the time of writing this article, it has 73000+ Github stars. So, if you want to learn, start with documentation or free Laracast video series.

React

React is a JavaScript library for building user interfaces. Also, it is maintained by Facebook, Instagram and a community of individual developers and corporations. Besides, React allows developers to create large web-applications that use data with Single Page Application. The initial release was 2013 and the author was influenced by the Angular framework. The Github repo is very active and currently, it has over 80000 stars.

Since it’s built by Facebook, again there are countless numbers of resources to learn. So, the documentation is a great place to start. If you want free video, check Jeffrey Ways course on React here.

Angular

AngularJS is also on the list of top JavaScript frameworks. The AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google. Plus, a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. So, AngularJS is the frontend part of the MEAN stack, consisting of MongoDB database, Express.js web application server framework, Angular.js itself, and Node.js server runtime environment. Also, the initial release was 2010. Though it has different versions, like angular 2, angular 4, they are almost the same. So, currently, it has over 57000+ star on Github.

Importantly, it has lots of resources for learning. If you want to learn it, start with W3schools. The second resource is learn-angular.org. Finally, if you like video, search on youtube. We could not find any complete free course.

jQuery

From a very long time, jQuery has been the most used JavaScript framework. Despite all other great frameworks nowadays, you can’t escape learning jQuery. It is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. Also, it is free, open-source software using the permissive MIT License. There are many JavaScript libraries that are based on jQuery. Therefore, you can’t stop learning. The initial release was 2006. Currently, it has over 47 stars on Github.

In Addition, since 2006, there have been countless numbers of blog articles and tutorials about jQuery. The best place to learn step by step is W3Schools.com. It’s not that complicated. very easy to learn and understandable even if you read the doc.

Redux

Redux is an open-source JavaScript library designed for managing application state. It is primarily (but not mandatorily) used together with React. Besides, Redux is a predictable state container for JavaScript apps. It helps developers write applications that behave consistently, run in different environments and are easy to test. Well, you may not need Redux. Before start using it, the article why you may not need it. But, definitely, it’s a great framework.

Want to learn about it? The documentation is a great place. Besides, the creator of Redux has a video tutorial as well. You can find it here.

Conclusion

So, we hope the article has been informative for you. Also, if you have any questions or suggestions about these top 5 best JavaScript Frameworks, feel free to comment below.

The post Top 5 Best JavaScript Frameworks of all Time 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.

Vue is a new JavaScript framework. In 2016, you will see vuejs everywhere. It’s easy to use and fan to learn vuejs framework. With vuejs you can make friendly, flexible and amazing web applications. In this tutorial we will introduce you to the basic of this framework, and in future articles you will see some more advance topic about this amazing framework. So, let’s starting exploring its amazing features.

Learn Vuejs Framework

To use Vuejs, just download the vuejs file from vuejs.org or github and then include it in your project. As like other JavaScript files or frameworks, you may include the vuejs file at the bottom of you page. Of course you can use any online editor like jsfiddle also, our goal is to learn vuejs.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Intro to Vuejs</title>
</head>
<body>

<div id="demo">


</div>

  <script src="vue.js">  </script>

  <script type="text/javascript">
        new Vue({
          el:"#demo",
          data:{

          },
        });
  </script>
</body>
</html>

As you can see the above code is just a simple html code with vuejs file included inside. We have a div with id of demo. at the bottom of the page, we have our custom JavaScript code. We have created an instance of vuejs class. Inside that we have an el property which the authority of the vuejs. It means, vuejs will work only on elements that are inside div with id of demo.

The second property is for data, you will learn about data a few minutes don’t worry. Here an example, checkout the JavaScript code as well.

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”dMMqaa” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/dMMqaa/’>Intro to vuejs – demo</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

If you look at the html code in above demo example, you will notice that we are using a custom attributes for input fields like v-model and for paragraph we used v-show. They are called directives, but for now just know that they are custom attribute for vuejs framework.

we have put the data property value another object, it’s because we can have so many data in our application.

Explain more

v-model when we assign this directive to any element in the html, we can access it’s value by that name. In our example, it’s name is name. Now, if anywhere in your code you put the name inside double braces like below example, it will show whatever is the value of that directive

<p v-show="name">welcome, {{name}}</p>

v-show : It’s like condition statements. In our example it’s not necessary to write, but we wrote it because we set a condition that: if name there is name, show the welcome text if not don’t show anything.

Conclusion

So, it was just the basic of vuejs introduction to learn vuejs framework. I have explain just a simple example of what vuejs can do and how amazing it’s to use in our project. I hope it has been informative for you and we will cover some more topic about vuejs in future articles.

The post A Beginner Guide to Learn Vuejs Framework appeared first on TECHNIG.