Vue 템플릿 문법 [패스트캠퍼스 챌린지 30일차]

보간법 Interpolation

문자열

콧수염 기법을 사용한 문자열 보간법

: 이중 중괄호 구문 {{콧수염}}

<span> 메시지: {{ msg }} </span>

콧수염 부분은 실제 데이터로 대체돼서 화면에 출력됨

그리고 그 해당하는 데이터가 변경될 때 화면도 같이 갱신됨 : 반응성

v-once 디렉티브를 사용했을 땐 일회성

: 데이터를 변경해도 화면이 갱신되지 않음

<span v-once> 결코 안 변할 거임: {{ msg }} </span>

원시 HTML

콧수염은 뷰js 데이터를 HTML이 아닌 일반 텍스트로 해석해서 화면에 출력함

만약 실제 HTML 구조로 출력하고 싶으면, v-html 디렉티브를 사용해야 함

<p> 이중 중괄호 사용: {{ rawHtml}} </p>
<p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>

예시. 콧수염에 html 구조 넣었을 때

실제 브라우저에 출력된 건 빨간 색의 Hello가 아니라, 아래와 같은 일반 텍스트가 나옴.

Hello!

<template>
 <h1>
   {{ msg }}
 </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: '<div style="color: red;">Hello!</div>'
    }
  }
}
</script>

예시. v-html 사용해보자

Hello! 빨간색의 헬로!가 나옴

<template>
 <h1 v-html="msg"></h1>
</template>

<script>
export default {
  data() {
    return {
      msg: '<div style="color: red;">Hello!</div>'
    }
  }
}
</script>

속성

콧수염은 HTML 속성에 사용할 수 없음.

대신 v-bind 디렉티브를 콜론과 함께 사용함

<div v-bind:id="dynamicId"></div>

<template>
 <h1 v-bind:class="msg">
   {{ msg }}
   </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'active'
    }
  }
}
</script>

<style scoped>
  .active {
    color: royalblue;
    font-size: 100px;
  }
</style>

개발자 도구로 보면 이런 식으로 들어가 있음

<h1 class="active" data-v-7ba5bd90="">active</h1>

약어

v-bind 약어

v-bind 생략 가능

약어를 훨씬 더 많이 사용

근데 상황에 따라서 v-bind를 직접 붙여야 될 수도 있음

<!-- 전체 문법 -->
<a v-bind:href="url"> ... </a>

<!-- 약어 -->
<a :href="url"> ... </a>

v-on 약어

<!-- 전체 문법 -->
<a v-on:click="doSomething"> ... </a>

<!-- 약어 -->
<a @click="doSomething"> ... </a>

디렉티브

v-로 시작하는 녀석들

전달인자

몇몇 디렉티브는 뒤에 콜론으로 표기되는 전달인자를 가질 수 있음.

ex. v-bind, v-on

동적 전달인자

실제 데이터를 가지고 속성의 이름을 대체해서 쓸 수 있음

예시 1.

<template>
    <h1
    :class="msg"
    @click="add"
    >
        {{ msg }}
    </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'active',
    }
  }
}
</script>

예시 2. 속성의 이름 대체해보자

<template>
 <h1 
 :[attr]="msg" // 이 부분
 @[event]="add" //이 부분
 >
   {{ msg }}
   </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'active',
      attr: 'class',
      event: 'click'
    }
  }
}
</script>

--강의 예제--
클릭했을 때 느낌표 무한 생성.

<template>
 <h1 
 :[attr]="msg"
 @[event]="add"
 >
   {{ msg }}
   </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: 'active',
      attr: 'class',
      event: 'click'
    }
  },
  methods: {
    add(){
      this.msg += '!'
    }
  }
}
</script>

<style scoped>
  .active {
    color: royalblue;
    font-size: 100px;
  }
</style>

그런데 클릭해서 느낌표 생성되는 순간 스타일 없어짐
해결방법은 간단

:[attr]="'active'"

이거만 수정해주면...됨

---

헐
작심 30일 챌린지
오늘이 마지막 날
세상에ㅠㅠㅠㅠㅠㅠ작심 30일이라니
진도도 꽤 나갔네 보니까
이해 못해서 오래 걸리긴 했지만...
복습하면 되니까 흑흑

https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online