Vue 중요 메서드 정리

Vue.js는 JavaScript 프레임워크로, 사용자 인터페이스를 만들기 위해 설계되었습니다. 여러 가지 중요한 Vue 메서드가 있지만, 여기서는 주요 메서드 몇 가지와 간단한 예제를 제공하겠습니다.

 

1. new Vue(options)

Vue 인스턴스를 생성하는 메서드입니다. options 객체에는 Vue 인스턴스의 구성 정보가 포함됩니다.

<div id="app">
  {{ message }}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    }
  });
</script>

 

2.data 속성

Vue 인스턴스의 데이터를 정의하는 속성입니다. 데이터 변경 시 자동으로 화면을 업데이트합니다.

<div id="app">
  {{ message }}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    }
  });

  // 데이터 변경
  vm.message = 'Vue is awesome!';
</script>

 

3.methods 속성

Vue 인스턴스의 메서드를 정의하는 속성입니다.

<div id="app">
  <button v-on:click="changeMessage">Change Message</button>
  {{ message }}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    },
    methods: {
      changeMessage: function() {
        this.message = 'New message!';
      }
    }
  });
</script>

 

4. computed 속성

계산된 속성을 정의하는 속성입니다. 종속성이 변경될 때만 다시 계산됩니다.

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

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: 'John',
      lastName: 'Doe'
    },
    computed: {
      fullName: function() {
        return this.firstName + ' ' + this.lastName;
      }
    }
  });
</script>

 

5. watch 속성

데이터의 변화를 감시하고, 변화가 감지될 때 특정 동작을 수행하는 속성입니다.

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    },
    watch: {
      message: function(newValue, oldValue) {
        console.log('Message changed:', newValue);
      }
    }
  });

  // 데이터 변경
  vm.message = 'Vue is awesome!';
</script>

 

이것은 Vue.js에서 사용되는 몇 가지 중요한 메서드와 그에 대한 간단한 예제입니다. 더 자세한 내용은 Vue.js 공식 문서를 참조하십시오.