Configurazione Globale

Vue.config è un oggetto il quale contiene tutte le configurazioni di Vue. Potete modificare le sue proprietà, descritte di seguito, prima di inizializzare l’applicazione:

debug

delimiters

unsafeDelimiters

silent

async

devtools

Configurazione che ti permette di scegliere se attivare i vue-devtools nel sistema di ispezione elemento.
Questa opzione è attiva nelle build per lo sviluppo e disattiva nelle build per la produzione.
Per controllarne lo stato basta impostarla con un valore booleano true o false.

API Globali

Vue.extend( opzioni )

Vue.nextTick( funzione )

Vue.set( oggetto, chiave, valore )

Vue.delete( oggetto, chiave )

Vue.directive( id, [definizione] )

Vue.elementDirective( id, [definizione] )

Vue.filter( id, [definizione] )

Vue.component( id, [definizione] )

Vue.transition( id, [hooks] )

Vue.partial( id, [partial] )

Vue.use( plugin, [opzioni] )

Vue.mixin( opzioni )

Opzioni / Dati

data

props

propsData

1.0.22+

computed

methods

watch

Opzioni / DOM

el

template

replace

Opzioni / Funzioni per il Ciclo di Vita

init

created

beforeCompile

compiled

ready

attached

detached

beforeDestroy

destroyed

Opzioni / Assets

Direttive

elementDirettive

filters

components

transitions

partials

Opzioni / Misc

parent

Eventi

mixins

name

extends

1.0.22+

Proprietà d’Istanza

vm.$data

vm.$el

vm.$options

vm.$parent

vm.$root

vm.$children

vm.$refs

vm.$els

Metodi di Istanza / Data

vm.$watch( espressioneOFunzione, funzione, [opzioni] )

Si noti: quando si modifica (invece di rimpazzare) un Oggetto od un Array, il vecchio valore coinciderà con quello nuovo perché le referenze sono le stesse.
Vue non tiene una copia dei valori pre-modifica.

vm.$get( espressione )

vm.$set( chiave, valore )

vm.$delete(chiave)

vm.$eval( espressione )

vm.$interpolate( template )

vm.$log( [chiave] )

Metodi di Istanza / Eventi

vm.$on( evento, funzione )

vm.$once( evento, funzione )

vm.$off( [evento, funzione] )

vm.$emit( evento, […argomenti] )

vm.$dispatch( evento, […argomenti] )

vm.$broadcast( evento, […argomenti] )

Metodi di Istanza / DOM

vm.$appendTo( elementoOSelettore, [funzione] )

vm.$before( elementoOSelettore, [funzione] )

vm.$after( elementoOSelettore, [funzione] )

vm.$remove( [funzione] )

vm.$nextTick( funzione )

Metodi di Istanza / Ciclo di Vita

vm.$mount( [elementoOSelettore] )

vm.$destroy( [remove] )

Direttive

v-text

v-html

v-if

v-show

v-else

v-for

v-on

v-bind

v-model

v-ref

v-el

v-pre

v-cloak

Elementi Speciali

component

slot

partial

Filtri

capitalize

uppercase

lowercase

currency

pluralize

json

debounce

limitBy

filterBy

orderBy

Sort using a Function:

<div id="orderby-compare-example" class="demo">
<button @click="order = order * -1">Inverti l'Ordine</button>
<ul>
<li v-for="user in users | orderBy ageByTen order">
{{ user.name }} - {{ user.age }}
</li>
</ul>
</div>
new Vue({
el: '#orderby-compare-example',
data: {
order: 1,
users: [
{
name: 'Jackie',
age: 62
},
{
name: 'Chuck',
age: 76
},
{
name: 'Bruce',
age: 61
}
]
},
methods: {
ageByTen: function (a, b) {
return Math.floor(a.age / 10) - Math.floor(b.age / 10)
}
}
})
  • {{ user.name }} - {{ user.age }}

Metodi di Estensioni per Array

Vue.js estende Array.prototype aggiungendo due nuovi metodi che rendono più facile effettuare operazioni sugli Array ed assicurarsi che il sistema reattivo sia propriamente attivato.

array.$set(index, value)

array.$remove(reference)