computed properties

The Difference Between Computed Properties, Methods and Watchers in Vue

For those starting out learning Vue, there’s a bit of confusion over the difference between methods, computed properties and watchers. Even though it’s often possible to use each of them to accomplish more or less the same thing, it’s important to know where each outshines the others. In this quick tip, we’ll look at these three important aspects of a Vue application and their use cases. We’ll do this by building the same search component using each of these three approaches. Methods A method is more or less what you’d expect — a function that’s a property of an object. You use methods to react to events which happen in the DOM, or you can call them from elsewhere within your component — for example, from within a computed property or watcher. Methods are used to group common functionality — for example, to handle a form submission, or to build a reusable feature such as making an Ajax request. You create a method in a Vue instance, inside the methods object: new Vue({ el: "#app"..

Get Started Writing Class-based Vue.js Apps in TypeScript

In September of last year, Evan You (creator of Vue.js) announced plans for the next major version of the library. Vue 3.0 will feature an improved experience for TypeScript users, including native support for class-based components, and better support for type inference when writing code. The great news is, you don't have to wait until version 3.0 is released (predicted for Q3 of 2019) to start writing your Vue apps in TypeScript. Vue's command-line tool, Vue CLI, comes with options for starting projects with the TypeScript build tooling pre-configured and includes the officially supported vue-class-component module, allowing you to write your Vue components as TypeScript classes. This article assumes some familiarity with both Vue and the basics of TypeScript. Let's take a look and see how you can start taking advantage of static typing and class-based components in your code today. The post Get Started Writing Class-based Vue.js Apps in TypeScript appeared first on..

Getting Started with Natural Language Processing in Python

A significant portion of the data that is generated today is unstructured. Unstructured data includes social media comments, browsing history and customer feedback. Have you found yourself in a situation with a bunch of textual data to analyse, and no idea how to proceed? The objective of this tutorial is to enable you to analyze textual data in Python through the concepts of Natural Language Processing (NLP). You will first learn how to tokenize your text into smaller chunks, normalize words to their root forms, and then, remove any noise in your documents to prepare them for further analysis. Let's get started! Prerequisites In this tutorial, we will use Python's nltk library to perform all NLP operations on the text. At the time of writing this tutorial, we used version 3.4 of nltk. To install the library, you can use the pip command on the terminal: pip install nltk==3.4 To check which version of nltk you have in the system, you can import the library into the Python..

Nuxt.js: a Minimalist Framework for Creating Universal Vue.js Apps

Universal (or Isomorphic) JavaScript is a term that has become very common in the JavaScript community. It’s used to describe JavaScript code that can execute both on the client and the server. Many modern JavaScript frameworks, like Vue.js, are aimed at building single-page applications (SPAs). This is done to improve the user experience and make the app seem faster, since users can see updates to pages instantaneously. While this has a lot of advantages, it also has a couple of disadvantages, such as long “time to content” when initially loading the app as the browser retrieves the JavaScript bundle, and some search engine web crawlers or social network robots won’t see the entire loaded app when they crawl your web pages. Server-side rendering of JavaScript is about preloading JavaScript applications on a web server and sending rendered HTML as the response to a browser request for a page. Building server-side rendered JavaScript apps can be a bit tedious, as a lot of configurati..

How to Replace jQuery with Vue

I’m willing to bet that there are a lot of developers out there who still reach for jQuery when tasked with building simple apps. There are often times when we need to add some interactivity to a page, but reaching for a JavaScript framework seems like overkill — with all the extra kilobytes, the boilerplate, the build tools and module bundlers. Including jQuery from a CDN seems like a no-brainer. In this article, I’d like to take a shot at convincing you that using Vue.js (referred to as Vue from here on), even for relatively basic projects, doesn’t have to be a headache, and will help you write better code faster. We’ll take a simple example, code it up in jQuery, and then recreate it in Vue step by step. What We’re Building For this article, we’re going to be building a basic online invoice, using this open-source template from Sparksuite. Hopefully, this should make a refreshing change from yet another to-do list, and provide enough complexity to demonstrate the advantages of usi..

SitePoint Premium New Releases: Swift, Icon Design, and Vue

We're working hard to keep you on the cutting edge of your field with SitePoint Premium. We've got plenty of new books and mini-books to check out in the library — let us introduce you to them. Hands-On Full-Stack Development with Swift - Packt Build full-stack shopping list apps from scratch for web and mobile platforms using Xcode, Vapor, and Swift. Increase developer productivity by creating reusable client and server components. Develop back-end services for your apps and websites using Vapor framework. Read Hands-On Full-Stack Development with Swift. An Introduction to Data Visualization with Vue and D3.js Learn how to visualize data in your Vue project with charts and graphs, to better convey and communicate information. In this tutorial, you’ll do so using the D3.js library, which combines powerful visualization components and a data-driven approach to DOM manipulation. Read An Introduction to Data Visualization with Vue and D3.js. The Icon Handbook The Icon Handb..

React Hooks: How to Get Started & Build Your Own

React Hooks are special functions that allow you to "hook into" React features. For example, the useState hook allows you to add React state to a functional component. useEffect is another hook that allows you to perform side effects in function components. Side effects are usually implemented using lifecycle methods. With hooks, this is no longer necessary. This means you no longer need to define a class when constructing a React component. It turns out that the class architecture used in React is the cause of a lot of challenges that React developers face every day. We often find ourselves writing large complex components that are difficult to break up. Related code is spread over several lifecycle methods, which becomes tricky to read, maintain and test. In addition, we have to deal with the this keyword when accessing state, props and functions. We also have to bind functions to this to ensure they are accessible within the component. Then we have the excessive prop drilling probl..