Vue.js

Introduction

Vue.js is a JavaScript framework used for creating user interfaces. Using Vue.js, you can create components to efficiently build your program and enhance HTML with the template syntax provided that reflects the state of your component. When your state changes, Vue will automatically update the DOM upon said change. Let's go over the basics.

There are many ways to create components for your Vue projects and one way to do it is to develop single-file components, or SFCs. These SFCs contain all of the logic for the component with JS, the template with HTML, and the styling with CSS all in the same file. Vue SFCs use a *.vue file extension and are the recommended way to create Vue components.

Starting your Vue application

All Vue applications start out with an application instance that you get from invoking the createApp function. The createApp function takes an object for an argument that will be the root component of the application. Normally with SFCs, you can import the component you intend to have as your root component, and you pass that as your argument to createApp, similarly to how one would with an application using React.

Viewing your Vue application

Once you have your application instance, you'll need to be able to view your application. To do this, Vue provides the mount method that renders your application instance. The mount method's argument will either be a selector string or a DOM element, and the root component will be rendered inside the argument. One of the caveats of the mount method is that you should only invoke it once your application is totally configured and assets are fully registered.

The application instance

The application instance is more than just a return value of createApp; it allows you to add functionality across your entire application. One of the perks of the application instance is the config object that allows you to set up "app-level options", and the application instance provides a way to create assets for your application. As mentioned before, any assets or additional functionality you want to provide to your application must be done before mounting the app.

Templating

Vue templates are based on HTML and are comparable to AngularJS templates in how they "extend" the HTML syntax and are used to reflect the component's data to the client. Behind the scenes, Vue compiles the templates figures out the fewest components needed for a re-render, and manipulates the DOM on app state changes as minimally as possible.

For developers who like to use JSX in their applications, Vue supports JSX. You can write render functions with JSX instead of templates, however, you run the risk of compromising the compile-time of your components.

Data Binding

There are 2 forms of data binding in Vue: text interpolation and attribute bindings. Text interpolation, or "Mustache syntax", in Vue uses double curly braces in between HTML tags. The data inside the double curly braces will be interpreted and evaluated in plain text. Attribute bindings are used with the v-bind directive. The v-bind directive takes an argument, likely an HTML attribute, and will bind the value of that attribute to the component's specified property or any other specified value.

Directives

Directives are used to apply updates to the DOM and add special behavior to DOM elements. These directives are put inside the DOM element with the attributes and are prefixed with v-. Directives can perform a number of different operations, like looping, registering event handlers, updating HTML text, and many more. The syntax for a directive looks like this:

<element v-directive:argument="value" > ... </element>

Vue also provides syntactic sugar for their v-bind and v-on directives. The shorthand syntax for v-bind lets you omit v-bind and only use the colon with the argument and its value following right after.

<element :argument="value"> ... </element>

Or if you have the argument has the same name as the value it is being bound to, you also can shorten the directive even more.

<element :argument> ... </element>

The v-on directive is used to register event handlers to DOM elements and the shorthand for v-on uses the @ instead of the colon to come before arguments.

<element @argument> ... </element>

You have probably noticed by now that the arguments for these directives are static, but Vue provides a way for you to use dynamic arguments. These arguments are still prefixed by the colon but are wrapped in square brackets, and they come with a couple of constraints. Dynamic arguments are supposed to evaluate either to a string or null; if the argument is evaluated as null, this can remove your binding. Also, even if your argument evaluates to a string, the string must be able to be a valid HTML attribute, since that is what the argument of directives is, meaning using some characters will throw warnings. You should also be mindful of the casing of your dynamic argument because the browser will adjust the casing behind the scenes and the code will not work as you expect.

Vue allows you to customize your directives with modifiers that specify how the directive should be bound. Modifiers are attached to the directives argument with a dot.

This encapsulates the complete directive syntax for Vue applications.

<element v-directive:argument.modifier="value"> ... </element>

Vue provides lifecycle hooks as well for your application. These hooks cover the basic parts of the lifecycle, mounting, updating, unmounting, and since all Vue applications aren't server-side applications, there are hooks for other use cases of Vue.

Conclusion

Vue provides a streamlined way to create dynamic and interactive user interfaces for applications and I look forward to using Vue in the future.