Vue 템플릿 튜토리얼 - Interpolation 및 Directives

 Vue 구성 요소 의 <template> </ template> 섹션에서 HTML을 작성하고 Vue 관련 템플릿 기능을 사용할 수 있습니다.

두 가지 범주로 분류 된 이러한 기능을 살펴 보겠습니다.

• Vue Interpolations
• Vue 지시어

Vue Interpolations

Vue Interpolations의 가장 기본적인 형태는 텍스트 Interpolations 입니다. 이는 단순히 구성 요소 로직 내에 정의 된 문자열을 표시하는 프로세스입니다.

이 과정에서 우리가 작업해온 프로젝트에서이 작업을 시도하려면 /src/components/Skills.vue  파일을 열고 소품 내에 속성을 정의하십시오  .

<script>
export default {
  name: 'Skills',
  data() {
    return {
      name: 'Coursetro'
    }
  }
}
</script>

여기서는 name 이라는 새로운 속성  을 Coursetro 값으로 정의했습니다 . 이것을 템플리트에 표시하기 위해 내부에 속성의 이름이있는 {{}}의 보간 이중 중괄호를 사용합니다 .

<template>
  <div class="skills">
    {{name}}
  </div>
</template>

프로젝트를 저장  하면 브라우저에 Coursetro가 표시됩니다.

단순한! 는 IF 이름  속성이 구성 요소의 논리에 업데이트됩니다, 자동으로 템플릿의 새 값을 렌더링합니다. 우리는 곧 그렇게 할 것입니다.

애트리뷰트의 Interpolations법

주목해야 할 중요한 점은 표준 {{}} 의 속성을 사용할 수 없다는 것 입니다.

이것이 어떻게 작동하는지 보여주기 위해 boolean 속성을 만들고이  속성을 기반으로 버튼 의 disabled 속성을 설정해 보겠습니다 .

<button v-on:click="changeName" v-bind:disabled="btnState">Change Name</button>

.. 그리고 논리에서 :

  data() {
    return {
      name: 'Coursetro',
      btnState: true       // Add this
    }
  },

이제 버튼을 사용할 수 없게됩니다.

다시 말하지만, v-bind  지시문과 속성 이름을 사용하여 구성 요소 논리에 정의 된 속성에 바인드합니다.

Interpolations 된 표현식

보간 중괄호에서 JavaScript 표현식을 배치 할 수 있습니다. 예를 들어, btnState  부울 과 함께 3 진 (조건부) 연산자를 사용할 수 있습니다 .

    <h1 v-once>{{name}}</h1>

    <!-- Add this -->
    {{ btnState ? 'The button is disabled' : 'The button is active'}}

    <button v-on:click="changeName" v-bind:disabled="btnState">Change Name</button>

결과는 btnState  가  구성 요소 논리에서 true 로 설정된 단추가 비활성화되었음을 나타냅니다 . 

또한 수학을 수행하고 보간법 내에서 다른 자바 스크립트 함수를 활용할 수도 있습니다.

Vue 지시어

Vue 템플리트에서는 존재하는 다양한 지시문을 활용할 수 있습니다. 

Vue 지시문은 v-가 앞에 붙는 Vue 고유의 속성 입니다. 각각 다른 용도로 사용됩니다. 

다음은 사용할 수있는 지시어 목록입니다.

• V- 텍스트
• v-html
• v-show
• v-if
• v-else
• v-else-if
• v-for
• v-on
• 브이 바인
• V- 모델
• V 프리
• v-cloak
• v-once

나는이 모든 것들에 깊이 들어가지 않을 것이지만, v를 주는 시도를 해보자  . 이 속성을 사용하면 목록을 반복 할 수 있습니다.

먼저, 구성 요소 로직에 객체 배열을 만듭니다.

  data() {
    return {
      skills: [
          { "skill": "Vue.js" },
          { "skill": "Frontend Developer" }
      ]
    }
  },

다음으로 템플릿 섹션을 조정하십시오.

<template>
  <div class="skills">
    <div class="holder">
      <ul>
        <li v-for="(data, index) in skills" :key='index'>{{index}}. {{data.skill}}</li>
      </ul>
    </div>
  </div>
</template>

결과는 당신에게 단순한 배열 항목의 목록을 보여줄 것입니다!

한 번 더 해보 죠. v-if  와 함께 v-else 와 함께  템플릿 의 if else 문 :

    <div class="holder">
      <ul>
        <li v-for="(data, index) in skills" :key='index'>{{index}}. {{data.skill}}</li>
      </ul>

      <!-- Add these 2 lines -->
      <p v-if="skills.length >= 1">You have more than 1 skill</p>
      <p v-else>You have less than or equal to 1 skill</p>

    </div>