0% found this document useful (0 votes)
228 views

Vue - Js Cheat Sheet

The document describes different directives, components, and properties available in Vue.js including v-if, v-for, v-on, v-bind, v-model, components like <transition>, and instance properties like $data, $el, $refs. It also covers events, methods, computed properties, and the basic usage of Vue.

Uploaded by

Thuc Tran
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
228 views

Vue - Js Cheat Sheet

The document describes different directives, components, and properties available in Vue.js including v-if, v-for, v-on, v-bind, v-model, components like <transition>, and instance properties like $data, $el, $refs. It also covers events, methods, computed properties, and the basic usage of Vue.

Uploaded by

Thuc Tran
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

v-

else- v-if
if

v-if
v-show
display: none

v-for

v-on

v-bind

v-
model

v-once

v-bind v-on

<a v-bind:href="url">...</a>
<a :href="url">...</a>
v-

<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>
v-text

v-html v-if v-else v-else-if

v-if
<div v-if="type === 'A'">
v-if it's A
v-else </div>
<div v-else-if="type === 'B'">
it's B
</div> click
<div v-else-if="type === 'C'">
it's C
</div> v-on:click.native
<div v-else>
it's neither one
</div> v-on:click.stop
v-on:click.passive

v-on:click.capture

v-on:click.self

v-on:click.once
{{ isTrue ? 'yes' : 'no' }}
v-on:submit.prevent event.preventDefault()

v-model.lazy
v.model
v-on:click .left
v-on:click .right
v-model.trim
v-on:click .middle

v-model.number

v-on:keyup.enter
v-on:keyup.tab created
v-on:keyup.delete beforeMount
v-on:keyup.esc mounted
v-on:keyup.up beforeDestroy
v-on:keyup.down destroyed
v-on:keyup.left beforeUpdate
v-on:keyup.right updated
activated
deactivated

.ctrl
.alt
.shift <component>
.meta <transition>
<transition-group>
<keep-alive>

v-bind .prop <slot>

v-bind .camel
v-bind .sync v-on

Vue.config

beforeCreate
silent Vue.extend

optionMergeStrategies Vue.nextTick

Vue.set
devtools
Vue.delete

Vue.directive
errorHandler
Vue.filter

Vue.component
warnHandler errorHandler
Vue.use

Vue.mixin
ignoredElements
Vue.compile

keyCodes Vue.version
v-on

performance

productionTip

const vm = new Vue({

})
console.log(vm.reverseMessageAsMethod) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

data

props

el
propsData

methods template

computed
render
watch

renderError
render

var vm = new Vue({


el: '#example',
data: {
message: 'Hello' directives
},
methods: {
reverseMessageAsMethod: function () { filters
return this.message.split('').reverse().join('')
components
}
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
parent
}) mixins
extends vm.$root

vm.$children
vm.$slots

name
vm.$scopedSlots
vm.$refs

functional ref

data this vm.$isServer

model
vm.$attrs

comments
vm.$listeners v-on

const vm = new
vm.$watch
Vue(/*...*/)

vm.$set
vm.$delete

vm.$data
vm.$props
vm.$el
vm.$emit vm
vm.$options
vm.$on vm
vm.$parent
vm.$once $on
vm.$off

vm.$mount

vm.$forceUpdate vm

vm.$nextTick

vm.$destroy

You might also like