Vue 3

title: Vue.js 기초

3.2 기본 디렉티브

3.2.1 v-text, v-html 디렉티브

v-text –> text로 출력

흔히 사용하는 형식으로 사용

<div id="app">
  <p v-html="message"></p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: '<strong>안녕하세요!</strong> <em>Vue.js</em>를 사용해보세요.'
    }
  });
</script>

v-html –> html 코드를 삽입할 수 있다고 한다.

3.2.2 v-bind 디렉티브

<div id="app">
  <a v-bind:href="url">Go to Vue.js</a>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      url: 'https://vuejs.org'
    }
  });
</script>

에시를 보면 url 을 동적으로 바인딩하여 속성값을 자동으로 업데이트 한다. v-bind:src 를 그냥 :src 이런식으로 줄여 쓰기도 가능하다.

다음은 단축어들의 예시이다

  v-bind shorthand: : 
  <a :href="url">Go to Vue.js</a> 
  <img :src="imageUrl" />
  
  
  v-bind:value shorthand: 
  :value 
  <input :value="inputValue" />

  v-on shorthand: @ 
  <button @click="doSomething">Click Me</button>
  <div @mouseover="handleMouseOver">Hover over me</div>

  v-model: 
  <input v-model="inputValue" />

  v-for: 
  <ul>
    <li v-for="item in items" :key="item.id"></li>
  </ul>

  v-if, v-else, v-else-if:
  <p v-if="condition">조건이 참일 때 보여집니다</p>
  <p v-else>조건이 거짓일 때 보여집니다</p>

3.3 v-model 디렉티브

3.3.1 기본 사용법

<div id="app">
  <input v-model="message" placeholder="메시지를 입력하세요">
  <p>입력된 메시지: </p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: ''
    }
  });
</script>

위의 v-bind 예시와 다를게 없어 보이지만 차이점은 v-model은 양방향 바인딩이기 때문에 사용자가 값을 입력하면 실시간으로 message가 업데이트 된다.

struct ContentView: View {
    @State private var message: String = ""
    
    var body: some View {
        VStack {
            TextField("메시지를 입력하세요", text: $message) // $message는 바인딩
            Text("입력된 메시지: \(message)")
        }
    }
}

3.3.2 v-model 수식어

수식어	설명
v-model.trim	입력 값의 앞뒤 공백을 자동으로 제거합니다.
v-model.number	입력 값을 숫자로 변환하여 바인딩합니다.
v-model.lazy	input 이벤트 대신 change 이벤트에 바인딩됩니다.
v-model.defer	input 요소의 값이 변경되었을 때 즉시 업데이트하지 않고, 사용자 입력이 완료된 후 업데이트됩니다.

3.4 조건 렌더링 디렉티브

3.4.1 v-show

<div id="app">
  <p v-show="isVisible">이 텍스트는 조건이 참일 때만 보여집니다.</p>
  <button @click="toggleVisibility">Toggle Visibility</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      isVisible: true
    },
    methods: {
      toggleVisibility() {
        this.isVisible = !this.isVisible;
      }
    }
  });
</script>

설명: v-show 해당 예시에서는 참일 때만 텍스트를 보이게 하여 div를 가리게 할 수 있다. DOM에서 요소를 제거하지 않고 display:none을 통해 요소를 숨긴다고 하는데 이 부분에서는 추후에 공부가 필요할 것 같다.

3.4.2 v-if

<div id="app">
  <p v-if="isVisible">이 텍스트는 조건이 참일 때만 보여집니다.</p>
  <button @click="toggleVisibility">Toggle Visibility</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      isVisible: true
    },
    methods: {
      toggleVisibility() {
        this.isVisible = !this.isVisible;
      }
    }
  });
</script>

설명: v-if는 조건이 참일 때만 해당 div를 보여준다. v-show와 달리 요소를 DOM에서 완전히 제거한다고 한다.

3.4.3 v-else, v-else-if 디렉티브

<div id="app">
  <p v-if="isVisible">이 텍스트는 조건이 참일 때만 보여집니다.</p>
  <p v-else-if="isOtherCondition">다른 조건이 참일 때 보여집니다.</p>
  <p v-else>조건이 거짓일 때 보여집니다.</p>
  <button @click="toggleVisibility">Toggle Visibility</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      isVisible: true,
      isOtherCondition: false
    },
    methods: {
      toggleVisibility() {
        this.isVisible = !this.isVisible;
        this.isOtherCondition = !this.isOtherCondition;
      }
    }
  });
</script>

설명: v-else와 v-else-if는 조건부 렌더링에서 v-if와 함께 사용된다. v-else-if는 다른 조건을 추가하고, v-else는 나머지 경우에 해당하는 요소를 렌더링합니다.

3.5 반복 렌더링 디렉티브

3.5.1 v-for 디렉티브

v-for 디렉티브는 배열이나 객체를 반복하여 출력한다.

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id"></li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' }
      ]
    }
  });
</script>

3.5.2 여러 요소를 묶어서 반복 렌더링하기

<div id="app">
  <div v-for="(item, index) in items" :key="item.id">
    <h3></h3>
    <p></p>
  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { id: 1, name: 'Apple', description: 'A sweet fruit' },
        { id: 2, name: 'Banana', description: 'A yellow fruit' },
        { id: 3, name: 'Cherry', description: 'A small red fruit' }
      ]
    }
  });
</script>

이런 식으로 여러 요소를 묶어 반복하면서 테이블 같은 경우도 구현할 수가 있다.

3.5.3 v-for 디렉티브와 key 특성

  <div id="app">
  <ul>
    <li v-for="item in items" :key="item.id"></li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' }
      ]
    }
  });
</script>

딕셔너리 형식의 JSON파일에서 key의 역할이 가능하다.

3.6.1 v-pre 디렉티브

<div v-pre>
  
</div>

로딩시 처음 한번만 실행된다고 한다.

3.6.2 v-once 디렉티브

<div v-once>
  <p>이 문장은 한 번만 렌더링됩니다.</p>
</div>

3.6.3 v-cloak 디렉티브

<div v-cloak>
  <p>  </p>
</div>

화면에 나타나지 않게 한다.

3.7 동적 아규먼트(Dynamic Argument)

<div :[dynamicArg]="message"></div>

<script>
  new Vue({
    el: '#app',
    data: {
      dynamicArg: 'title',
      message: '동적 바인딩 예시'
    }
  });
</script>