반응형

자주 쓰이는 디렉티브를 정리해보겠다!

자세한거는 https://v3-docs.vuejs-korea.org/api/built-in-directives.html 👈 요기를 참고하길 바란다.

아 그리고 예제가 뷰2 문법으로 작성되있는데 data나 method부분을 setup()으로만 옮기면 뷰3 문법이니까 디렉티브 사용하는거는 똑같다고 보면 될 것 같다

Directive 기본 구성

  • v-접두사가 있는 특수 속성에는 값을 할당 할 수 있음
    • 값에는 JS 표현식을 작성 할 수 있음
  • directive의 역할은 표현식의 값이 변경될 때 반응적으로 DOM에 적용하는 것

v-text

  • Template Interpolation과 함께 가장 기본적인 바인딩 방법
  • {{}} 와 동일한 역할 (정확히 동일한 역할인 것은 아님)
<div>
  <p v-text="message"></p>
  <p>{{ message }}</p>
</div>

 

v-show, v-if

  • v-show
    • 표현식에 작성된 값에 따라 element를 보여 줄 것인지 결정
      • boolean 값이 변경 될 때 마다 반응
    • 대상 element의 display 속성을 기본 속성과 none으로 toggle
    • 요소 자체는 항상 DOM에 렌더링 됨
  • v-if
    • v-show와 사용 방법은 동일
    • isActive의 값이 변경 될 때 반응
    • 단, 값이 false인 경우 DOM에서 사라짐
    • v-if v-else-if v-else 형태로 사용
  • v-show VS v-if
    • v-show(Expensive initial load, cheap toggle)
      • 표현식 결과와 관계 없이 렌더링 되므로 초기 렌더링에 필요한 비용은 v-if 보다 높을 수 있음
      • display 속성 변경으로 표현 여부를 판단하므로 렌더링 후 toggle 비용은 적음
    • v-if (Cheap initial load, expensive toggle)
      • 표현식 결과가 false인 경우 렌더링조차 되지 않으므로 초기 렌더링 비용은 v-show 보다 낮을 수 있음
      • 단, 표현식 값이 자주 변경되는 경우 잦은 재 렌더링으로 비용이 증가 할 수 있음

=> 자주 값이 토글될거 같은 요소는 v-show를 사용하고 자주 안바뀌는 거는 v-if를 쓰는게 좋을것같다.

<div id="app3">
  <p v-show="isActive">보이니? 안보이니?</p>
  <p v-if="isActive">안보이니? 보이니?</p>
</div>
<script>

  const app3 = new Vue({
    el: '#app3',
      data: {
        isActive: true
      }
    })
</script>

 

v-for

  • for .. in .. 형식으로 작성
  • 반복한 데이터 타입에 모두 사용 가능
  • index를 함께 출력하고자 한다면 (char, index)형태로 사용 가능
  • 배열 역시 문자열과 동일하게 사용 가능
  • 각 요소가 객체라면 dot notation으로 접근 할 수 있음
  • v-for 사용 시 반드시 key 속성을 각 요소에 작성
  • 각 요소가 고유한 값을 가지고 있지 않다면 생략할 수 있음
<body>
  <!-- 3. v-for -->
  <div id="app">
    <h2>String</h2>
    <div v-for="char in myStr">
      {{ char }}
    </div>
    <div v-for="(char, index) in myStr" :key="index">
      <p>{{ index }}번째 문자열 {{ char }}</p>
    </div>

    <h2>Array</h2>
    <div v-for="(item, index) in myArr" :key="index">
      <p>{{ index }}번째 아이템 {{ item }}</p>
    </div>

    <div v-for="(item, index) in myArr2" :key="`arry-${index}`">
      <p>{{ index }}번째 아이템</p>
		  <p>{{ item.name }}</p>
    </div>

    <h2>Object</h2>
    <div v-for="value in myObj">
      <p>{{ value }}</p>
    </div>

    <div v-for="(value, key) in myObj"  :key="key">
      <p>{{ key }} : {{ value }}</p>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 1. String
        myStr: 'Hello, World!',

        // 2-1. Array
        myArr: ['python', 'java', 'vue.js'],

        // 2-2. Array with Object
        myArr2: [
          { id: 1, name: 'python', completed: true},
          { id: 2, name: 'java', completed: true},
          { id: 3, name: 'vue.js', completed: false},
			  ],
        
        // 3. Object
        myObj: {
          name: 'moo',
          age: 28
        },
      }
    })
  </script>
