Getting Started with Vue.js (CHEAT SHEET)

Vue is an awesome JavaScript framework to create interactive light-speed web-apps. Being new to Vue, I naturally weigh towards making summaries of what I've learned to remember it for longer periods of time. This is one I made a while ago. I focus on a few things when making my summaries.
1: Readability. If we can't read it well, then what's the point? I don't like using too much JavaScript Jargon, so I make sure to make it as humanly written as I can.
2: I like to keep it simple, but structured and consistent.

If there is something you think can be better, please correct me on Notion or DM me on Twitter.

👋 Please follow me on Twitter, let's chat! 👋

Installing Vue 🌟

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Installing Vue is simple. A single line of code is needed to implement it into your page. If you want to go and make a full-on web-app you'll want to use the Vue CLI/UI, though. Tutorial coming soon on that!

EDIT: you need to put the Vue script and your own original JS at the bottom of the page to have it work, please remember that!

Using Vue 😎

To use Vue's basics, you need two things:

• The HTML
  • An element to mount by ID
• The Vue script to initialize the element

To start off, let's take a look at this HTML code:

    <div id="app">
      Hello, {{ message }}!
    </div>

Now, say we want to have a dynamic message in the {{ name }} tab. How would we go about this?

Note: the double curly brackets are used to indicate to the browser that this references JavaScript. This is the case in any framework that works like this.

Let's write the code for this and take it apart:

    var app = new Vue({ // initalize the vue instance and include all details in ({})
    el: #app, // almost always detail #1: the element to mount (specificy).
    data: { // if we want to utilize data, we'll need to feed it some.
    name: "Lucas" // This is the {{ name }} we'll utilize
    }
    })

A Vue instance is an object with a lot of details. We overwrite some of those details and add to that. If you don't get this notation, study objects in javascript.

React(ivity) 🎶

We're trying to make an interactive web-app, so we'll want to add reactivity to our web-app. We can do this using directives.

V-if ⛱

To only show an element if the data returns true, we can use the following HTML, given that we've imported, we can use the following code:

    <div id="app">
    <span v-if="seen"> Now you see me </span>
    </div>

Now, if 'seen' is true (which should reside in your data element for now), this span will show. The JS for this:

    var app3 = new Vue({
    el: #app,
    data: {
    seen: true
    }
    )}

In this case, this span will show. Easy, right?
v-if is a directive. Let's cover more directives.

V-bind ✨

The v-bind directive is used to reactively update an HTML attribute. The short-hand for V-bind is :. It is best practice to use the shorthand. Here's a quick example of the HTML usage of the v-bind directive

    <a v-bind:href="url"> Click me! </a>

Let's take this apart:

• V-bind: is the basic directive. This is always included.
• After the colon : we include what attribute we want to bind, in this case href.
  • Note: you can find a list of bindable attributes in JS terms here.
• Then, as with any attribute, we use the = to input the string that will tell us what we're binding with. In this case url.

V-bind is useful for creating dynamic layouts, changing URL's, etc. A use case can be binding backgroundColor to the most upper div to let users change their own BG colors. Any needs for reactive styling can be fulfilled here.

V-on 📩

The v-on directive is used to bind DOM events to Vue methods. The shorthand for v-on is @. Let's cover a quick example:

    <div id=app> <button @click="trigger"> </button> </div>

Let's take this apart:

• The @ is the shorthand for v-on
• click is the DOM event we're watching for
• ="trigger" tells Vue to execute this method or function when the DOM event is detected.

Note that the click event must occur on the element, not outside of it.

V-for 🔥

The V-for directive is used for for creating a list from an array. V-for loops over an array to create a list. Take a good look at this syntax, I was confused by it at first:

    <ul id="example1"> <!-- note that you do NOT need to mount this specific element for this -->
    <li v-for="item in items">
    {{ item.message }}
    </li>
    </ul>

And the JS for this:

    var arraylist = new Vue({
    el: '#example-1',
    data: {
        items: [
            { message: 'Hello!' },
            { message: 'List item two :)' }
            ]
        }
    })

So let's take this apart:

• First, again, we mount the element properly. Does not need to be the ul element.
• Then, we add the data. We add the 'items' array, too.
• The items array consists of two unnamed objects that both have a message in them
• The il calls for item in items. item is the name we give to any item in the array to then reference it inside of the il ****element.
• Now that the DOM is prepared to loop through the array, we can specify even more: what will you loop through?
• In this case, we will loop through every message inside of items (every item in items)

V-model 🤯

Say we want to use the user's input as a model for what we see on screen... See what I did there? That's exactly what the v-model directive does. It allows for easy form input bindings. Let's take a look at the code:

    <div id="app">
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
    </div>

That's basically it. Do not forget to define what the default of "message" is in the JS part:

    var app1 = new Vue({ 
    el: "#app",
    data: {
    message: ""
    }
    })

V-text 💭

A v-model for text except it's not v-model at all and you can just bind text values from anywhere dynamically to the text.

    <p v-text="Hello!"> </p> // Now the text will display "Hello!"

V-once 💯

V-once requires no arguments. It tells the DOM to not reactively update everything inside the element according to Vue.

    <span v-once> {{ name }} </span> // will not update reactively

This will be a series! Next I'll be going more in-depth, doing a few tutorials for Vue.JS, how to achieve various things, before moving on to the Vue CLI & Vue UI.

👋 Please follow me on Twitter, let's chat! 👋

https://upscri.be/za52nm