API

Konfigurasi Global

Vue.config adalah objek yang berisi konfigurasi global Vue. Anda dapat memodifikasi propertinya yang terdaftar di bawah ini sebelum mem-bootstrap aplikasi Anda:

silent

Tipe: boolean
Nilai Anggapan: false
Penggunaan:
```
Vue.config.silent = true
```
Memunculkan semua log dan peringatan Vue.

optionMergeStrategies

Tipe: { [key: string]: Function }
Nilai Anggapan: {}
Penggunaan:
```
Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
  return child + 1
}

const Profile = Vue.extend({
  _my_option: 1
})

// Profile.options._my_option = 2
```
Menetapkan strategi penggabungan kustom untuk opsi.

Strategi penggabungan menerima nilai dari opsi yang didefinisikan pada instance induk dan anak sebagai argumen pertama dan kedua. Konteks dari Vue instance dioper sebagai argumen ketiga.
Lihat juga: Strategi Penggabungan pada Opsi Khusus

devtools

Tipe: boolean
Nilai Anggapan: true (false pada build produksi)
Penggunaan:
```
// pastikan untuk mengatur ini secara synchronous segera setelah memuat Vue
Vue.config.devtools = true
```
Konfigurasi untuk mengizinkan vue-devtools untuk melakukan inspeksi pada aplikasi kita. Nilai anggapan dari opsi ini adalah true dalam build pengembangan dan false di build produksi. Anda dapat mengaturnya ke true untuk mengaktifkan inspeksi pada produksi.

errorHandler

Tipe: Function
Nilai Anggapan: undefined
Penggunaan:
```
Vue.config.errorHandler = function (err, vm, info) {
  // penanganan galat
  // `info` adalah informasi galat yang spesifik pada Vue, seperti pada kait siklus hidup
  // galat ditemukan di. Hanya tersedia di 2.2.0+
}
```
Tetapkan handler untuk kesalahan yang tidak tertangkap selama fungsi render komponen dan pengamat (watcher). Fungsi handler akan dipanggil dengan galat dan instance Vue sebagai parameter.

Di 2.2.0+, kait ini juga menangkap galat pada kait siklus hidup komponen. Begitu juga ketika kait ini undefined, galat tetap akan dicatat dengan console.error, alih-alih membuat aplikasi menjadi tidak bisa digunakan.

Di 2.4.0+, kait ini juga menangkap galat yang dilempar dari dalam event handler khusus.

Di 2.6.0+, kait ini juga menangkap galat yang dilempar dari pemantau (listener) DOM v-on. Sebagai tambahan, jika ada kait atau handler yang mengembalikan rantai Promise (misalnya fungsi async), maka galat dari rantai Promise tersebut juga akan ditangani.

Servis pelacak galat Sentry dan Bugsnag menyediakan integrasi resmi dengan opsi ini.

warnHandler

Baru di 2.4.0+

Tipe: Function
Nilai Anggapan: undefined
Penggunaan:
```
Vue.config.warnHandler = function (msg, vm, trace) {
  // `trace` adalah jejak hierarki komponen
}
```
Menetapkan handler khusus untuk peringatan pada runtime Vue. Untuk catatan, ini hanya berfungsi selama mode pengembangan dan diabaikan dalam produksi.

ignoredElements

Tipe: Array<string | RegExp>
Nilai Anggapan: []
Penggunaan:
```
Vue.config.ignoredElements = [
  'my-custom-web-component',
  'another-web-component',
  // Gunakan `RegExp` untuk mengabaikan semua elemen yang dimulai dengan "ion-"
  // hanya 2.5+
  /^ion-/
]
```
Membuat Vue mengabaikan elemen khusus yang didefinisikan di luar Vue (mis., Menggunakan Web Components APIs). Jika tidak, itu akan memunculkan peringatan tentang Unknown custom element, dengan asumsi Anda lupa mendaftarkan komponen global atau salah mengeja nama komponen.

keyCodes

Tipe: { [key: string]: number | Array<number> }
Nilai Anggapan: {}

Penggunaan:

Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  // camelCase tidak akan bekerja
  mediaPlayPause: 179,
  // tapi gunakan kebab-case dengan tanda kutip ganda
  "media-play-pause": 179,
  up: [38, 87]
}

<input type="text" @keyup.media-play-pause="method">

Menetapkan alias key kustom untuk v-on.

performance

Baru di 2.2.0+

Tipe: boolean
Nilai Anggapan: false (from 2.2.3+)
Penggunaan:

Setel ini menjadi true untuk mengaktifkan pelacakan inisialisasi komponen, kompilasi, render, dan palacakan performa patch pada alat pengembang peramban di bagian performance/timeline. Hanya berfungsi dalam mode pengembangan dan peramban yang mendukung API performance.mark.

productionTip

Baru di 2.2.0+

Tipe: boolean
Nilai Anggapan: true
Penggunaan:

Setel ini menjadi false untuk mencegah tip produksi pada memulai Vue.

API Global

Vue.extend( options )

Argumen:
- {Object} options

Penggunaan:

Membuat sebuah “subclass” dari konstruktor. Argumen harus berisi objek yang berisi opsi komponen.

Kasus spesial untuk dicatat disini adalah opsi data - ini harus berupa fungsi ketika digunakan dengan Vue.extend().

<div id="mount-point"></div>

// buat konstruktor
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// buat sebuah instance dari profil dan pasang ke dalam elemen
new Profile().$mount('#mount-point')

Akan menghasilkan:

<p>Walter White aka Heisenberg</p>

Lihat juga: Components

Vue.nextTick( [callback, context] )

Argumen:
- {Function} [callback]
- {Object} [context]
Penggunaan:

Menangguhkan panggilan balik untuk dieksekusi setelah siklus pembaruan DOM selanjutnya. Gunakan ini segera setelah Anda mengubah beberapa data untuk menunggu untuk pembaruan DOM.
```
// modifikasi data
vm.msg = 'Hello'
// DOM belum diperbarui
Vue.nextTick(function () {
  // DOM telah diperbarui
})

// gunakan sebagai promise (2.1.0+, lihat catatan di bawah)
Vue.nextTick()
  .then(function () {
    // DOM telah diperbarui
  })
```
Baru di 2.1.0+: mengembalikan sebuah Promise jika tidak tersedia panggilan balikdan Promise didukung di lingkungan eksekusi. Tolong catat bahwa Vue tidak datang dengan Promise polyfill, jadi jika Anda menargetkan peramban yang tidak mendukung Promise secara bawaan (melihat Anda, IE). Anda harus menyediakan polyfill Anda sendiri.
Lihat juga: Async Update Queue

Vue.set( target, key, value )

Argumen:
- {Object | Array} target
- {string | number} key
- {any} value
Mengembalikan: nilai yang diset.
Penggunaan:

Menambahkan properti ke dalam objek reaktif, menjamin properti baru untuk reaktif juga, jadi memicu pembaruan view. Ini harus digunakan untuk menambah properti baru untuk objek reaktif, karena Vue tidak dapat mendeteksi penambahan properti normal (sebagai contoh this.myObject.newProperty = 'hi').

Objek target tidak dapat menjadi instance Vue, atau objek data root dari instance Vue.
Lihat juga: Reactivity in Depth

Vue.delete( target, key )

Argumen:
- {Object | Array} target
- {string | number} key/index
Hanya di 2.2.0+: Juga bekerja dengan Array + index.
Penggunaan:

Menghapus properti dalam objek. Jika objek reaktif, menjamin pembaruan pemicu penghapusan view. Ini terutama digunakan untuk mengatasi batasan dimana Vue tidak dapat mendeteksi penghapusan properti, tapi Anda jarang harus menggunakannya.

Objek target tidak dapat menjadi instance Vue, atau objek data root dari instance Vue.
Lihat juga: Reactivity in Depth

Vue.directive( id, [definition] )

Argumen:
- {string} id
- {Function | Object} [definition]

Penggunaan:

Mendaftarkan atau mengambil directif global.

// register
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// register (function directive)
Vue.directive('my-directive', function () {
  // ini akan dipanggil sebagai `bind` dan `update`
})

// getter, mengembalikan definisi direktif jika terdaftar
var myDirective = Vue.directive('my-directive')

Lihat juga: Custom Directives

Vue.filter( id, [definition] )

Argumen:
- {string} id
- {Function} [definition]

Penggunaan:

Mendaftarkan atau mengambil filter global.

// register
Vue.filter('my-filter', function (value) {
  // return processed value
})

// getter, mengembalikan filter jika terdaftar
var myFilter = Vue.filter('my-filter')

Lihat juga: Filters

Vue.component( id, [definition] )

Argumen:
- {string} id
- {Function | Object} [definition]

Penggunaan:

Mendaftarkan atau mengambil komponen global. Pendaftaran juga secara otomatis menset komponen name dengan id yang diberikan.

// mendaftarkan sebuah perpanjangan konstruktor
Vue.component('my-component', Vue.extend({ /* ... */ }))

// mendaftarkan opsi objek (secara otomatis memanggil Vue.extend)
Vue.component('my-component', { /* ... */ })

// mengambil komponen yang telah terdaftar (selalu mengembalikan konstruktor)
var MyComponent = Vue.component('my-component')

Lihat juga: Components

Vue.use( plugin )

Argumen:
- {Object | Function} plugin
Penggunaan:

Memasang plugin Vue.js. Jika plugin adalah sebuah objek, objek tersebut harus membuka metode install. Jika ini adalah fungsinya sendiri, ini akan diperlukan sebagai metode pemasangan. Metode pemasangan akan dipanggil dengan Vue sebagai argumen.

Metode ini harus dipanggil sebelum memanggil new Vue()

Ketika metode ini dipanggil dalam plugin yang sama beberapa kali, plugin hanya akan dipasang sekali.
Lihat juga: Plugins

Vue.mixin( mixin )

Argumen:
- {Object} mixin
Penggunaan:

Menerapkan mixin secara global, akan berpengaruh ke setiap instance Vue yang tercipta setelah itu. Ini dapat digunakan oleh pembuat plugin untuk menginjeksi perilaku khusus ke dalam komponen. Tidak direkomendasikan dalam kode aplikasi.
Lihat juga: Global Mixin

