[ Vue 3 ] Template Syntax

 

 

 

 

 

 

 

Template Syntax

뷰로 화면을 조작하는 방법을 의미

크게 데이터 바인딩과 디렉티브로 나뉨

 

 

 

 

데이터 바인딩

뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법

가장 기본적인 데이터 바인딩 방식은 콧수염괄호 {{ }} 이다

 

 

 

 

<style>
  .primary {
    color: coral;
  }
</style>
<!-- HTML -->
<div id="app">
  <!-- 1. class 바인딩 -->
  <h1>클래스 바인딩</h1>
  <div class="primary">데이터 바인딩 예제</div>
</div>

<!-- JavaScript -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  Vue.createApp({
    data() {
      return {};
    },
  }).mount("#app");
</script>

이건 일반적인 html 문법이고

 

 

Vue의 데이터바인딩을 사용해서 코드 작성을 해보자

<style>
  .primary {
    color: coral;
  }
</style>
<!-- HTML -->
<div id="app">
  <!-- 1. class 바인딩 -->
  <h1>클래스 바인딩</h1>
  <div v-bind:class="textClass">데이터 바인딩 예제</div>
</div>

<!-- JavaScript -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  Vue.createApp({
    data() {
      return { textClass: "primary" };
    },
  }).mount("#app");
</script>

화면에 출력되는건 동일하나,

뷰에 선언된 데이터를 가지고 화면에 있는 태그의 애트리뷰트를 동적으로 조작할 수 있게된것이다.

 

 

id도 데이터바인딩이 가능하다 사용방법은 위와 동일

<style>
  .primary {
    color: coral;
  }
</style>
<!-- HTML -->
<div id="app">
  <!-- class 바인딩 -->
  <h1>클래스 바인딩</h1>
  <div v-bind:class="textClass">데이터 바인딩 예제</div>

  <!-- id바인딩 -->
  <h1>아이디 바인딩</h1>
  <section v-bind:id="sectionId">반값습니다.</section>
</div>

<!-- JavaScript -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  Vue.createApp({
    data() {
      return {
        textClass: "primary",
        sectionId: "tab1",
      };
    },
  }).mount("#app");
</script>

이렇게 사용한다

v-bind는 축약어 : 만 사용해서 코드작성을 한다.

 

 

 

스타일도 가능하다 

tag안에 인라인스타일로 지정할수있지만

 <!-- id바인딩 -->
  <h1>아이디 바인딩</h1>
  <section v-bind:id="sectionId" :style="sectionStyle">반값습니다.</section>
</div>

<!-- JavaScript -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  Vue.createApp({
    data() {
      return {
        textClass: "primary",
        sectionId: "tab1",
        sectionStyle: { color: red },
      };
    },
  }).mount("#app");
</script>

이런식으로도 작성이 가능하다는것!

 

 

 

 

 

디렉티브

화면의 요소를 더 쉽게 조작하기 위한 문법

컴포넌트에서 표현하는 부분의 코드가 더 간결해 질 수 있다.

 

 

<!-- HTML -->
<div id="app">
  <!-- 1. v-if -->
  <p v-if="login">로그인 되었습니다.</p>
  <p v-else>로그인 하세요</p>
  <button>로그인</button>
</div>

<!-- JavaScript -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  Vue.createApp({
    data() {
      return {
        login: false,
      };
    },
  }).mount("#app");
</script>

우선 login의 기본값을 false로 잡아두고

v-if 그리고 v-else를 가지고 login값을 변경할 수 있게한다.

개발자 도구에서 체크박스를 가지고 값을 변경할 수 있다.

 

 

 

 

이번엔 로그인 버튼으로 값을 변경할 수 있게 코드 작성

<!-- HTML -->
<div id="app">
  <!-- 1. v-if -->
  <p v-if="login">로그인 되었습니다.</p>
  <p v-else>로그인 하세요</p>
  <button v-on:click="loginUser">로그인</button>
</div>

<!-- JavaScript -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  Vue.createApp({
    data() {
      return {
        login: false,
      };
    },
    methods: {
      loginUser() {
        this.login = !this.login;
      },
    },
  }).mount("#app");
</script>

 

v-on:click 디렉티브를 사용하고 loginUser라는 메서드를 추가

loginUser에서는 login의 값이 true 인지 false인지 판별한다.

이렇게 작성하고 돌려보면 로그인버튼을 누르면 '로그인 되었습니다'가 출력 다시 로그인누르면 '로그인 하세요'가 출력된다.

 

 

이번엔 v-show 를 사용해서 로그인 값을 변경해보고 싶은데,

v-show와 v-if의 차이점은 

UI상으로는 동일하게 출력되지만 v-show는 디스플레이가 none처리가 되어있다는 점

v-show에 걸린 데이터의 boolean값이 데이터에 따라(false/ture) 바뀌면서

CSS스타일링으로 디스플레이를 none처리를 하는가 안하는가의 차이점이 있다는것이다.