</body>

 

v-on

  • @ shortcut 제공 (@로 써도 된다는 말씀!)
  • ":"을 통해 전달받은 인자를 확인
  • 값으로 JS표현식 작성
  • addEventListener의 첫 번째 인자와 동일한 값들로 구성
  • 대기하고 있던 이벤트가 발생하면 할당된 표현식 실행

 

<div id="app">
  <button v-on:click="number++">increase Number</button>
  <p>{{ number }}</p>

  <button v-on:click="toggleActive">toggle isActive</button>
  <p>{{ isActive }}</p>

  <button @click="checkActive(isActive)">check isActive</button>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      number: 0,
      isActive: false,
    },
    methods: {
      toggleActive: function () {
        this.isActive = !this.isActive
      },

      checkActive: function (check) {
        console.log(check)
      }
    }
  })
</script>

v-bind

 

  • ":" shortcut 제공
  • HTML 기본 속성에 Vue data를 연결
  • class의 경우 다양한 형태로 연결 가능
    • 조건부 바인딩
      • {'class Name':'조건 표현식'}
    • Vue.js에서 태그 안에 :class가 들어가면 이는 "동적 클래스 바인딩"을 의미
    <div :class="{ 'class-name': condition }"></div>
    • 위의 예제에서 class-name은 클래스의 이름이고, condition은 평가되는 표현식, condition의 결과가 true이면 해당 요소에 class-name 클래스가 추가되고, false이면 제거
      • 삼항 연산자도 가능
    • 다중 바인딩
      • ['JS표현식', 'JS표현식',...]
  • Vue data의 변화에 반응하여 DOM에 반영하므로 상황에 따라 유동적 할당 가능
<div id="app2">
  <a v-bind:href="url">Go To GOOGLE</a>

  <p v-bind:class="redTextClass">빨간 글씨</p>  
  <p v-bind:class="{ 'red-text': true }">빨간 글씨</p>
  <p v-bind:class="[redTextClass, borderBlack]">빨간 글씨, 검은 테두리</p>

  <p :class="theme">상황에 따른 활성화</p>
  <button @click="darkModeToggle">dark Mode {{ isActive }}</button>
</div>
<script>
const app2 = new Vue({
  el: '#app2',
    data: {
      url: 'https://www.google.com/',
      redTextClass: 'red-text',
      borderBlack: 'border-black',
      isActive: true,
      theme: 'dark-mode'
    },
    methods: {
      darkModeToggle() {
        this.isActive = !this.isActive
        if (this.isActive) {
          this.theme = 'dark-mode'
        } else {
          this.theme = 'white-mode'
        }
      }
    }
  })
</script>

 

대략 자주 쓰이는 디렉티브는 이정도 인 것 같다.

거의다 설명을 해놨지만 헷갈리는 부분이 있다면 공식문서나 다른 블로그를 찾아봐라!

혹시나 틀린 정보가 있다면 댓글 남겨줘라!

반응형
저작자표시 비영리 변경금지

'개발💻 > Vue' 카테고리의 다른 글

[Vue] Vue 정리하기(5) - Vue3 composition api 1편  (0) 2023.09.18
[Vue] Vue 정리하기(4) - Vue Router  (0) 2023.09.15
[Vue] Vue 정리하기(3) - Vuex  (1) 2023.09.14
[Vue] Vue 정리하기(1) - Vue CLI, Component  (0) 2023.09.14
[Vue] Vue 정리하기(0) - 뷰를 시작하기 앞서  (2) 2023.09.13

티스토리툴바