Vue.compile( template )

Argumen:
- {string} template

Penggunaan:

Menghimpun untai templat kedalam fungsi render. Hanya tersedia dalam build penuh.

var res = Vue.compile('<div><span>{{ msg }}</span></div>')

new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

Lihat juga: Render Functions

Vue.observable( object )

Baru di 2.6.0+

Argumen:
- {Object} object
Penggunaan:

Membuat sebuah reaktif objek. Secara internal, Vue menggunakan ini dalam objek yang dikembalikan oleh fungsi data.

Objek yang dikembalikan dapat digunakan secara langsung dalam fungsi render dan properti computed, dan akan memicu pembaruan yang sesuai ketika bermutasi. Ini juga dapat digunakan secara minimal, menyimpan state lintas komponen untuk skenario sederhana:
```
const state = Vue.observable({ count: 0 })

const Demo = {
  render(h) {
    return h('button', {
      on: { click: () => { state.count++ }}
    }, `count is: ${state.count}`)
  }
}
```
Dalam Vue 2.x, Vue.observable secara langsung memutasikan objek yang dioper ke dalamnya, jadi ini sama dengan pengembalian objek, didemonstrasikan disini. Dalam Vue 3.x, proksi reaktif akan kembali sebagai gantinya, meninggalkan objek nonreaktif aslinya jika bermutasi secara langsung. Karena itu, untuk kompatibilitas di masa yang akan datang, kami selalu merekomendasikan bekerja dengan objek yang dikembalikan oleh Vue.observable, dari pada objek asli yang dioper ke dalamnya.
Lihat juga: Reactivity in Depth

Vue.version

Detil: Menyediakan versi yang terpasang dari Vue sebagai untai. Terutama beguna untuk plugin dan komponen dari komunitas, dimana Anda mungkin menggunakan stretegi berbeda untuk versi yang berbeda.

Penggunaan:

var version = Number(Vue.version.split('.')[0])

if (version === 2) {
  // Vue v2.x.x
} else if (version === 1) {
  // Vue v1.x.x
} else {
  // Unsupported versions of Vue
}

Opsi / Data

data

Tipe: Object | Function
Batasan: Hanya menerima Function saat digunakan dalam pendefinisian komponen.
Detil:

Objek data pada sebuah Vue instance. Vue secara rekursif akan mengkonversi properti-propertinya menjadi getter/setter untuk membuatnya reaktif. Objeknya haruslah sederhana: objek-objek native seperti objek browser API and properti-properti prototype akan diabaikan. Aturan sederhananya adalah data seharusnya hanyalah data - tidak direkomendasikan untuk melakukan observasi ke objek-objek yang memiliki perilaku stateful (yang memiliki bermacam variasi keadaan / state).

Jika telah terobservasi, kamu tidak dapat lagi menambahkan properti-properti reaktif ke objek data root. Maka direkomendasikan untuk mendeklarasikan semua properti-properti reaktif tingkat root diawal, sebelum membuat instance.

Setelah instance terbuat, objek data original dapat diakses sebagai vm.$data. Vue instance juga menjembatani semua properti-properti yang ditemui pada objek data, sehingga vm.a akan ekuivalen dengan vm.$data.a.

Properti-properti yang berawalan _ atau $ tidak akan dijembatani pada Vue instance karena dapat menyebabkan konflik dengan properti-properti internal Vue dan API methods. Kamu akan dapat mengakses mereka sebagai vm.$data._property.

When defining a component, data must be declared as a function that returns the initial data object, because there will be many instances created using the same definition. If we use a plain object for data, that same object will be shared by reference across all instances created! By providing a data function, every time a new instance is created we can call it to return a fresh copy of the initial data.

Jika dibutuhkan, penjiplakan mendalam (deep clone) daripada objek original dapat dilakukan dengan meneruskan (passing) vm.$data melalui JSON.parse(JSON.stringify(...)).

Contoh:

var data = { a: 1 }

// pembuatan instance secara langsung
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true

// harus menggunakan function saat berada didalam Vue.extend()
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

Perlu dicatat bahwa jika kamu menggunkan fungsi panah (arrow function) pada properti data, this tidaklah menjadi instance dari komponen, namun kamu tetap dapat mengakses instance tersebut sebagai argumen pertama dari function:

data: vm => ({ a: vm.myProp })

Lihat juga: Reaktivitas Secara Mendalam

props

Tipe: Array<string> | Object
Detil:

Sebuah daftar (list) / hash dari attribut-attribut yang diekspos untuk menerima data dari komponen induk (parent). Props memiliki sebuah sintaks sederhana berbasis Array dan sintaks alternatif berbasis Objek yang memungkinkan konfigurasi lebih jauh (advanced) seperti pengecekan tipe (type checking), validasi khusus (custom) dan melakukan pemberian nilai-nilai standar (default values).

Dengan sintaks berbasis Objek, kamu dapat menggunakan opsi-opsi berikut:
- type: dapat berupa salah satu dari native contructors berikut: String, Number, Boolean, Array, Object, Date, Function, Symbol, constructor khusus (custom) apapun atau suatu array dari itu semua. Akan dilakukan pengecekan apakah sebuah prop telah diberikan tipe, dan akan memunculkan peringatan jika belum. Informasi lebih lanjut untuk tipe-tipe prop.
- default: any
  Menspesifikasikan nilai dasar (default) untuk prop. Jika prop tidak diberikan nilai, maka nilai ini yang akan digunakan. Objek atau array standar harus dikembalikan (returned) dari function yang membuatnya.
- required: Boolean
  Mendefinisikan jika prop ini dibutuhkan (harus ada dan memiliki nilai). Dalam lingkungan yang bukan untuk keperluan produksi (non-production), peringatan pada console akan dimunculkan jika nilainya truthy (true atau yang ekuivalen) dan prop-nya tidak diteruskan (passed).
- validator: Function
  Sebuah fungsi validator custom (bebas dan khusus) yang menerima nilai prop sebagai satu-satunya argumen. Dalam lingkungan yang bukan untuk keperluan produksi (non-production), peringatan pada console akan dimunculkan jika fungsi ini mengembalikan nilai yang falsy (false atau yang ekuivalen) (misal: validasi gagal). Kamu dapat membaca lebih lanjut tentang validasi prop disini.

Contoh:

