Loadcellular556

BACK

I love Vue.js and enjoy using it for all my current projects. And I'll give you an overview of almost all basic Vue.js concepts. All this information is based on the official documentation, and I extend it with some more detailed knowledge.

Furthermore, I update this article in the future if new things come out or change. So it's worth to check this article from time to time.

Title: Vue & Vuex & Quasar Cheat Sheet by przemekgrenda - Cheatography.com Created Date: 1655Z. Directives are attributes identified by the v- prefix. Directive Description v-text uses the property as the text value of the element v-html uses the property as the text value of the element, interpreting HTML v-if show an element only if the conditional is true v-else shows an alternative element if the preceding v-if is false v-else-if adds an else.

Vue.js Cheat Sheet Basics. Mario Laurich I love Vue.js and enjoy using it for all my current projects. And I'll give you an overview of almost all basic Vue.js concepts. One-page guide to Vue.js: usage, examples, and more. Vue.js is an open-source Model–view–viewmodel JavaScript framework for building user interfaces and single-page applications.

Table of Content

• Interpolations
• Directives

Interpolations

Vue.js is a system that enables us to render data to the DOM using straightforward template syntax declaratively, which is possible by using Vue's double-mustache syntax.

Basic Interpolation

The data and the DOM are linked, and everything is reactive. Open your browser’s JavaScript console and set app.name to a different value. You should see the rendered example update immediately.

Note that you no longer have to interact with the HTML directly. A Vue app attaches itself to a single DOM element, #app in this case, then fully controls it. The HTML is the entry point, but everything else happens within the created Vue instance.

Interpolation with Expression

Interpolations can contain simple expressions in Vue, like this:

Manipulate your local data with methods, where you can change an array to a comma-separated string for example.

You can also use a ternary operator to have a conditional rendering.

Important to know:

• You can only use one expression inside an interpolation
• I highly recommend to use for advanced string manipulation computed properties
• Statements doesn't work

• Regular conditions doesn't work

Directives

Directives are unique attributes with the v- prefix. The job is to reactively apply side effects to the DOM when the value of its expression changes.

Regular Attribute Binding

You can manipulate every HTML attribute by using the v-bind directive. Binding means that you use your data inside a tag's attribute. One example is setting the href attribute of an anchor tag.

If you want to combine a string with you local data, then put your string inside of single quotes and concat it.

A common need is also conditional binding. For the attributes which don't have a value like disabled from a button.

Important to know:For frequently used directives like v-bind you can use a nice shorthand by simply using a colon

Something wrong that new Vue developers try to do is putting data into a attribute like this:

Don't forget the colon or v-bind directive.

Class Bindings

A common need is manipulating an element's class list.

Object Syntax

You can pass an object to v-bind:class to dynamically toggle a CSS class:

You can have multiple classes toggled by having more fields in the object.

The above syntax means the presence of the active and 'dark-theme' classes will be determined by the truthiness of the data property isActive and isDark.

The v-bind:class directive can also co-exist with the plain class attribute.

With the following local data

It will render this, in the end:

Array Syntax

Another syntax you can use for class bindings is passing an array to v-bind:class.

It’s also possible to mix them up and use the object syntax inside array syntax:

Inline Style Bindings

The object syntax for v-bind:style is pretty straightforward - it looks almost like CSS, except it's a JavaScript object. You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS properties.

Two-Way Data Binding

By using the v-model directive, you can create a two-way data binding. This means the user can change the data using an input field and see the result simultaneously. The directive can work on almost every input type.

Rendering HTML

If you don't want to escape your data and render it as plain HTML use the v-html directive:

Important to know:Dynamically rendering HTML on your website can be very dangerous because it can easily lead to XSS attacks. Only use v-html on trusted content and never on user-provided content.

Conditional Rendering

The directive v-if is used to conditionally render an element and will only be rendered if the directive’s expression returns a truthy value.

It is also possible to add with v-else an 'else block'. It must immediately follow a v-if element. Otherwise it will not be recognized.

The v-else-if serves as an 'else if block' for v-if. It can also be chained multiple times. Similar to v-else, a v-else-if element must immediately follow a v-if or a v-else-if element.

Conditional Display

Another option for conditionally displaying an element is the v-show directive. The usage is largely the same:

The difference is that an element with v-show will always be rendered and remain in the DOM and only toggles the display CSS property of the element.

Important to know:

• v-show doesn't work with v-else
• v-show actually renders but hides the element.
• v-if is lazy which means the element with false condition at the beginning won't be rendered

In general, v-if has higher toggle costs while v-show has higher initial render costs. So prefer v-show if you need to toggle something very often, and prefer v-if if the condition is unlikely to change at runtime.

Vue Javascript Cheat Sheet

List Rendering

You can use the v-for directive to render a list of items based on an array. The v-for directive requires a special syntax in the form of 'item in items', where 'items' is the source data array and 'item' is an alias for the array element being iterated on.

You can also use v-for to iterate through the properties of an object.

You can also provide a second argument for the property’s name.

Vue Js Cheat Sheet

And another for the index.

Important to know:

• It is necessary to provide a key attribute
• Duplicate keys will cause render errors

Iterating in a range of numbers is also pretty easy

Events

You can use the v-on directive to listen to DOM events and run some JavaScript or methods when they’re triggered.

Important to know:

For frequently used events like v-on you can use a nice shorthand by simply using @

Conclusion

That was the first part of almost all the basic concepts of Vue.js. I wanted to create a summary for myself, and I hope that it will also help you.

You miss something? I'll add watchers, computed properties and other basic stuff soon. 🙂

Let's connect

Vue Tutorial Pdf

Follow me on YouTube and Twitter. That's where I usually hang out. The other platforms is a nice to have if you are a real webnoob fan ;)