Tips, Expertise, Articles and Advice from the Pro's for Your Website or Blog to Succeed
Vue is a reactive language, meaning when the data changes, we can automatically have that represent itself in the HTML. To help us with this, we can use watchers in vue to watch for a change in data, and then do something to the HTML, or send a message to the user about it.
This works fine for simple datasets, but if we start to have data that is deeper than one level, it becomes harder to watch it properly for changes.
Like other frameworks, Vue has a number of lifecycle hooks that allow us to attach code to specific events that occur while a Vue application is being created or used - for example, when the component loads, when a component is added to the DOM, or when something is deleted.
Vue has a lot of lifecycle hooks, and what can be confusing is what each one means or does. In this guide, we'll be covering what each lifecycle hook does and how to use them.
Components let us split parts of our site into reusable pieces which we can then place in multiple places. This can be incredibly powerful - and ultimately means reduced workload, as we can reuse code extensively.
You can easily imagine a Vue Component tree that looks a little like the image below. Here, we have two pages, Home, and About. Within each, we have a reusable component, MyDropdown, which we use twice.
In this tutorial, we're going to be making a to-do list application with Vue. This is a follow on from my tutorial on creating your first ever vue application. Follow that tutorial if you need help getting started. Since the best way to learn is to try making something yourself, this guide should give you a good starting point to understand how Vue works.
Ultimately, our todo list app will look a little like this:
In this tutorial, we'll be looking at everything you need to build your first app in Vue. We'll be covering what you need to get started in making your first Vue application.
To get started with Vue, you're first going to need to install the Vue CLI tools. Make sure you have npm installed on your computer (or you can do this in yarn if you prefer), and run the following command:
When I see something new and controversial like this, I always want to try it out myself to see what all of the hype is about and also so I can form my own opinions about the subject.
This led me down the path to creating a micro-frontend application that rendered two separate React applications, along with a single Vue application.