Vue 인스턴스 객체의 공통 속성과 메서드에 대해 이야기해 보겠습니다.

Vue.js는 데이터 기반 및 구성 요소화된 보기 기능을 구현할 수 있는 프런트 엔드 프레임워크입니다. Vue.js 애플리케이션에서 각 Vue 인스턴스 객체에는 Vue 개발에 매우 ​​중요한 고유한 속성과 메서드가 있습니다. 이 글에서는 Vue 인스턴스 객체의 공통 속성과 메서드를 소개합니다.

Vue 인스턴스 객체 속성

data

모든 Vue 인스턴스 객체에는 Vue 인스턴스 객체에 데이터를 저장하는 루트 객체인 data 속성이 있어야 합니다. 이는 Vue의 데이터 기반 구현의 핵심 측면 중 하나입니다. 예를 들어 Vue 인스턴스를 다음과 같이 정의합니다.

var vm = new Vue({
  data: {
    message: 'Hello World!'
  }
})

위의 Vue 인스턴스에서는 데이터 객체가 정의되고 'Hello World!'라는 문자열이 초기화됩니다. 이 메시지 속성은 Vue 템플릿에서 사용할 수 있습니다.

props

propsProperties는 상위 구성 요소에서 데이터를 수신하는 방법입니다. Vue 구성 요소 인스턴스 객체의 속성이며 상위 구성 요소에서 구성 요소를 사용자 정의할 때 매개 변수를 전달하는 데 사용됩니다. 다른 구성 요소 내에 구성 요소가 정의되면 props를 사용하여 상위 구성 요소에서 하위 구성 요소로 데이터를 전달할 수 있습니다. 예:

Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{message}}</div>'
})

var vm = new Vue({
  el: '#app',
  data: {
    parentMessage: 'Hello World!'
  }
})

<div id="app">
  <child-component :message="parentMessage"></child-component>
</div>

위의 예에서는 props 속성이 있고 message라는 속성을 정의하는 child-comComponent라는 구성 요소를 만들었습니다. 상위 구성 요소의 메시지 속성을 바인딩하면 상위 구성 요소가 사용자 정의된 하위 구성 요소에 데이터를 전달할 수 있으므로 해당 데이터를 사용하여 하위 구성 요소의 템플릿을 사용자 정의할 수 있습니다.

computed

computed 속성은 Vue 인스턴스 객체의 계산된 속성입니다. 템플릿에 사용된 데이터가 다른 데이터의 변경에 따라 변경되어야 하는 경우 계산 속성을 통해 계산 속성을 생성할 수 있습니다. 예:

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

위의 예에서는 메시지 속성의 값을 반전시켜 얻은 계산된 속성 reversedMessage을 정의했습니다. 메시지가 변경되면 계산된 속성도 변경됩니다.

methods

Vue 인스턴스 객체의 methods 속성에는 Vue 인스턴스 객체에서 함수로 정의되는 재사용 가능한 메소드가 포함되어 있습니다. Vue 인스턴스 객체가 동적 이벤트를 처리해야 하는 경우 메소드 속성을 사용할 수 있습니다. 예:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

위의 예에서는 메시지 속성의 값을 반대로 바꾸는 reverseMessage 메서드를 정의했습니다. 이 메소드는 Vue 템플릿의 v-on 지시문을 통해 호출할 수 있습니다.

watch

watch 속성은 Vue 인스턴스 객체의 데이터 변경 사항을 모니터링하는 데 사용됩니다. Vue 인스턴스 객체의 모니터링되는 데이터가 변경되면 watch 속성이 자동으로 함수를 실행합니다. 예:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  watch: {
    message: function(val) {
      console.log('message changed to', val)
    }
  }
})

위의 예에서는 message 속성이 변경될 때 모니터링할 watch 속성을 정의했으며, watch 속성의 메서드가 실행되어 변경된 값을 콘솔에 인쇄합니다.

Vue 인스턴스 객체 메서드

$watch

인스턴스 메서드$watch**는 Vue 인스턴스 객체의 데이터 변경 사항을 모니터링하는 데 사용됩니다. Vue 인스턴스 객체의 모니터링 데이터가 변경되면 **$watch 메서드가 자동으로 함수를 실행합니다. 예:

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

vm.$watch('message', function(val) {
  console.log('message changed to', val)
})

위의 예에서는 $watch 메서드를 사용하여 메시지 속성의 변경 사항을 모니터링하고 변경 시 정보를 인쇄합니다.

$on

$on 메소드는 Vue 인스턴스 객체에 이벤트 리스너를 등록하는 데 사용됩니다. 예:

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

vm.$on('message-changed', function(val) {
  console.log('message changed to', val)
})

위의 예에서는 $on 메소드를 사용하여 Vue 인스턴스 객체에 message-changed라는 이벤트를 등록합니다. 메시지 속성이 변경되면 이벤트가 발생합니다.

$emit

$emit 메소드는 Vue 인스턴스 객체에서 이벤트를 트리거하는 데 사용됩니다. 예:

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

vm.$on('message-changed', function(val) {
  console.log('message changed to', val)
})

vm.$emit('message-changed', 'Hello World!')

위의 예에서는 $emit 메소드를 사용하여 message-changed라는 이벤트를 트리거하고 이벤트 매개변수를 Hello World!로 설정했습니다.

$nextTick

$nextTick 메소드는 Vue 인스턴스 객체의 DOM이 업데이트된 후 콜백을 실행하는 데 사용됩니다. 예:

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

vm.$nextTick(function() {
  console.log('DOM updated')
})

위의 예에서는 $nextTick 메서드를 사용하여 Vue 인스턴스 객체의 DOM이 업데이트된 후 콜백을 실행합니다.

Summary

Vue 인스턴스 객체는 Vue 개발에서 매우 중요한 개념입니다. Vue 인스턴스 객체를 생성할 때 해당 속성과 메서드를 이해해야 합니다. 이 기사에서는 데이터, 소품, 계산, 메소드, watch, $watch, $on, $emit 및 $nextTick 등을 포함한 Vue 인스턴스 객체의 일반적인 속성과 메소드를 간략하게 소개합니다. 이러한 속성과 메서드는 Vue 개발을 더욱 유연하고 편리하게 만듭니다.

위 내용은 Vue 인스턴스 객체의 공통 속성과 메서드에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!