본문 바로가기
Frontend/Vue

Vue: 템플릿 문법에 대해서 (2)

by 코딩쥐 2024. 10. 17.

디렉티브

Vue에서 사용되는 HTML 요소에 특별한 동작이나 기능을 부여하는데 사용되는 특수 속성이다.

디렉티브 설명
v-text 엘리먼트의 textContent를 업데이트 한다.
v-html 엘리먼트의 innerHTML을 업데이트 한다.
v-show 참-거짓을 기반으로 CSS 속성 중 display 를 전환한다. 초기 조건과 관계없이 항상 렌더링된다.
v-if 참-거짓에 따라 엘리먼트를 조건부로 렌더링한다.
v-else v-if 또는 v-else-if의 'else block'을 나타낸다. 
v-for 엘리먼트 또는 템플릿 블록을 여러번 렌더링한다. 
v-on 이벤트 리스너를 추가한다.  ( 단축문법 : @ )
v-bind HTML 요소의 속성을 Vue인스턴스의 데이터와 동적으로 바인딩한다. (단축문법 : : 혹은 . ) 
v-model 양방향 데이터 바인딩을 생성한다. 주로 폼 컨트롤에서 사용된다.
v-slot 슬롯의 이름을 지정하거나 슬롯의 범위를 지정한다.
v-pre 컴파일 속도를 높이기 위해 템플릿 컴파일을 건너뛴다.
v-once 엘리먼트와 모든 컴포넌트를 한 번만 렌더링하고 이후 변경을 무시한다.
v-memo 메모이제이션을 위한 최적화 힌트를 제공한다.
v-cloak CSS 디스플레이를 none으로 설정하여 준비될 때까지 컴파일되지 않은 템플릿을 숨기는 데 사용한다.

 

v-model

v-model은 양방향 데이터 바인딩을 생성해서, 입력 요소의 값과 Vue 인스턴스의 데이터를 서로 연결해주는 역할을 한다. 사용자가 입력 요소에 값을 입력하면 해당 값이 Vue 인스턴스의 데이터에 자동으로 반영된다. 주로 폼 컨트롤에서 사용된다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        #app {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="text" v-model="text" />
        <p>입력한 값 : {{ text }}</p>
    </div>

    <script>
        const App = {
            data() {
                return {
                    text: ''
                }
            }
        }

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

</html>

 

v-slot

v-slot은 슬롯의 이름을 지정하거나 범위를 정의하는 데 사용된다.

<!-- MyComponent.vue -->
<template>
  <div>
    <slot name="header"></slot> <!-- header 슬롯 정의 -->
    <div>
      <p>안녕하세요. 반갑습니다.</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
};
</script>

<style scoped>
div {
  border: 1px solid #ccc;
  padding: 16px;
}
</style>
<!-- Comp1.vue -->
<template>
  <my-component>
    <!-- header라는 이름을 가진 슬롯에 해당하는 템플릿 삽입 -->
    <template v-slot:header>
      <h1>{{ title }}</h1>
    </template>
  </my-component>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent, // MyComponent를 컴포넌트로 등록
  },
  data() {
    return {
      title: '코딩쥐의 티스토리', // 제목 설정
    };
  },
};
</script>

<style>
</style>

 

v-pre

v-pre는 템플릿의 컴파일을 건너뛰어 컴파일 속도를 높인다. 이 디렉티브가 적용된 엘리먼트 내부의 표현식은 Vue가 처리하지 않는다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <p v-pre>{{text}}</p>
    </div>

    <script>
        const App = {
            data() {
                return {
                    text: '안녕하세요. 코딩쥐입니다.'
                }
            }
        }

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

</html>

 

원래라면 '안녕하세요. 코딩쥐입니다.'가 렌더링이되어야 했는데 v-pre가 적용되어 {{text}}가 그대로 출력된 모습을 볼 수 있다.

 

v-once

Vue.js에서 v-once 디렉티브는 특정 HTML 요소를한번만렌더링하도록 지시한다. 처음 렌더링된후에는데이터변경에반 응하지않는다

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="text"/>
        <p v-once>입력한 값 : {{ text }}</p>
    </div>

    <script>
        const App = {
            data() {
                return {
                    text: '처음 렌더링 값'
                }
            }
        }
        Vue.createApp(App).mount('#app')
    </script>
</body>

</html>

 

삼항연산자를 사용해서 데이터 출력

삼항연산자는 이중 중괄호 내부와 모든 Vue 디렉티브 속성 내부에서 사용이 가능하다.  

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        #app{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <p>{{changedButton? koText : engText}}</p>
        <button @click="toggleText">{{changedButton? "ENGLISH" : "KOREAN"}}</button>
    </div>

    <script>
        const App = {
            data() {
                return {
                    koText: '코딩쥐의 티스토리',
                    engText: "coding-ji's tistory",
                    changedButton : false
                }
            },
            methods: {
                toggleText(){
                    this.changedButton = !this.changedButton;
                }
            }
        }

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

</html>

 

 

'Frontend > Vue' 카테고리의 다른 글

Vue: 템플릿 문법에 대해서 (1)  (0) 2024.10.08
Vue : 시작하기  (0) 2024.10.08

관련글

티스토리툴바