0% found this document useful (0 votes)
253 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
253 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
We take content rights seriously. If you suspect this is your content, claim it here.
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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy