[TIL] Vue(3)

JaeungE·2022년 5월 10일
0

TIL

목록 보기
21/29
post-thumbnail

조건부 렌더링


v-if

  • HTML 엘리먼트에 v-if 디렉티브를 이용해서 반응형 데이터가 truthy 혹은 falsy인지에 따라 렌더링 여부를 결정할 수 있다.

<div v-if="true">Content1</div>
<div v-else-if="0">Content2</div>
<div v-else>Content3</div>
  • v-if, v-else-if, v-else 디렉티브가 적용된 요소 사이에 다른 요소가 추가되면 안 된다.

  • v-if 디렉티브이기 때문에 엘리먼트에 추가되어야 하므로, 렌더링 결과에 v-if가 추가된 엘리먼트를 제외하고 싶다면 <template> 태그로 래핑해야 한다.

  • 초기 렌더링 비용이 낮으며, 전환 비용이 높다.



v-show

  • v-if와 다르게 조건에 상관 없이 엘리먼트를 HTML 구조에 출력한 뒤, inline styledisplay: none 속성을 변경하는 형태로 작동한다.

  • v-show가 추가된 엘리먼트 내부에 보간을 이용해 반응형 데이터를 출력하는 경우, 컴파일되지 않은 보간 문법이 노출될 수 있으므로 v-cloak 과 같이 사용한다.

  • 초기 렌더링 비용이 높으며, 전환 비용이 낮다.





리스트 렌더링


  • <li v-for=”(item [, index]) in items”>somValue</li> 문법을 이용해서 배열 데이터를 렌더링 한다.

  • <li v-for=”(value [, key ] [, index]) in object”>someValue</li> 문법을 이용해서 객체 데이터를 렌더링 한다.

  • 간단한 리스트 렌더링 예제

HTML

<html>
  <head>
    <title>List Test</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div class="list-container">
      <ul id="array-list">
        <li v-for="fruit in fruits">
          {{ fruit.name }}
        </li>
      </ul>
      <input v-model.trim="fruitName" />
      <button @click="addFruit">Add Fruit!</button>
      <button @click="deleteLastFruit">Delete Fruit!</button>
    </div>
    <script src="/main.js" type="module"></script>
  </body>
</html>

JS

const FruitList = {
  data() {
    return {
      fruitName: '',
      fruits: [
        { name: 'apple' },
        { name: 'banana' },
        { name: 'grape' },
        { name: 'lime' },
        { name: 'lemon' },
      ]
    }
  },
  methods: {
    addFruit() {
      const { fruits, fruitName } = this;

      if (fruitName.length > 0) {
        fruits.push({ name: fruitName });
        this.fruitName = '';
      }
    },
    deleteLastFruit() {
      const { fruits } = this;
      this.fruits = fruits.slice(0, fruits.length - 1);
    }
  }
}

Vue.createApp(FruitList).mount('.list-container');
  • 리스트의 상태가 변할 때, 효율적인 렌더링을 위해 key 값을 이용하며, keyString 혹은 Number 타입만 사용하도록 한다.

  • v-forv-if를 하나의 엘리먼트에 추가하게 되면, v-if가 우선하기 때문에 별도로 래핑하는 태그가 필요하다.





이벤트 핸들링


  • 아래처럼 v-on:eventName 디렉티브를 이용해서 이벤트 핸들러를 등록하며, @eventName으로 축약해서 표현이 가능하다.

<button v-on:click="addEvent">add Button</button>
<button @click="addEvent">add Button</button>

  • 이벤트 이름을 바인딩 하는 대신 inline으로 메서드 호출 또한 가능하며, 이러한 경우 $event를 이용해서 event 객체를 명시적으로 전달해야 한다.

  • inline 메서드 호출 시, , 혹은 ;로 메서드를 구분해서 동시에 여러 메서드를 호출할 수 있다.

  • 기본 동작은 버블링(bubbling)이다.

  • 수식어는 키 수식어 | Vue.jsv-on 디렉티브 | Vue.js를 참고하자.





폼 입력 바인딩


  • 양방향 데이터 바인딩을 위해서는 아래처럼 작성해야 한다.
<body>
  <div id="app">
    <h1>title : {{ message }}</h1>
    <input :value="message" @input="updateMessage" />
  </div>
  <script>
    const App = {
      data() {
        return {
          message: 'Default Message'
        }
      },
      methods: {
        updateMessage(e) {
          this.message = e.target.value;
        }
      }
    };

    const app = Vue.createApp(App).mount('#app');
  </script>
</body>

  • v-model 디렉티브를 이용하면 아래처럼 간결하게 양방향 데이터 바인딩이 가능하다.
<body>
  <div id="app">
    <h1>title : {{ message }}</h1>
    <input v-model="message" />
  </div>
  <script>
    const App = {
      data() {
        return {
          message: 'Default Message'
        }
      }
    };

    const app = Vue.createApp(App).mount('#app');
  </script>
</body>
  • v-model 디렉티브 사용 시, 한글 입력이 지연되는 문제가 있다. 기존의 양방향 데이터 바인딩 방식을 사용하면 해결된다.

  • v-model 디렉티브를 사용한 폼 엘리먼트의 value, checked, selected는 무시된다.





참고 자료

조건부 렌더링 | Vue.js

리스트 렌더링 | Vue.js

이벤트 핸들링 | Vue.js

폼 입력 바인딩 | Vue.js

0개의 댓글