Your browser does not support JavaScript!
Upvotes Anonymous 17 User 1

VueJS Quick Reference

Here's the content below, in a PDF cheatsheet:
HTML Example
Here is some sample HTML code that demonstrates basic syntax for events, directives, and data binding.
<div id="my-container">
  <input type="text" @keyup.enter="onSubmit" v-model="firstName"/>
  <button @click="onSubmit">Submit</button>
  {{myValue}}
</div>
JavaScript Example
Here is some JavaScript code that shows how to setup method handlers and bind data. The onSubmit method is called when the button above is clicked, or when the <enter> key is pressed in the input box.
new Vue
({
    el: '#my-container',
    methods: {
        onSubmit: function (evt) {
            alert(this.firstName);
            var button = evt.target;
        }
    },
    data: {
        firstName: '', 
        myValue: 5
    }
});
Key Aliases
Detect when a certain key is pressed with these key modifiers:

delete, down, enter, esc, left, right, space, tab, up, and single letters (a,b,c,d...).

Example: How can I detect the <enter> key in an input box?
<input type="text" @keyup.enter="onSubmit" v-model="firstName"/>
Event Modifiers
<a @click.stop.prevent="onEdit"></a>
Conveniently call stopPropagation and/or preventDefault. See docs.
CSS Transitions
<div v-show="myBool" transition=”grow”></div>
Then define CSS classes: grow-transition, grow-enter, grow-leave
Filters
Common filters include: capitalize, debounce, currency, filterBy, json, limitBy, lowercase, orderBy, pluralize, and uppercase.

Show 5 Users

<li v-for="u in users | limitBy 5"></li>

Order by ID, descending
<li v-for="u in users | orderBy 'id' -1"></li>

Debounce events
<input @mousedown="onMouseDown | debounce 300"/>

Show users with names containing <mysearch>
<li v-for="u in users | filterBy mysearch in 'name'"></li>
Directives
Show the <div> (or not)
<div v-show="myBool"></div>

Render the <div> (or not)
<div v-if="myBool"></div>
<div v-else></div>

List rendering
<li v-for="u in users">
{{u.name}}{{$index}}
</li>

Set CSS classes
<div :class="errorClasses"></div>
Toggle CSS classes on an element from JavaScript (See docs):
data: {
    errorClasses: {
        'bold-text': true, 
        'err-text': true
    }
}

Hide until VueJS compile done
<div v-cloak></div>
Prevent the page from showing your content before it's rendered by VueJS. See docs.


Don't perform VueJS compile
<div v-pre></div>
Tell VueJS to not parse a certain section of code. See docs.


Get a DOM element (this.$els.myspan)
<span v-el:myspan></span>
Reference DOM elements inside your VueJS methods. See docs.
Was this helpful?

Comments

Byanonymous Anonymous 0 User 0
Very good stuff to help the vuejser!

Leave a Comment

I agree to the Terms of Service
Design © 2015, Downranked, LLC.,
Original user code contributions under MIT License