Vue-da maglumatlary girizýän ýerlerde iki tarapa baglanyşyk

Indi biz Vue freýmworkinde girizýän ýerler bilen işlemegi öwreneris. Olaryň kömegi bilen sahypa maglumatlary reaktiw goşup göreris. Başlaýaly. Bizde girizýän ýer bolsun:

App.vue<template>
  <input>
</template>

Şeýle hem, bizde message aýratynlygy bolsun:

javascriptdata() {
  return {
    message: 'hello',
  }
}

Biz bu aýratynlyk we girizýän ýeri şeýle baglap bileris, ýöne olaryň biriniň üýtgemegi beýleki üýtgemegine getirer. Bu v-model direktiwasy bilen ýerine ýetirilýär, onda girizýän ýere baglanan aýratynlyk görkezilýär.

Geliň, girizýän ýerimize message aýratynlygyny baglaýaly:

App.vue<template>
  <input v-model="message">
</template>

Kody işledeniňizden soň, girizýän ýerde message aýratynlygynyň teksti bolar. Eger-de girizýän ýerdäki maglumatlary redaktirleseňiz - aýratynlyk hem şol derejede üýtgerer. Muny görmek üçin, geliň girizýän ýere girizilýän mazmuny nähili bolsa bir abzasda görkezeliň:

App.vue<template>
  <input v-model="message">
  <p>{{ message }}</p>
</template>