Designing things for the web nowadays requires that sites be interactive and react quickly. There have been many studies done about how users are likely to leave a site if it takes too long to load and update. That is where frontend software development comes in. And the most popular coding language to make a website immediately responsive is JavaScript. Because JavaScript has become so popular, there are now a large number of frameworks that make it easy to make your website interactive. Arguably the most popular one is React.js, and this is what I was taught to use in my bootcamp. But I decided it would be good to learn another one, at the very least to see what it is like to teach myself how to use a framework. So I decided to look into Vue.js.
One thing I’d heard is that, since I know React, learning another framework isn’t as hard, since they all have similar concepts. From what I’ve seen, that is mostly true. Both React and Vue have a way to keep track of some sort of “state” that affects what is displayed on a webpage. Using this state, both React and Vue have ways to add things to html so you can cycle through a list and have html elements show up on the page for each thing in the list. They both have ways to make something only show up on a webpage depending on a condition. And they both have ways to make certain elements react to the events you specify.
In comparison to React, it is very easy to get started with adding Vue to a project, you just need to add the script that Vue provides in their guide to your HTML file:
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
Another comparison is that, in React, everything is written in JSX, which is a syntax extension to JavaScript that was created to be used with React. I personally like JSX, but it may be hard for some people to get a handle on, so Vue is better for beginners in this way as well. Vue doesn’t have its own syntax, it just uses HTML and JavaScript.
I taught myself about Vue through the guide they have on their website. Similar to React’s create-react-app, they have a way to scaffold a new project with all the structure you need for a full project with vue-cli. But to start out with learning Vue’s, I decided to test all of the concepts out using a very basic project with a simple structure. It just has three files: index.html, index.js, and index.css (the css file isn’t necessary, I just added it so I can style some things). The index.html file looks something like this:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
</script>
</head>
<body>
. . .
<script src="index.js"></script>
</body>
</html>
You could also put all of your JavaScript in the script tag at the bottom of the body tag in your HTML file instead of linking the index.js file in, but I think this makes the HTML file to long and involved so I prefer to put all of the JavaScript in a separate index.js file. To see the index.html file in my browser, I just run this command in my terminal:
// ♥ > open index.html
The main thing you need to get started using Vue is the Vue instance. A basic example, using the classic “Hello, World!”, would look like this:
var hello = new Vue({
el: '#hello',
data: {
message: 'Hello, World!'
}
})
The data part of a Vue instance is an object with keys and values with data you want to use, and Vue will keep track of it as it changes. In a Vue instance, you can access anything in the data object directly from the instance, like this:
hello.message // => "Hello, World!"
You use el to attach the instance to an HTML element, in this case something with an id of hello. This way, inside the HTML element you can just use message directly to reference it:
<div id="hello">
{{ message }}
</div>
The double brackets are the way we link the data from the Vue instance to the DOM, so if you open the console and change hello.message to equal something else, you will immediately see the page update to include the new value.
But just being able to show some data from a Vue instance on the screen, and only being able to change it though the console isn’t very interesting. Vue gets a lot more useful when you start adding directives and add functions so you can interact with the data that appears on the screen. I’ll go into the basics of what Vue directives are, some of the ones that are available in Vue, and how to use them in my next blog post.
Top comments (1)
It doesn't seem like you know much about React. JSX is just basically syntatic sugar, with tools like SWC and Babel it gets converted to function calls of
React.creatElement, or with the new JSX transform,__jsx.