VueJs Cheatsheet

Posted 9 years ago - updated 9 years ago

Methods

 Props

 props: ['features','features_select'],

Data

...
data () {
        return {
            show: 'all'
        }
    },
...

Components

components: {
'v-select': VueSelect
},

...

components: [VueSelect]

Events

v-on:keyup="sendAndRefresh | debounce 500"
v-on:change="sendAndRefresh"
@click="functionName"
@dblclick
v-on:click
v-on:dblclick
v-on:click.stop
v-on:submit.prevent // don't reload form
v-on:click.capture
v-on:click.self

 Looping

<div v-for="item in items">
    {{item}}
</div>  

<div v-for="(category_type,items) in categories"></div>

Binding

v-bind:class="{'modal-dialog':true,'modal-lg':large,'modal-sm':small}"

// always show mod-grey, show is_selected if function(param) is true
v-bind:class="['mod-grey',{'is_selected':function(param)}]" 

v-bind:style="{width: optionalWidth}"

Forms

v-on:keyup.13
v-on:keyup.enter=

Checkboxes

Radio

<div v-for="item in items">
    <input type="radio" id="{{item.id}}" name="itemSelect"
                 v-bind:value="{id: item.id, name: item.name}"
                 v-model="itemSelect"
                 v-on:change="changeItem"
                 :checked="item.id == currentItemId">
    <label for="{{item.id}}">{{item.name}}</label>
</div>