// sintaks sederhana
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// sintaks objek dengan validasi
Vue.component('props-demo-advanced', {
  props: {
    // pengecekan tipe
    height: Number,
    // pengecekan tipe plus validasi lain
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

Lihat juga: Props

propsData

Tipe: { [key: string]: any }
Batasan: hanya dapat ditemui / digunakan (respected) pada pembuatan instance via new.
Detil:

Meneruskan props ke instance saat pembuatan instance tersebut. Utamanya ditujukan agar pengerjaan unit testing lebih mudah.

Contoh:

var Comp = Vue.extend({
  props: ['msg'],
  template: '<div>{{ msg }}</div>'
})

var vm = new Comp({
  propsData: {
    msg: 'hello'
  }
})

computed

Tipe: { [key: string]: Function | { get: Function, set: Function } }
Detil:

Properti-properti terolah (computed) yang kemudian digabung kedalam Vue instance. Seluruh getters (fungsi untuk mengambil data) dan setters (fungsi untuk mengubah data) memiliki konteks this yang secara otomatis terikat dengan Vue instance-nya.

Perlu dicatat bahwa jika kamu menggunkan fungsi panah (arrow function) pada properti terolah (computed), this bukanlah instance dari komponen, namun kamu tetap dapat mengakses instance tersebut sebagai argumen pertama dari function:
```
computed: {
  aDouble: vm => vm.a * 2
}
```
Properti-properti terolah (computed) ini akan tersimpan sementara (cached), dan hanya akan diolah kembali (re-computed) saat ada perubahan pada dependensi reaktif. Perlu dicatat bahwa jika sebuah dependensi tertentu berada diluar cakupan (scope) instance (misal: tidak reaktif), properti terolah (computed) tidak akan diperbarui.

Contoh:

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // hanya get
    aDouble: function () {
      return this.a * 2
    },
    // get dan set
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

Lihat juga: Computed Properties

methods

Tipe: { [key: string]: Function }
Detil:

Metode-metode yang kemudian digabung ke dalam Vue instance. Kamu dapat mengakses metode-metode ini secara langsung pada VM instance, atau menggunakannya di ekspresi-ekspresi directive. Semua metode ini, konteks this-nya akan secara otomatis terikat ke Vue instance.

Perlu dicatat bahwa kamu sebaiknya tidak menggunakan fungsi panah (arrow) untuk mendefinisikan sebuah metode (contoh: plus: () => this.a++). Hal tersebut dikarenakan fungsi panah (arrow) mengikat (bind) konteks ke konteks induk, menyebabkan this bukan lagi Vue instance seperti yang kamu ekspektasikan dan this.a akan menjadi undefined.

Contoh:

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

Lihat juga: Penanganan Event

watch

Tipe: { [key: string]: string | Function | Object | Array}
Detil:

Sebuah objek dimana keys adalah expresi-expresi untuk memantau dan values adalah callback-nya (fungsi yang dipanggil setelah suatu fungsi lain selesai dieksekusi). Value dapat berupa string dari nama sebuah metode, atau sebuah Objek yang memiliki opsi-opsi tambahan. Vue instance akan memanggil $watch() setiap key pada objek saat instansiasi (pembuatan Vue instance).

Contoh:

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // *string* dari nama metode
    b: 'someMethod',
    // pemantauan mendalam (deep watcher)
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // callback akan dipanggil seketika setelah observasi dimulai
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // memantau vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

Perlu dicatat bahwa kamu sebaiknya tidak menggunakan fungsi panah (arrow) untuk mendefinisikan sebuah watcher (contoh: searchQuery: newValue => this.updateAutocomplete(newValue)). Hal tersebut dikarenakan fungsi panah (arrow) mengikat (bind) konteks ke konteks induk, menyebabkan this bukan lagi Vue instance seperti yang kamu ekspektasikan dan this.updateAutocomplete akan menjadi undefined.

Lihat juga: Metode Instance / Data - vm.$watch

Opsi / DOM

el

Tipe: string | Element
Batasan: hanya berlaku pada pembuatan instance melalui new.
Detil:

Berikan instance Vue sebuah elemen DOM yang sudah ada untuk dipasangkan. Ini bisa berupa kata pemilih CSS atau sebuah HTMLElement sesungguhnya.

Setelah instance sudah dipasangkan, elemen akan dapat diakses sebagai vm.$el.

Jika opsi ini ada saat pembuatan instance, instance akan langsung menjalankan kompilasi; jika tidak, pengguna harus memanggil vm.$mount() secara eksplisit untuk menjalankan kompilasi secara manual.

Elemen yang diberikan hanya menjadi titik pemasangan. Tidak seperti Vue 1.x, elemen yang dipasangkan akan digantikan dengan DOM yang dihasilkan oleh Vue dalam semua kasus. Karena itu tidak disarankan untuk memasangkan instance akar ke <html> atau <body>.

Jika fungsi render maupun opsi template tidak diberikan, DOM HTML yang di dalam dari elemen DOM yang dipasangkan akan diekstrak sebagai template. Dalam kasus ini, Runtime + Compiler build Vue harus digunakan.
Lihat juga:
- Lifecycle Diagram
- Runtime + Compiler vs. Runtime-only

template

Tipe: string
Detil:

Templat string yang akan digunakan sebagai markup untuk instance Vue. Template akan menggantikan elemen yang dipasang. Markup apa pun yang ada di dalam elemen yang dipasang akan diabaikan, kecuali jika slot distribusi konten ada dalam template.

Jika kata dimulai dengan # itu akan digunakan sebagai querySelector dan menggunakan innerHTML elemen yang dipilih sebagai string template. Ini memungkinkan penggunaan trik umum <script type =" x-template "> untuk menyertakan templat.

Dari perspektif keamanan, Anda hanya boleh menggunakan templat Vue yang dapat Anda percayai. Jangan pernah menggunakan konten yang dibuat pengguna sebagai templat Anda.

Jika fungsi render ada dalam opsi Vue, template akan diabaikan.
Lihat juga:
- Lifecycle Diagram
- Content Distribution with Slots

render

Tipe: (createElement: () => VNode) => VNode
Detil:

Alternatif untuk templat string yang memungkinkan Anda memanfaatkan kekuatan penuh program JavaScript. Fungsi render menerima sebuah metode createElement sebagai argumen pertama yang digunakan untuk membuat VNode.

Jika komponen merupakan sebuah komponen fungsional, fungsi render juga menerima ekstra argumen context, yang memberikan aksesk pada data kontekstual karena komponen fungsional tidak memiliki instance.

Fungsi render memiliki prioritas di atas fungsi render yang dikompilasi dari opsi template atau templat HTML dalam DOM dari elemen pemasangan yang ditentukan oleh opsiel..
Lihat juga: Render Functions

renderError

Baru di 2.2.0+

Tipe: (createElement: () => VNode, error: Error) => VNode
Detil:

Hanya bekerja pada mode pengembangan.

Memberikan sebuah keluaran render alternatif ketika fungsi render standar menemukan kesalahan. Kesalahan akan diteruskan ke renderError sebagai argumen kedua. Ini sangat berguna saat digunakan bersama dengan hot-reload.

Contoh:

new Vue({
  render (h) {
    throw new Error('oops')
  },
  renderError (h, err) {
    return h('pre', { style: { color: 'red' }}, err.stack)
  }
}).$mount('#app')

Lihat juga: Render Functions

Opsi / Kait Siklus hidup

Semua kait siklus hidup secara otomatis terikat konteks this dengan instance, sehingga Anda bisa mengakses data, computed properties, dan methods. Ini berarti Anda seharusnya tidak menggunakan arrow function saat mendefinisikan metode siklus hidup (e.g. created: () => this.fetchTodos()). Alasannya adalah arrow function mengikat konteks induk, jadi this tidak akan menjadi instance Vue seperti yang Anda harapkan dan this.fetchTodos akan undefined.

beforeCreate

Tipe: Function
Detil:

Dipanggil secara sinkron segera setelah instance diinisialisasi, sebelum pengaturan data observasi dan event/watcher.
Lihat juga: Lifecycle Diagram

created

Tipe: Function
Detil:

Dipanggil secara sinkron setelah instance dibuat. Pada tahap ini, instance telah selesai memproses opsi yang berarti yang berikut telah diatur: data observasi, computed properties, methods, watch/event callbacks. Namun, tahap pemasangan belum dimulai, dan properti $el belum tersedia.
Lihat juga: Lifecycle Diagram

beforeMount

Tipe: Function
Detil:

Dipanggil tepat sebelum pemasangan dimulai: fungsi render akan dipanggil untuk pertama kalinya

Kait ini tidak dipanggil selama rendering di sisi server.
Lihat juga: Lifecycle Diagram

mounted

Tipe: Function
Detil:

Dipanggil setelah instance telah terpasang, dimana el digantikan oleh vm.$el yang baru dibuat. Jika root instance sudah terpasang ke sebuah elemen pada dokumen, vm.$el juga akan di dokumen ketika mounted dipanggil.

Perhatikan bahwa mounted tidak menjamin bahwa semua komponen turunannya telah terpasang. Jika Anda ingin menunggu hingga seluruh tampilan telah di-rander, anda dapat menggunakan vm.$nextTick di dalam mounted

mounted: function () {
  this.$nextTick(function () {
    // Kode yang hanya akan berjalan setelah
    // seluruh tampilan telah di-render
  })
}

Kait ini tidak dipanggil selama rendering di sisi server.

Lihat juga: Lifecycle Diagram

beforeUpdate

Tipe: Function
Detil:

Dipanggil ketika data berubah sebelum DOM di-patched. Ini adalah tempat yang baik untuk mengakses DOM yang ada sebelum pembaruan, misalnya untuk menghapus event listeners yang ditambahkan secara manual.

Kait ini tidak dipanggil selama rendering di sisi server, karena hanya render awal yang dilakukan di sisi server.
Lihat juga: Lifecycle Diagram

updated

Tipe: Function
Detil:

Dipanggil setelah perubahan data menyebabkan virtual DOM diubah dan patched.

DOM komponen akan diperbarui ketika kait ini dipanggil, sehingga Anda dapat melakukan operasi yang bergantung pada DOM di sini. Namun, dalam sebagian besar kasus, Anda harus menghindari perubahan state di dalam kait. Untuk bereaksi terhadap perubahan state, biasanya lebih baik menggunakan computed property atau watcher.

Perhatikan bahwa updated tidak menjamin bahawa semua komponen turunannya telah terpasang. Jika Anda ingin menunggu hingga seluruh tampilan telah di-render, anda dapat menggunakan vm.$nextTick di dalam mounted
```
updated: function () {
  this.$nextTick(function () {
    // Kode yang hanya akan berjalan setelah
    // seluruh tampilan telah di-render
  })
}
```
Kait ini tidak dipanggil selama rendering di sisi server.
Lihat juga: Lifecycle Diagram

activated

Tipe: Function
Detil:

Dipanggil ketika komponen kept-alive diaktifkan.

Kait ini tidak dipanggil selama rendering di sisi server.
Lihat juga:
- Built-in Components - keep-alive
- Dynamic Components - keep-alive

deactivated

Tipe: Function
Detil:

Dipanggil ketika komponen kept-alive dinonaktifkan.

Kait ini tidak dipanggil selama rendering di sisi server.
Lihat juga:
- Built-in Components - keep-alive
- Dynamic Components - keep-alive

beforeDestroy

Tipe: Function
Detil:

Dipanggil tepat sebelum instance Vue dihancurkan. Pada tahap ini instance masih berfungsi penuh.

Kait ini tidak dipanggil selama rendering di sisi server.
Lihat juga: Lifecycle Diagram

destroyed

Tipe: Function
Detil:

Dipanggil setelah instance Vue dihancurkan. Ketika kait ini dipanggil, semua directives dari instance Vue unbound, semua event listeners telah dihapus, dan semua turunan instance Vue juga telah dihancurkan.

Kait ini tidak dipanggil selama rendering di sisi server.
Lihat juga: Lifecycle Diagram

errorCaptured

Baru di 2.5.0+

Tipe: (err: Error, vm: Component, info: string) => ?boolean
Detil:

Dipanggil ketika galat dari komponen turunan ditangkap. Kait menerima tiga argumen: Galatnya, instance komponen yang memicu galat, dan string yang memuat informasi dimana galat itu tertangkap. Kait dapat mengembalikan false untuk menghentikan galat agar tidak menyebar lebih lanjut.

Anda dapat mengubah state komponen dalam kait ini. Namun, penting untuk memiliki persyaratan dalam templat Anda atau fungsi render yang memiliki sirkuit pendek konten lain ketika galat telah ditangkap; jika tidak, komponen akan dilemparkan ke loop render yang tak terbatas.

Aturan Propagasi Galat
- Secara default, semua kesalahan masih dikirim ke config.errorHandler global jika sudah didefinisikan, sehingga galat ini masih dapat dilaporkan ke layanan analitik di satu tempat.
- Jika ada beberapa kait errorCaptured pada rantai pewarisan atau rantai induk komponen, semuanya akan dipanggil pada kesalahan yang sama.
- Jika kait errorCaptured itu sendiri melempar kesalahan, kesalahan ini dan kesalahan yang ditangkap asli dikirim ke config.errorHandler global.
- Kait errorCaptured dapat mengembalikan false untuk mencegah kesalahan agar tidak menyebar lebih lanjut. Ini pada dasarnya mengatakan “kesalahan ini telah ditangani dan harus diabaikan.” Ini akan mencegah kait errorCaptured tambahan atau global config.errorHandler global agar tidak dipanggil untuk kesalahan ini.

Opsi / Assets

directives

Tipe: Object
Detil:

Sejumlah directive yang harus disediakan untuk instance Vue.
Lihat juga: Custom Directives

filters

Tipe: Object
Detil:

Sejumlah filter yang harus disediakan untuk instance Vue.
Lihat juga: Vue.filter

components

Tipe: Object
Detil:

Sejumlah komponen yang harus disediakan untuk instance Vue.
Lihat juga: Components

Opsi / Composition

parent

Tipe: Vue instance
Detil:

Tentukan instance induk untuk instance yang akan dibuat. Bangun hubungan induk-anak di antara keduanya. Induk dapat diakses sebagaithis.$parent di dalam instance anak, dan instance anak akan dimasukkan ke dalem array $children induknya.

Gunakan $parent dan $children secukupnya - dikarenakan mereka kebanyakan digunakan sebagai pintu darurat. Utamakan penggunaan props dan events untuk komunikasi induk-anak.

mixins

Tipe: Array<Object>
Detil:

mixins menerima sebuah array berisi objek mixin. Kumpulan objek mixin ini dapat berisi opsi instance seperti instance objek pada umumnya, dan mereka akan digabungkan dengan opsi yang ditambah menggunakan logika penggabungan opsi yang sama seperti Vue.extend(). Contoh: Jika mixin anda mengandung hook dan komponen itu sendiri juga memiliki hook yang sama, maka kedua fungsi akan dipanggil.

hook mixin dipanggil sesuai dengan urutan dimana mereka disediakan, dan dipanggil sebelum hook komponen itu sendiri.

Contoh:

var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]
})
// => 1
// => 2

