Directives, methods, computed, watch

Directives : HTML엘리먼트에 추가동작을 부여하는 특별한 속성.

👉🏻 Directive(디렉티브)는 Vue.js의 핵심 기능 중 하나로, HTML 엘리먼트의 동작을 확장할 수 있도록 하는 속성입니다. v- 접두사를 사용하여 표시하며, DOM 조작, 이벤트 처리, 데이터 바인딩 등의 역할을 수행할 수 있습니다.

주요 디렉티브는 다음과 같습니다.

• v-if: 조건부 렌더링을 위해 사용되며, 값에 따라 엘리먼트를 화면에 표시하거나 숨깁니다.
• v-for: 리스트 렌더링을 위해 사용되며, 배열 또는 객체의 각 요소를 반복하여 화면에 표시합니다.
• v-bind: 엘리먼트의 속성(attribute)을 동적으로 설정하기 위해 사용됩니다.
• v-model: 양방향 데이터 바인딩을 위해 사용되며, 폼 컨트롤 요소의 값과 Vue 인스턴스의 데이터를 동기화합니다.
• v-on: 이벤트 처리를 위해 사용되며, 사용자 입력에 대한 이벤트를 처리하여 해당 동작을 실행합니다.

이 외에도 다양한 디렉티브들이 존재합니다.

1. v-on

   • 이벤트 리스너를 등록하는 디렉티브.
   • v-on : 이벤트명, 만약 클릭이라면
   • v-on : click
   • 해당되는 이벤트가 발생하면 지정된 메서드가 실행된다.

   <a v-on:click="linkClick">링크를 클릭해봐!</a>
   <a @click="linkClick">링크를 클릭해봐!</a>
   new vue({
       methods: {
           linkClick : function(){
               alert("링크를 클릭했네?");
           }
       }
   })

2. v-bind

   • 엘리먼트 속성을 동적으로 바인딩하는 디렉티브.
   • vue의 데이터의 값을 해당되는 속성에다가 부여하고 싶을 때 사용함.
     <a. v-bind: href=”message”> 네이버 링크 </a.>
     shortcut → <a. : href=”message”> 네이버 링크 </a.>

   <a v-bind:href="message">네이버 링크</a>
   <a :href="message">네이버 링크</a>
   
   new vue({
       data: {
           message:"https://www.naver.com"
       }
   })

3. v-if

   • 조건부 렌더링을 수행하는 디렉티브. 지정된 값이 참이면 해당 엘리먼트 렌더링
   • <!— —> DOM에서도 안보이게 됨.

4. v-show

   • 조건부 렌더링을 수행하는 디렉티브. 지정된 값이 참이면 해당 엘리먼트를 숨기거나 보여주는 역할
   • style = “display: none”

5. v-for

   • 배열을 순회하면서 렌더링을 수행하는 디렉티브. 지정된 배열의 각 항목에 대해서 템플릿을 반복으로 렌더링을 수행해준다.
   • 아래 button.id에는 backtick 추가

   <button v-for="button in buttons" v-bind:key="`btn-${button.id}`">
       <span>내용은 아래와 같습니다</span>
       <span>{{button.title}}</span>
   </button>
   new vue({
       data: {
           buttons:[
               {id: 1, title: "안녕하세요"},
               {id: 2, title: "안녕하세요"},
               {id: 3, title: "안녕하세요"},
               {id: 4, title: "안녕하세요"},
           ]
       }
   })

methods, computed, watch

👉🏻

methods, computed, watch는 Vue.js에서 데이터 변화를 감지하고 이에 따른 처리를 수행하기 위한 세 가지 옵션입니다.

• methods: Vue 인스턴스의 메소드를 정의할 때 사용합니다. 일반적으로 이벤트 핸들러와 같이 동작하며, 해당 메소드를 호출하는 이벤트가 발생하면 실행됩니다.
• computed: Vue 인스턴스의 계산된 속성을 정의할 때 사용합니다. 데이터를 기반으로 계산되며, 응용 프로그램에서 특정 값이 변경될 때 자동으로 다시 계산됩니다.
• watch: Vue 인스턴스의 속성을 감시하고 이에 대한 처리를 수행할 때 사용합니다. 속성의 값이 변경되면 즉시 수행되며, 비동기식 처리도 가능합니다.

각 옵션의 사용 예시를 간단히 설명하면 다음과 같습니다.

• methods: 버튼 클릭과 같은 이벤트 핸들러를 정의할 때 사용합니다. 다음 예시는 버튼 클릭시 메시지를 출력하는 메소드를 정의하는 방법입니다.

methods: {
  showMessage: function() {
    alert('Hello, Vue!');
  }
}

• computed: 데이터를 계산하여 반환하는 계산된 속성을 정의할 때 사용합니다. 다음 예시는 이름과 나이를 결합하여 전체 이름을 반환하는 계산된 속성을 정의하는 방법입니다.

computed: {
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
}

• watch: 속성의 값 변화를 감시하고 처리하는 방법을 정의할 때 사용합니다. 다음 예시는 name 속성이 변경될 때마다 sayHello 메소드를 실행하는 방법입니다.

watch: {
  name: function() {
    this.sayHello();
  }
},
methods: {
  sayHello: function() {
    alert('Hello, ' + this.name + '!');
  }
}

1. methods : Vue 인스턴스에 사용할 수 있는 함수
   • Vue 컴포넌트 내에서 로직 처리, 이벤트 처리 등으로 사용.
2. computed : Vue 인스턴스에 사용할 수 있는 계산된 속성이다.
   • computed 속성은 data 속성과 마찬가지로 관찰(obseve)가 수행된다.
   • computed 속성도 동일하게 참조하는 값(data)가 변경될 때마다.. 자동으로 계산이 수행된다. 배열필터, 홀수 값 정도?
3. watch: Vue 인스턴스에 data가 변경이 될 때마다 해당되는 handler가 호출이 되는 콜백 함수를 넣을 수 있다...

new Vue({
    data:{
        message: [1,2,3,4,5]
    }
    watch: {
        message: {
            handler(newMessage, oldMessage){
            console.log("현재 바뀐 데이터", newMessage);
            console.log("이전 데이터", oldMessage);
            },
            deep: true,
        }
    }
})