vue에서 값을 얻는 방법

Vue는 양방향 바인딩을 위한 구문 설탕을 제공하는 인기 있는 웹 개발 프레임워크입니다. Vue에서는 페이지의 데이터를 쉽게 얻고 실시간으로 변경 사항에 대응할 수 있습니다. 이 기사에서는 Vue에서 값을 얻는 방법을 살펴보겠습니다.

Vue에서 값을 얻는 방법에는 크게 두 가지가 있습니다. 하나는 명령어를 사용하는 것이고, 다른 하나는 계산된 속성을 사용하는 것입니다.

명령을 사용하여 값 얻기

Vue는 페이지에서 입력, 선택 및 기타 유형의 값을 쉽게 얻을 수 있는 몇 가지 지침을 제공합니다.

v-model 지시어

v-model 지시어는 Vue에서 값을 얻기 위해 가장 일반적으로 사용되는 지시어입니다. 양식 요소의 값을 바인딩하고 사용자가 입력할 때 자동으로 데이터를 업데이트하는 데 사용할 수 있습니다. 예를 들어 다음 코드에서는 v-model 지시문을 사용하여 입력 상자의 값을 데이터 객체의 메시지 속성에 바인딩합니다.

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

이제 입력 상자에 텍스트를 입력하면 Vue가 자동으로 업데이트됩니다. 백그라운드에서 데이터의 메시지 속성 값은 p 태그에도 표시됩니다.

v-bind 지시어

v-bind 지시어는 템플릿에서 하나 이상의 속성을 동적으로 바인딩하는 데 사용할 수 있습니다. 예를 들어, 다음 코드에서는 v-bind를 사용하여 a 태그의 href 속성을 데이터 객체의 url 속성에 바인딩합니다.

<div id="app">
  <a v-bind:href="url">Vue.js</a>
</div>

var app = new Vue({
  el: '#app',
  data: {
    url: 'https://vuejs.org/'
  }
})

v-on 지시문

v-on 지시문을 사용하여 이벤트를 바인딩할 수 있습니다. . 예를 들어 다음 코드에서는 v-on을 사용하여 버튼 태그의 클릭 이벤트를 바인딩합니다. 버튼을 클릭하면 Vue는 자동으로 데이터 객체의 증가 메소드를 호출합니다.

<div id="app">
  <button v-on:click="increment">{{ count }}</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment: function () {
      this.count++
    }
  }
})

계산된 속성을 사용하여 value

Vue에서는 계산된 속성을 사용하여 값을 얻을 수도 있습니다. 계산된 속성은 값이 다른 데이터의 계산을 기반으로 하는 캐싱 메커니즘이 있는 속성입니다. 의존하는 데이터가 변경되면 자동으로 다시 계산됩니다.

계산 속성의 기본 사용법

예를 들어 다음 코드에서는 reversedMessage라는 계산 속성을 선언합니다. 이 속성의 값은 데이터 객체에 있는 message 속성의 역 문자열입니다.

<div id="app">
  <input v-model="message">
  <p>{{ reversedMessage }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

계산 속성 get 및 set 메소드

get 메소드를 통해 계산된 속성의 값을 정의하는 것 외에도 set 메소드를 통해 계산된 속성의 값을 정의할 수도 있습니다. 예를 들어, 아래 코드에서는 데이터 객체의 firstName 및 lastName 속성을 연결한 값을 갖는 fullName이라는 계산된 속성을 선언합니다. fullName의 값을 수정하면 Vue는 자동으로 set 메소드를 호출하여 데이터 객체의 firstName 및 lastName 속성을 동시에 업데이트합니다.

<div id="app">
  <input v-model="firstName">
  <input v-model="lastName">
  <p>{{ fullName }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
})

Summary

Vue에서는 v-model, v-bind를 사용할 수 있습니다. , v-On 및 페이지의 데이터를 얻기 위한 기타 지침, 계산된 속성을 사용하여 데이터를 계산하여 새 값을 생성할 수도 있습니다. 이러한 방법을 통해 Vue는 데이터를 얻는 매우 편리한 방법을 제공하여 다양한 비즈니스 요구에 쉽게 대응할 수 있습니다.

위 내용은 vue에서 값을 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!