Lihat juga: Mixins

extends

Tipe: Object | Function
Detil:

Secara deklaratif mengekstensi komponen lain (bisa antara objek opsi polos, atau sebuah konstruktor) tanpa menggunakan Vue.extend. Tujuan utama dari extends adalah mempermudah ekstensi antara Komponen Berkas Tunggal.

Fungsi ini mirip dengan mixins.

Contoh:

var CompA = { ... }

// extend CompA tanpa perlu memanggil `Vue.extend` di keduanya
var CompB = {
  extends: CompA,
  ...
}

provide / inject

Baru di versi 2.2.0+

Tipe:
- provide: Object | () => Object
- inject: Array<string> | { [key: string]: string | Symbol | Object }
Detil:

provide dan inject khususnya disediakan untuk plugin lanjutan / kasus pemakaian pustaka komponen. Fungsi ini TIDAK direkomendasikan untuk digunakan dalam kode aplikasi secara umum.

Kedua opsi ini digunakan untuk mengizinkan komponen terdahulu sebagai penyuntik dependencies ke semua keturunannya, mengesampingkan seberapa dalam komponen hirarkinya, selama mereka ada di dalam rantai komponen induk yang sama. Jika anda familiar dengan React, ini sangat mirip dengan fitur konteks React.

Tipe opsi provide harus sebuah objek atau sebuah fungsi yang mengembalikan sebuah object. Objek ini mengandung properti-properti yang tersedia untuk diinjeksikan ke keturunannya. Anda dapat menggunakan ES2015 Symbols sebagai keys di objek ini, tapi hanya di lingkungan yang secara native mendukung Symbol dan Reflect.ownKeys.

Opsi inject harus di antara berikut:
- sebuah array berisi untai
- sebuah objek dimana keys adalah nama binding lokal dan nilainya di antara:
  - key (untai atau Symbol) untuk mencari injeksi yang tersedia, atau
  - sebuah objek dimana:
    - properti from adalah key (untai atau Symbol) untuk mencari injeksi yang tersedia, dan
    - properti default yang digunakan sebagai nilai pada saat terjadi kegagalan
Catatan: ikatan provide dan inject tidak bersifat reaktif. Hal ini disengaja. Namun, apabila anda menurunkan objek yang diobservasi, properti-properti dalam objek tersebut tetap reaktif.

Contoh:

// komponen induk menyediakan 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// komponen anak menginjeksi 'foo'
var Anak = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

Dengan ES2015 Symbols, fungsi provide dan objek inject:

const s = Symbol()

const Provider = {
  provide () {
    return {
      [s]: 'foo'
    }
  }
}

const Anak = {
  inject: { s },
  // ...
}

Dua contoh dibawah hanya bisa berjalan dengan Vue 2.2.1+. Nilai-nilai yang diinjeksi diselesaikan setelah inisialisasi props dan data.

Menggunakan nilai yang terinjeksi sebagai nilai anggapan untuk sebuah prop:

const Anak = {
  inject: ['foo'],
  props: {
    bar: {
      default () {
        return this.foo
      }
    }
  }
}

Menggunakan nilai yang terinjeksi sebagai data:

const Anak = {
  inject: ['foo'],
  data () {
    return {
      bar: this.foo
    }
  }
}

Di versi 2.5.0+ injeksi bersifat opsional dengan nilai anggapan:

const Anak = {
  inject: {
    foo: { default: 'foo' }
  }
}

Jika komponen tersebut memerlukan injeksi dari properti dengan nama yang lain, gunakan from untuk menandakan sumber properti:

const Anak = {
  inject: {
    foo: {
      from: 'bar',
      default: 'foo'
    }
  }
}

Mirip dengan nilai anggapan prop, anda harus menggunakan fungsi pabrik untuk nilai non-primitif:

const Anak = {
  inject: {
    foo: {
      from: 'bar',
      default: () => [1, 2, 3]
    }
  }
}

Opsi / Lain-lain

name

Tipe: string
Batasan: Gunakan hanya sebagai opsi komponen.
Detil:

Mengizinkan sebuah komponen untuk memanggil dirinya sendiri di dalam templatnya sendiri secara rekursif. Catat bahwa ketika sebuah komponen terdaftar secara global dengan Vue.component(), ID global secara otomatis ditetapkan sebagai namanya.

Keuntungan lain dengan menspesifikasikan sebuah opsi name adalah debugging. Komponen dengan nama lebih membantu dalam pesan peringatan. Dan juga, ketika memeriksa sebuah aplikasi di dalam vue-devtools, komponen tanpa nama akan muncul sebagai <AnonymousComponent>, dimana tidak informatif sama sekali. Dengan menambahkan opsi name, anda akan mendapatkan struktur komponen yang lebih informatif.

delimiters

Tipe: Array<string>
Nilai Anggapan: ["{{", "}}"]
Batasan: Opsi ini hanya tersedia di full build, dalam kompilasi peramban.
Detil:

Mengubah pembatas interpolasi teks normal.

Contoh:

new Vue({
  delimiters: ['${', '}']
})

// Delimiter diubah menjadi menggunakan ES6 template string

functional

Tipe: boolean
Detil:

Menyebabkan sebuah komponen menjadi tanpa kondisi (tanpa data) dan tanpa instance (tanpa konteks this). Komponen tersebut hanya berisi fungsi render yang mengembalikan node virtual agar membuat komponen tersebut lebih efektif untuk dirender.
Lihat juga: Functional Components

model

Baru di versi 2.2.0

Tipe: { prop?: string, event?: string }
Detil:

Mengizinkan sebuah komponen khusus untuk menyesuaikan prop dan event ketika digunakan bersama v-model. Secara standar, v-model dalam sebuah komponen menggunakan value sebagai prop dan input sebagai event, namun beberapa tipe input seperti tombol centang dan tombol radio ingin menggunakan prop value untuk tujuan yang lain. Menggunakan opsi model dapat menghindari konflik dalam kasus seperti ini.

Contoh:

Vue.component('checkbox-saya', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    // mengizinkan menggunakan prop `value` untuk tujuan lain
    value: String,
    // menggunakan `checked` sebagai prop yang akan menimpa nilai dari `value`
    checked: {
      type: Number,
      default: 0
    }
  },
  // ...
})

<checkbox-saya v-model="foo" value="sebuah nilai"></checkbox-saya>

Kode di atas sama dengan:

<checkbox-saya
  :checked="foo"
  @change="nilai => { foo = nilai }"
  value="sebuah nilai">
</checkbox-saya>

inheritAttrs

Baru di versi 2.4.0+

Tipe: boolean
Nilai Anggapan: true
Detil:

Secara standar, Ikatan atribut dalam cakupan induk yang tidak dikenali sebagai prop akan “gagal” dan akan diaplikasikan ke elemen akar dari komponen anak sebagai atribut HTML normal. Ketika membuat sebuah komponen yang membungkus sebuah elemen target atau komponen lain, opsi ini tidak selalu menghasilkan hasil yang diinginkan. Dengan mengubah nilai inheritAttrs menjadi false, kejadian standar ini dapat dinonaktifkan. Atribut yang tersedia melalui properti instance $attrs (baru di 2.4) dan bisa diikat secara eksplisit ke elemen yang bukan akar menggunakan v-bind.

Catatan: opsi ini tidak mempengaruhi ikatan class dan style.

comments

Baru di versi 2.4.0+

Tipe: boolean
Nilai Anggapan: false
Batasan: Opsi ini hanya tersedia di full build, dalam kompilasi peramban.
Detil:

Ketika nilai diubah ke true, akan menyimpan dan merender komen HTML yang ditemukan di templat. Tindakan normal secara umum adalah dengan membuangnya.

Properti Instance

vm.$data

Tipe: Object
Detil:

Objek data yang dipantau oleh Vue instance. Vue instance menjembatani akses ke properti-properti yang ada di objek data instance tersebut.
Lihat juga: Options / Data - data

vm.$props

Baru di versi 2.2.0+

Tipe: Object
Detil:

Sebuah objek yang merepresentasikan props terkini yang diterima sebuah komponen. Vue instance menjembatani akses ke properti-properti yang ada di objek props instance tersebut.

vm.$el

Tipe: Element
Hanya dapat dibaca
Detil:

Elemen pangkal (root) DOM yang dikelola oleh Vue instance.

vm.$options

Tipe: Object
Hanya dapat dibaca
Detil:

Opsi-opsi pembuatan (instantiation) yang digunakan untuk Vue instance tersebut. Properti ini berguna saat kamu ingin memasukkan properti khusus di dalam opsi:
```
new Vue({
  customOption: 'foo',
  created: function () {
    console.log(this.$options.customOption) // => 'foo'
  }
})
```

vm.$parent

Tipe: Vue instance
Hanya dapat dibaca
Detil:

Instance induk (parent), jika instance tersebut mempunyainya.

vm.$root

Tipe: Vue instance
Hanya dapat dibaca
Detil:

Vue instance pangkal (root) dari pohon komponen yang ada. Jika instance tersebut tidak mempunyai induk (parent), maka nilai dari properti ini adalah instance itu sendiri.

vm.$children

Tipe: Array<Vue instance>
Hanya dapat dibaca
Detil:

Komponen-komponen anakan (child) yang langsung berada dibawah instance tersebut. Sebagai catatan, tidak ada jaminan akan urutan $children, dan mereka tidak bersifat reaktif. Jika kamu ingin mencoba menggunakan $children untuk mengikat data (binding), pertimbangkan untuk menggunakan Array dan v-for untuk membuat (generate) komponen anakan (child), dan gunakan Array tersebut sebagai sumber validitas.

vm.$slots

Tipe: { [name: string]: ?Array<VNode> }
Hanya dapat dibaca
Detil:

Digunakan untuk secara terprogram mengakses konten yang didistribusi dengan slots. Tiap slot yang memiliki nama (named slot) mempunyai properti terkait sendiri (misal: konten slot="foo" akan ditemukan pada vm.$slots.foo). Properti default berisi titik-titik (nodes) yang tidak masuk di dalam slot yang memiliki nama (named slot).

Pengaksesan vm.$slots paling berguna saat menulis sebuah komponen dengan fungsi render.

Contoh:

<blog-post>
  <h1 slot="header">
    Tentang Saya
  </h1>

  <p>Disini beberapa konten halaman, yang akan masuk di dalam vm.$slots.default, karena tidak masuk di slot yang memiliki nama (named slot).</p>

  <p slot="footer">
    Copyright 2016 Evan You
  </p>

  <p>Jika saya memiliki beberapa konten disini, itu juga akan masuk di dalam vm.$slots.default.</p>.
</blog-post>

Vue.component('blog-post', {
  render: function (createElement) {
    var header = this.$slots.header
    var body   = this.$slots.default
    var footer = this.$slots.footer
    return createElement('div', [
      createElement('header', header),
      createElement('main', body),
      createElement('footer', footer)
    ])
  }
})

Lihat juga:

vm.$scopedSlots

Baru di versi 2.1.0+

Tipe: { [name: string]: props => Array<VNode> | undefined }
Hanya dapat dibaca
Detil:

Digunakan untuk secara terprogram mengakses scoped slots. Tiap slot, termasuk default, objeknya memiliki fungsi terkait yang mengembalikan VNodes.

Pengaksesan vm.$scopedSlots sangat berguna saat menulis komponen dengan fungsi render.

Catatan: sejak versi 2.6.0+, ada dua perubahan di properti ini yg perlu diperhatikan:
1. Fungsi scoped slot saat ini menjamin akan mengembalikan array dari VNodes, kecuali jika nilai yang dikembalikan tidak valid, yang berarti fungsi tersebut akan mengembalikan undefined.
2. Semua $slots saat ini juga akan terekspos di $scopedSlots sebagai fungsi. Jika kamu berurusan dengan fungsi render, saat ini direkomendasikan untuk selalu mengakses slots via $scopedSlots, entah saat ini mereka menggunakan scope atau tidak. Hal ini tidak hanya akan membuat refactors mendatang semakin mudah dalam menambahkan sebuah scope, tapi juga akan memudahkan migrasi nantinya ke Vue 3, yang dimana semua slots adalah fungsi-fungsi.
Lihat juga:

vm.$refs

Tipe: Object
Hanya dapat dibaca
Detil:

Sebuah objek dari elemen-elemen DOM dan instances komponen, didaftarkan dengan attribut ref.
Lihat juga:
- Refs pada Komponen Anakan (Child)
- Special Attributes - ref

vm.$isServer

Tipe: boolean
Hanya dapat dibaca
Detil:

Menyatakan apakah Vue instance tersebut berjalan di server.
Lihat juga: Server-Side Rendering

vm.$attrs

Baru di versi 2.4.0+

Tipe: { [key: string]: string }
Hanya dapat dibaca
Detil:

Berisi ikatan (bindings) attribut yang berada di cakupan induk (parent) (kecuali untuk class dan style) yang tidak dianggap (dan diekstrak) sebagai props. Saat sebuah komponen tidak memiliki deklarasi props, properti ini pada dasarnya berisi semua ikatan (bindings) yang berada di cakupan induk (parent) (kecuali untuk class dan style), dan dapat diteruskan kebawah ke komponen inner via v-bind="$attrs" - berguna saat membuat komponen higher-order (HOC).

vm.$listeners

Baru di versi 2.4.0+

Tipe: { [key: string]: Function | Array<Function> }
Hanya dapat dibaca
Detil:

Berisi pemantau (listeners) events v-on yang berada di cakupan induk (parent) (tanpa pengubah (modifiers) .native). Properti ini dapat diteruskan kebawah ke komponen inner via v-on="$listeners" - berguna saat membuat komponen-komponen penyelubung (wrapper) yang bersifat transparan.

Metode Instance / Data

vm.$watch( expOrFn, callback, [options] )

Argumen:
- {string | Function} expOrFn
- {Function | Object} callback
- {Object} [options]
  - {boolean} deep
  - {boolean} immediate
Mengembalikan: {Function} unwatch
Penggunaan:

Mengawasi suatu ekspresi atau fungsi penghitung (computed function) pada instance Vue untuk perubahan. Callback dipanggil dengan nilai baru dan nilai lama. Ekspresi hanya menerima jalur dot-delimited. Untuk ekspresi yang lebih kompleks, gunakan fungsi.

Catatan: ketika memutasi (alih-alih mengganti) suatu Objek atau Array, nilai lama akan sama dengan nilai baru karena mereka mereferensikan Objek/Array yang sama. Vue tidak menyimpan salinan dari nilai pra-mutasi.

Contoh:

// keypath
vm.$watch('a.b.c', function (newVal, oldVal) {
  // lakukan sesuatu
})

// function
vm.$watch(
  function () {
    // setiap kali ekspresi `this.a + this.b` menghasilkan hasil yang berbeda,
    // handler akan dipanggil. Seolah-olah kita sedang mengawasi properti
    // penghitung (computed property) tanpa mendefinisikan properti penghitung itu sendiri
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // lakukan sesuatu
  }
)

vm.$watch mengembalikan fungsi yang tidak diamati yang berhenti menembakkan callback:

var unwatch = vm.$watch('a', cb)
// nanti, runtuhkan pengamat
unwatch()

Opsi: deep

Untuk mendeteksi perubahan nilai bersarang (nested value) di dalam Objek, anda harus mengoper deep: true dalam argumen opsi. Perhatikan bahwa anda tidak perlu mendengarkan (listen) untuk mutasi Array.
```
vm.$watch('someObject', callback, {
  deep: true
})
vm.someObject.nestedValue = 123
// callback dieksekusi
```

Opsi: immediate

Mengoper immediate: true dalam opsi akan segera memicu callback dengan nilai ekspresi saat ini:

vm.$watch('a', callback, {
  immediate: true
})
// `callback` segera dieksekusi dengan nilai `a` saat ini

vm.$set( target, key, value )

Argumen:
- {Object | Array} target
- {string | number} key
- {any} value
Mengembalikan: set nilai.
Penggunaan:

Ini adalah alias dari global Vue.set.
Lihat juga: Vue.set

vm.$delete( target, key )

Argumen:
- {Object | Array} target
- {string | number} key
Penggunaan:

Ini adalah alias dari global Vue.delete.
Lihat juga: Vue.delete

Metode Instance / Events

vm.$on( event, callback )

Argumen:
- {string | Array<string>} event (array hanya didukung pada versi 2.2.0+)
- {Function} callback
Penggunaan:

Digunakan untuk memantau event khusus pada instance di sebuah instance. Event dapat dipicu dengan metode vm.$emit. Callback akan menerima seluruh argumen tambahan yang diberikan pada metode pemicu event tersebut.

Contoh:

vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'halo')
// => "halo"

vm.$once( event, callback )

Argumen:
- {string} event
- {Function} callback
Penggunaan:

Digunakan untuk memantau event khusus, tapi hanya sekali saja. Pemantau ini akan diabaikan setelah dijalankan untuk pertama kali.

vm.$off( [event, callback] )

Argumen:
- {string | Array<string>} event (array hanya didukung pada versi 2.2.2+)
- {Function} [callback]
Penggunaan:

Menghapus pemantau (listener) untuk event khusus.
- Jika tidak disertai argumen satupun, maka semua pemantau akan dihapus;
- Jika hanya disertai argumen event, maka hanya pemantau untuk event tersebut yang akan dihapus;
- Jika kedua argumen event dan callback disertakan, maka hanya pemantau spesifik untuk callback tersebut yang akan dihapus.

vm.$emit( eventName, […args] )

Argumen:
- {string} eventName
- [...args]
Digunakan untuk memicu (trigger) sebuah event pada instance ini. Seluruh argumen yang ditambahkan akan diteruskan ke fungsi callback pada pemantau (listener).

Contoh:

Menggunakan $emit hanya dengan nama event:

Vue.component('welcome-button', {
  template: `
    <button v-on:click="$emit('kenalan')">
      Klik di sini agar disapa
    </button>
  `
})

<div id="emit-example-simple">
  <welcome-button v-on:kenalan="katakanHalo"></welcome-button>
</div>

new Vue({
  el: '#emit-example-simple',
  methods: {
    katakanHalo: function () {
      alert('Haloo!')
    }
  }
})

Menggunakan $emit dengan argumen tambahan:

Vue.component('pemberi-saran', {
  data: function () {
    return {
      opsiSaran: ['Ya', 'Tidak', 'Mungkin']
    }
  },
  methods: {
    beriSaran: function () {
      var indeksSaranAcak = Math.floor(Math.random() * this.opsiSaran.length)
      this.$emit('beri-saran', this.opsiSaran[indeksSaranAcak])
    }
  },
  template: `
    <button v-on:click="beriSaran">
      Klik di sini untuk meminta saran
    </button>
  `
})

<div id="emit-example-argument">
  <pemberi-saran v-on:beri-saran="tampilkanSaran"></pemberi-saran>
</div>

new Vue({
  el: '#emit-example-argument',
  methods: {
    tampilkanSaran: function (saran) {
      alert(saran)
    }
  }
})

Metode Instance / Siklus Hidup

vm.$mount( [elementOrSelector] )

Argumen:
- {Element | string} [elementOrSelector]
- {boolean} [hydrating]
Mengembalikan: vm - instansiasi dari dirinya sendiri
Penggunaan:

Jika instance vue tidak mencantumkan opsi el saat instansiasi, maka instance tersebut akan masuk kedalam keadaan “tidak terpasang/unmounted“, tanpa terasosiasi dengan elemen DOM manapun. vm.$mount() dapat digunakan untuk menjalankan proses pemasangan/mount secara manual dari sebuah instance vue yang tak terpasang sebelumnya.

Jika argumen elementOrSelector tidak disediakan, maka templat akan dirender sebagai dokumen mati atau off-document element, dan anda dapat menggunakan native DOM API untuk memasukannya elemen kedalam dokumen anda.

method ini akan mengembalikan instancenya sendiri, oleh sebab itu anda dapat mengaitkannya ke method-method yang lain setelah pemanggilannya.

Contoh:

var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})

// instansiasi dan pemasangan kedalam elemen #app (akan menggantikan #app)
new MyComponent().$mount('#app')

// kode diatas serupa dengan ini:
new MyComponent({ el: '#app' })

// atau, me*render* dokumen mati dan menambahkan setelahnya:
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

Lihat juga:
- Siklus Hidup Diagram
- Proses Render Pada Sisi Server

vm.$forceUpdate()

Penggunaan:

Memaksa instance Vue untuk melakukan proses render ulang. Catatan hal ini tidak akan berpengaruh kepada semua anak dari komponen, hanya berpengaruh pada instancenya sendiri dan anak komponen yang disertai sisipan konten slot.

vm.$nextTick( [callback] )

Argumen:
- {Function} [callback]
Penggunaan:

Menunda eksekusi dari callback setelah siklus pembaharuan DOM berikutnya. Gunakan method ini sesegera mungkin setelah anda melakukan perubahan data untuk menunggu pembaharuan DOM. Ini sama halnya dengan global Vue.nextTick, kecuali dalam konteks this pada callback yang akan otomatis tertuju kepada instance vue pemanggil.

Baru di 2.1.0+: mengembalikan Promise jika tidak disediakan callback dan Promise ini telah mendukung eksekusi lingkungan/environtment. Mohon dicatat promise yang disediakan oleh Vue tidak menyertakan polyfill, oleh sebab itu jika target browser anda tidak mendukung promise (seperti IE), anda sendiri yang memiliki kewajiban untuk menyediakannya.

Contoh:

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // mengubah data
      this.message = 'changed'
      // DOM belum diperbaharui
      this.$nextTick(function () {
        // DOM telah diperbaharui
        // `this` tertuju pada yang menginstansiasi
        this.doSomethingElse()
      })
    }
  }
})

Lihat juga:
- Vue.nextTick
- Pembaharuan Antrian Async

vm.$destroy()

Kegunaan:

Menuntaskan pemusnahan sebuah vm. Membersihkan koneksi-koneksi terhadap vm-vm aktif yang lain, melepaskan keterikatan terhadap semua direktifnya, dan menonaktifkan semua event listenernya.

Memicu beforeDestroy dan destroyed hooks.

Dalam situasi normal anda diharapkan tidak menggunakan method ini. Dalam pengontrolan siklus hidup komponen anak pada data-driven, Lebih disarankan untuk menggunakan v-if and v-for.
Lihat juga: Siklus Hidup Diagram

Direktif

v-text

Nilai Anggapan: string
Rincian:

Mengubah textContent dari elemen. Jika Anda perlu mengubah bagian textContent, Anda harus menggunakan interpolasi {{ Mustache }}.

Contoh:

<span v-text="msg"></span>
<!-- sama seperti -->
<span>{{msg}}</span>

Lihat juga: Sintaksis Data Binding - Interpolasi

v-html

Nilai Anggapan: string
Rincian:

Mengubah innerHTML dari elemen. Catat bahwa konten disisipkan sebagai HTML biasa - mereka tidak akan dikompilasi sebagai templat Vue. Jika anda mencoba membuat templat menggunakan v-html, sebaiknya anda memikirkian ulang solusinya dengan menggunakan komponen.

Me-render sembarang HTML secara dinamis pada website anda bisa sangat berbahaya karena bisa dengan mudah mendapatkan serangan XSS. Gunakan v-html hanya pada konten yang dapat dipercaya dan jangan pernah pada konten yang disediakan pengguna.

Pada Komponen Berkas Tungal, scoped styles tidak akan berlaku pada konten di dalam v-html, karena HTML tersebut tidak diproses oleh kompiler templat Vue. Jika anda ingin menggunakan scoped CSS pada konten v-html, sebaiknya anda menggunakan module CSS atau tambahan, elemen <style> global dengan startegi scoping manual seperti BEM.
Contoh:
```
<div v-html="html"></div>
```
Lihat juga: Sintaksis Data Binding - Interpolasi

v-show

Nilai Anggapan: any
Penggunaan:

Mengalihkan properti CSS display dari elemen berdasarkan pada syarat yang dianggap benar dari nilai sebuah ekspresi.

Direktif ini memicu transisi ketika syaratnya berubah.
Lihat juga: Rendering Bersyarat - v-show

v-if

Nilai Anggapan: any
Penggunaan:

Me-render elemen sesuai kondisi berdasarkan pada syarat yang dianggap benar dari nilai sebuah ekspresi. Elemen beserta direktif / komponen yang ada di dalamnya dihancurkan dan dibuat ulang saat peralihan. Jika elemen merupakan sebuah elemen <template>, Kontennya akan diekstrak sebagai blok bersyarat.

Direktif ini memicu transisi ketika syaratnya berubah.

Saat digunakan bersamaan dengan v-if, v-for memiliki prioritas yang lebih tinggi dari v-if. Lihat petunjuk me-render daftar untuk rinciannya.
Lihat juga: Rendering Bersyarat - v-if

v-else

Tidak mengharapkan ekspresi
Pembatasan: elemen sejajar sebelumnya harus memiliki v-if atau v-else-if.

Penggunaan:

Menandai “blok else” untuk v-if atau rantai v-if/v-else-if.

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

Lihat juga: Rendering Bersyarat - v-else

v-else-if

Baru pada 2.1.0+

Nilai Anggapan: any
Pembatasan: elemen sejajar sebelumnya harus memiliki v-if atau v-else-if.

Penggunaan:

Menandai “blok else if” untuk v-if. Dapat digunakan berantai.

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

Lihat juga: Rendering Bersyarat - v-else-if

v-for

Nilai Anggapan: Array | Object | number | string | Iterable (since 2.6)
Penggunaan:

Me-render elemen atau blok templat berulang kali berdasarkan sumber data. Nilai direktif harus menggunakan sintaksis khusus alias in expression untuk menyediakan alias pada elemen yang sedang diiterasi:
```
<div v-for="item in items">
  {{ item.text }}
</div>
```
Cara lainnya, anda juga dapat menentukan alias untuk index (atau key jika digunakan pada objek):
```
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>
```
Prilaku standar v-for akan mencoba mengubah/menambal elemen pada tempatnya tanpa menggerakkan mereka. Agar bisa memaksanya untuk mengurutkan elemennya kembali, Anda perlu menyediakan petunjuk pengurutan dengan atribut khusus key:
```
<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>
```
Pada 2.6+, v-for bisa juga bekerja pada nilai yang mengimplementasi Iterable Protocol, termasuk Map dan Set native. Akan tetapi, perlu dicatat bahwa Vue 2.x saat ini tidak mendukung reactivity pada nilai Map dan Set, jadi tidak bisa secara otomatis mendeteksi perubahan.

Saat digunakan bersama v-if, v-for memiliki prioritas yang lebih tinggi dari v-if. Lihat petunjuk me-render daftar untuk rinciannya.

Rincian penggunaan v-for dijelaskan dalam bagian petunjuk pada tautan dibawah.
Lihat juga:
- Me-render Daftar
- key

v-on

Penulisan Singkat: @
Nilai Anggapan: Function | Inline Statement | Object
Argumen: event
Modifier:
- .stop - memanggil event.stopPropagation().
- .prevent - memanggil event.preventDefault().
- .capture - menambahkan pendengar event (event listener) pada mode tangkap (capture).
- .self - hanya memicu handler jika event dikirimkan dari elemen ini.
- .{keyCode | keyAlias} - hanya memicu handler pada kunci tertentu.
- .native - mendengarkan event native elemen root dari komponen.
- .once - memicu handler paling banyak satu kali.
- .left - (2.2.0+) hanya memicu handler untuk event tombol kiri mouse.
- .right - (2.2.0+) hanya memicu handler untuk event tombol kanan mouse.
- .middle - (2.2.0+) hanya memicu handler untuk event tombol tengah mouse.
- .passive - (2.3.0+) meletakkan event DOM dengan { passive: true }.
Penggunaan:

meletakkan sebuah pendengar event pada elemen. Tipe event ditandai dengan argumen. Ekspresi dapat berupa nama method, suatu pernyataan sebaris, atau dihilangkan jika terdapat modifier.

Saat digunakan pada elemen normal, Ia hanya akan mendengarkan even DOM native. Jika digunakan pada elemen komponen kustom, Ia akan mendengarkan event kustom yang dipancarkan pada komponen anak.

Saat mendengarkan event DOM native, method menerima event native sebagai satu-satunya argumen. Jika menggunakan pernyataan sebaris, pernyataan tersebut memiliki akses pada properti khusus $event: v-on:click="handle('ok', $event)".

Mulai pada 2.4.0+, v-on juga mendukung binding pada pasangan objek event/listener tanpa argumen. Catatan ketika menggunakan sintaksis objek, tidak mendukung modifier apapun.

Contoh:

<!-- handler method -->
<button v-on:click="doThis"></button>

<!-- event dinamis (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- pernyataan sebaris -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- penulisan singkat -->
<button @click="doThis"></button>

<!-- penulisan singkat event dinamis (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- stop perambatan -->
<button @click.stop="doThis"></button>

<!-- mencegah default -->
<button @click.prevent="doThis"></button>

<!-- mencegah default tanpa ekspresi -->
<form @submit.prevent></form>

<!-- modifier berantai -->
<button @click.stop.prevent="doThis"></button>

<!-- modifier key menggunakan keyAlias -->
<input @keyup.enter="onEnter">

<!-- modifier key menggunakan keyCode -->
<input @keyup.13="onEnter">

<!-- event klik akan dipicu paling banyak satu kali -->
<button v-on:click.once="doThis"></button>

<!-- sintaksis objek (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

Mendengarkan event kustom pada komponen anak (handler dipanggil ketika “my-event” dipancarkan pada komponen anak):

<my-component @my-event="handleThis"></my-component>

<!-- pernyataan sebaris -->
<my-component @my-event="handleThis(123, $event)"></my-component>

<!-- event native pada komponen -->
<my-component @click.native="onClick"></my-component>

Lihat juga:
- Penanganan Event
- Komponen - Event Kustom

v-bind

Penulisan Singkat: :
Nilai Anggapan: any (with argument) | Object (without argument)
Argumen: attrOrProp (optional)
Modifier:
- .prop - Mengaitkan sebagai sebuah properti DOM debanding sebuah atribut (apa bedanya??). Jika tag adalah sebuah komponen maka .prop akan mengatur properti pada $el komponen.
- .camel - (2.1.0+) menguba nama atribut dengan penulisan kebab-case menjadi camelCase.
- .sync - (2.3.0+) sintaksis pemanis yang memperbolehkan handler v-on untuk mengubah nilai yang terkait.
Penggunaan:

Secara dinamis mengaitkan satu atau lebih atribut, atau sebuah prop komponen pada sebuah ekspresi.

Ketika digunakan untuk mengaitkan atribut class atau style, mendukung tipe atribut tambahan seperti Array atau Object. Lihat tautan bagian petunjuk di bawah untuk lebih banyak rincian.

Ketika digunakan untuk mengaitkan prop, prop harus dideklarasikan pada komponen anak dengan benar.

Ketika digunakan tanpa argumen, dapat digunakan untuk mengaitkan object yang berisi pasangan atribut nama-nilai. Catatan pada mode ini class dan style tidak mendukung Array atau Object.

Contoh:

<!-- mengaitkan sebuah atribut -->
<img v-bind:src="imageSrc">

<!-- nama atribut dinamis (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- cara penulisan singkat -->
<img :src="imageSrc">

<!-- cara penulisan singkat dengan nama atribut dinamis (2.6.0+) -->
<button :[key]="value"></button>

<!-- dengan penggabungan string sebaris -->
<img :src="'/path/to/images/' + fileName">

<!-- mengaitkan dengan class -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- mengaitkan dengan style -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- mengaitkan dengan atribut objek -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- mengaitkan atribut DOM dengan modifier prop -->
<div v-bind:text-content.prop="text"></div>

<!-- mengaitkan prop. "prop" harus dideklarasikan pada my-component. -->
<my-component :prop="someThing"></my-component>

<!-- mengirimkan props dari induk kepada anak yang memiliki props serupa -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

Modifier .camel akan melakukan konversi penulisan nama atribut v-bind menjadi gaya camelCase ketika digunakan pada DOM templates, mis. atribut viewBox pada SVG:

<svg :view-box.camel="viewBox"></svg>

.camel tidak diperlukan jika anda menggunakan templat string, atau melakukan kompilasi dengan vue-loader/vueify.

Lihat juga:

v-model

Nilai Anggapan: beragam berdasarkan pada nilai elemen input form atau output dari komponen
Terbatas pada:
- <input>
- <select>
- <textarea>
- components
Modifier:
- .lazy - mendengarkan event change dibanding input
- .number - mengganti input string menjadi angka
- .trim - trim input
Penggunaan:

Membuat kait dua arah pada elemen input form atau komponen. Untuk rincian penggunaan dan catatan lainnya, lihat bagian Petunjuk yang ditautkan di bawah.
Lihat juga:
- Form Input Bindings
- Komponen - Form Input Komponen menggunakan Event Kustom

v-slot

Penulisan Singkat: #
Nilai Anggapan: Ekspersi JavaScript yang valid pada posisi argumen fungsi (mendukung destrukturisasi pada lingkungan yang didukung). Opsional - hanya dibutuhkan jika mengharapkan props dikirimkan ke dalam slot.
Argumen: nama slot (opsional, default untuk default)
Terbatas pada:
- <template>
- komponen (untuk default slot dengan props)
Penggunaan:

Menandai slot bernama atau slot yang mengharapkan untuk menerima prop.

Contoh:

<!-- Slot bernama -->
<base-layout>
  <template v-slot:header>
    Header content
  </template>

  Default slot content

  <template v-slot:footer>
    Footer content
  </template>
</base-layout>

<!-- Slot bernama yang menerima prop -->
<infinite-scroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</infinite-scroll>

<!-- Default slot yang menerima prop, dengan destrukturisasi -->
<mouse-position v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</mouse-position>

Untuk lebih banyak rincian, lihat tautan di bawah.

Lihat juga:
- Komponen - Slots
- RFC-0001

v-pre

Tidak mengharapkan ekspresi
Penggunaan:

Melewatkan kompilasi untuk elemen dan seluruh anaknya. Anda dapat menggunakan ini untuk menampilkan tag moustache mentah. Melewatkan banyak node yang tidak memiliki direktif juga bisa mempercepat kompilasi.

Contoh:

<span v-pre>{{ ini tidak akan dikompilasi }}</span>

v-cloak

Tidak mengharapkan ekspresi
Penggunaan:

Direktif ini akan tetap pada elemen sampai Vue Instance selesai dikompilasi. Dikombinasikan dengan aturan CSS seperti [v-cloak] { display: none }, Direktif ini bisa digunakan untuk menyembunyikan kaitan mustache yang belum dikompilasi sampai Vue instance siap.

Contoh:

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

<div> tidak akan bisa dilihat sampai kompilasi selesai

v-once

Tidak mengharapkan ekspresi

Rincian:

Me-render elemen dan komponen hanya sekali. Pada render ulang selanjutnya, elemen/komponen dan semua anaknya akan diperlakukan seperti konten statis dan dilewatkan. Ini dapat digunakan untuk mengoptimasi performa update.

<!-- elemen tunggal -->
<span v-once>This will never change: {{msg}}</span>
<!-- elemen yang memiliki anak -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- komponen -->
<my-component v-once :comment="msg"></my-component>
<!-- direktif `v-for` -->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

Lihat juga:
- Sintaksis Data Binding - interpolasi
- Komponen - Komponen Statis Murah dengan v-once

Atribut Spesial

key

Nilai Anggapan: number | string

Atribut spesial key umumnya dipakai sebagai penanda bagi algoritma virtual DOM milik Vue untuk mengidentifikasi VNodes ketika membandingkan list node yang baru dengan list yang lama. Jika atribut key tidak digunakan, Vue akan menggunakan algoritma untuk meminimalisir perpindahan elemen dan mencoba sebisa mungkin untuk menimpa/memakai ulang elemen yang se-tipe di tempat yang sama. Jika atribut key digunakan, Vue akan menyusun ulang elemen-elemen berdasarkan susunan perubahan dari key, dan elemen-elemen dengan key yang sudah tidak ada lagi akan selalu dihapus.

Anak dari induk yang sama harus mempunyai key yang unik. Key yang sama akan mengakibatkan kegagalan render.

Contoh penggunaan yang paling umum adalah menggabungkan key dengan v-for:
```
<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>
```
Key juga dapat digunakan untuk mengganti paksa sebuah elemen/komponen alih-alih menggunakannya kembali. Ini akan berguna ketika anda ingin:
- Memicu (trigger) lifecycle hook dari sebuah komponen dengan tepat
- Memicu (trigger) transisi
Sebagai contoh:
```
<transition>
  <span :key="text">{{ text }}</span>
</transition>
```
Ketika text berubah, <span> akan selalu diganti alih-alih di-patch, sehingga transisi akan terpicu.

ref

Nilai Anggapan: string

ref digunakan untuk mendaftarkan referensi terhadap elemen atau komponen anak. Referensi akan didaftarkan dibawah obyek $refs dari komponen induknya. Jika digunakan pada elemen DOM polos, referensi akan menunjuk pada elemen tersebut; jika digunakan pada elemen anak, referensi akan menunjuk pada instance komponen:
```

<p ref="p">hello</p>


<child-component ref="child"></child-component>
```
Ketika digunakan pada elemen/komponen yang mengandung v-for, referensi yang terdaftar akan menjadi sebuah Array yang berisi DOM nodes atau instances komponen.

Catatan penting dalam penggunaan refs adalah pemilihan waktu: karena refs muncul sebagai hasil dari render function, anda tidak dapat mengaksesnya pada saat initial render - karena refs belum dibuat saat itu. $refs juga tidak reaktif, sehingga anda tidak bisa menggunakannya di template untuk melakukan data-binding.
Lihat juga: Child Component Refs

is

Nilai Anggapan: string | Object (Objek 'options' komponen)

Digunakan untuk komponen dinamis dan juga sebagai solusi untuk keterbatasan dari in-DOM templates.

Sebagai contoh:

<!-- komponen berubah ketika currentView berubah -->
<component v-bind:is="currentView"></component>

<!-- perlu karena `<my-row>` akan menjadi tidak valid di dalam -->
<!-- elemen `<table>` sehingga akan otomatis dihilangkan  -->
<table>
  <tr is="my-row"></tr>
</table>

Untuk kegunaan lebih lanjut, ikuti tautan dalam deskripsi diatas.

Lihat juga:
- Komponen Dinamis
- Peringatan untuk DOM template parsing

slot ^usang

Lebih disarankan menggunakan v-slot di 2.6.0+.

Nilai Anggapan: string

Digunakan pada konten yang dimasukkan ke dalam komponen anak untuk menunjukkan pada slot mana konten tersebut akan ditempatkan.
Lihat juga: Slot Dengan Nama slot

slot-scope ^usang

Lebih disarankan menggunakan v-slot di 2.6.0+.

Nilai Anggapan: ekspresi argumen fungsi
Kegunaan:

Digunakan untuk menunjukkan sebuah elemen atau komponen sebagai scoped slot. Nilai atribut harus berupa ekspresi Javascript yang valid yang bisa muncul di posisi argument dari signature sebuah function. Ini berarti di environment yang mendukung anda juga bisa menggunakan ES2015 destructuring di dalam ekspresi JavaScript. Slot-scope merupakan pengganti scope di versi 2.5.0+.

Atribut ini tidak mendukung dynamic binding.
Lihat juga: Slot tertutup (scoped slot) dengan slot-scope

scope ^dihapus

Digantikan dengan slot-scope di 2.5.0+. Lebih disarankan menggunakan v-slot di 2.6.0+.

Digunakan untuk menunjukkan bahwa sebuah elemen <template> adalah scoped slot.

Kegunaan:

Sama seperti slot-scope, hanya saja scope hanya bisa digunakan pada elemen <template>.

Komponen Built-In

component

Props:
- is - string | ComponentDefinition | ComponentConstructor
- inline-template - boolean

Penggunaan:

“Komponen meta” untuk merender komponen dinamis. Komponen yang sesungguhnya yang di-render ditentukan oleh prop is:

<!-- komponen dinamis dikendalikan oleh -->
<!-- properti `componentId` dalam vm -->
<component :is="componentId"></component>

<!-- dapat pula merender komponen yang telah didaftarkan atau komponen dioper sebagai prop -->
<component :is="$options.components.child"></component>

Lihat juga: Komponen Dinamis

transition

Props:
- name - string, Digunakan untuk menghasilkan nama kelas CSS transisi secara otomatis. Sebagai contoh name: 'fade' akan otomatis expand ke .fade-enter, .fade-enter-active, dan lain-lain. Nilai bawaan "v".
- appear - boolean, Apakah akan menerapkan transisi dalam render awal. Nilai bawaan false.
- css - boolean, Apakah akan menerapkan class transisi CSS. Nilai bawaan true. Jika diatur menjadi false, hanya akan memicu hook Javascript teregistrasi via event komponen.
- type - string, Menentukan tipe event transisi untuk menunggu untuk memastikan waktu akhir transisi. Nilai yang tersedia adalah "transition" dan "animation". Secara bawaan, ini akan secara otomatis mendeteksi tipe yang memiliki durasi lebih lama.
- mode - string, Mengontrol urutan waktu dari transisi pergi/masuk. Mode yang tersedia adalah "out-in" dan "in-out"; nilai bawaan serentak.
- enter-class - string
- leave-class - string
- appear-class - string
- enter-to-class - string
- leave-to-class - string
- appear-to-class - string
- enter-active-class - string
- leave-active-class - string
- appear-active-class - string
Events:
- before-enter
- before-leave
- before-appear
- enter
- leave
- appear
- after-enter
- after-leave
- after-appear
- enter-cancelled
- leave-cancelled (v-show only)
- appear-cancelled

Penggunaan:

<transition> disajikan sebagai efek transisi untuk elemen/komponen tunggal. <transition> hanya menerapkan tingkah laku transisi untuk konten yang terbungkus di dalam; ini tidak merender elemen DOM tambahan, atau ditampilkan dalam hirarki komponen yang terinspeksi.

<!-- elemen sedehana -->
<transition>
  <div v-if="ok">toggled content</div>
</transition>

<!-- komponen dinamis -->
<transition name="fade" mode="out-in" appear>
  <component :is="view"></component>
</transition>

<!-- pengait event -->
<div id="transition-demo">
  <transition @after-enter="transitionComplete">
    <div v-show="ok">toggled content</div>
  </transition>
</div>

new Vue({
  ...
  methods: {
    transitionComplete: function (el) {
      // for passed 'el' that DOM element as the argument, something ...
    }
  }
  ...
}).$mount('#transition-demo')

Lihat juga: Transisi: Masuk, Pergi, dan Daftar Transisi lainnya

transition-group

Props:
- tag - string, nilai bawaan span.
- move-class - menimpa class CSS yand diterapkan selama transisi berjalan.
- membuka prop yang sama sebagai <transition> kecuali mode.
Events:
- membuka event yang sama sebagai <transition>.
Penggunaan:

<transition-group> disajikan sebagai efek transisi untuk elemen/komponen berganda. <transition-group> merender elemen DOM yang sebenarnya. Sebagai bawaan ini menernder <span>. dan Anda dapat mengkonfigurasi elemen apa yang harus dirender melalui atribut tag.

Catatan setiap child dalam <transition-group> harus memiliki kunci yang unik agar animasi bekerja dengan baik.

<transition-group> mendukung transisi berjalan melalui transform CSS. Ketika posisi sebuah child dalam layar berganti setekah pembaruan, ini akan menerapkan class CSS berjalan (otomatis dihasilkan dari atribut name atau terkonfigurasi dengan atribut move-class). Jika properti transform CSS adalah “transition-able” ketika class berjalan diterapkan, elemen akan teranimasi dengan lancar ke destinasi menggunakan teknik FLIP.
```
<transition-group tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>
```
Lihat juga: Transisi: Masuk, Pergi, dan Daftar Transisi lainnya

keep-alive

Props:
- include - string atau RegExp atau Array. Hanya komponen dengan nama yang cocok akan dimasukan cache.
- exclude - string atau RegExp atau Array. Komponen apapun dengan nama yang cocok tidak akan dimasukan cache.
- max - number. Angka maksimum dari instan komponen yang dapat masuk ke daam cache.
Penggunaan:

Kerika membungkus komponen dinamis, cache <keep-alive instan komponen tidak aktif tanpa menghancurkannya. Seperti <transition>, <keep-alive> adalah komponen abstrak: tidak merender elemen DOM sendiri, dan tidak tampil dalam rantai komponen parent.

Ketika komponen diaktifkan dalam <keep-alive>, kait siklus hidup activated dan deactivated akan diminta sesuai.

Dalam 2.2.0+ ke atas, activated dan deactivated akan menyala untuk semua komponen bersarang di dalam pohon <keep-alive>.

Terutama digunakan untuk mempertahankan state komponen atau menghindari merender ulang.
```

<keep-alive>
  <component :is="view"></component>
</keep-alive>


<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>


<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>
```
Catatan, <keep-alive> didesain untuk kasus dimana komponen memiliki satu komponen child yang sedang diaktifkan. Ini tidak bekerja jika Anda memiliki v-for di dalamnya. Ketika disana terdapat kondisional children berganda, sebagaimana di atas, <keep-alive> memerlukan hanya satu child dirender dalam satu waktu.
include and exclude

Baru di 2.1.0+

Prop include dan exclude mengijinkan komponen untuk secara kondisional dimasukan ke daam cache. Semua prop dapat menjadi string comma-delimited, sebuah RegExp atau Array:
```

<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>


<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>


<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>
```
Kecocokan adalah yang pertama kali diperiksa pada opsi name komponen itu sendiri, lalu nama registrasi lokal (kunci dalam opsi komponen parent) jika opsi name tidak tersedia. Komponen anonim tidak dapat dicocokan.
max

New in 2.5.0+

Angka maksimum dari instan komponen untuk dimasukan ke dalam cache. Saat angka ini tercapai, instan komponen dalam cache yang paling sedikit diakses akan dihancurkan sebelum membuat instan baru.
```
<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>
```
<keep-alive> tidak bekerja dengan komponen fungsional karena mereka tidak memiliki instan untuk dimasukan ke dalam cache.
Lihat juga: Komponen Dinamis - keep-alive

slot

Props:
- name - string, Digunakan untuk menamai slot.
Penggunaan:

<slot> disajikan sebagai outlet distribusi konten dalam templat komponen. <slot> sendiri akan digantikan.

Untuk detil penggunaan, lihat bagian petunjuk tautan di bawah.
Lihat juga: Distribusi konten dengan Slot

VNode Interface

Silakan merujuk ke deklarasi class VNode.

Server-Side Rendering

Silakan merujuk ke dokumentasi paket vue-server-renderer.

Pertolongan

Alat

Pustaka Inti

Berita

Daftar Sumber Daya

Pertolongan

Alat

Pustaka Inti

Berita

Daftar Sumber Daya

API 2.x 1.0 0.12 0.11

API

Konfigurasi Global

silent

optionMergeStrategies

devtools

errorHandler

warnHandler

ignoredElements

keyCodes

performance

productionTip

API Global

Vue.extend( options )

Vue.nextTick( [callback, context] )

Vue.set( target, key, value )

Vue.delete( target, key )

Vue.directive( id, [definition] )

Vue.filter( id, [definition] )

Vue.component( id, [definition] )

Vue.use( plugin )

Vue.mixin( mixin )

Vue.compile( template )

Vue.observable( object )

Vue.version

Opsi / Data

data

props

propsData

computed

methods

watch

Opsi / DOM

el

template

render

renderError

Opsi / Kait Siklus hidup

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

activated

deactivated

beforeDestroy

destroyed

errorCaptured

Opsi / Assets

directives

filters

components

Opsi / Composition

parent

mixins

extends

provide / inject

Opsi / Lain-lain

name

delimiters

functional

model

inheritAttrs

comments

Properti Instance

vm.$data

vm.$props

vm.$el

vm.$options

API

slot ^usang

slot-scope ^usang

scope ^dihapus