VueJs - 보간

안녕하세요 vue VueJs, The Series에 오신 것을 환영합니다 🚀

이 글은 myblog에 처음 게시되었습니다. 여기article가 있습니다.

Spoiler alert🚨: In case you missed go and check it out.

보간이란 무엇입니까?

"문자열 보간"이라고도 하는 보간에 대해 이야기할 때 , {{ }} 에서 본 "콧수염"구문에 대해 이야기합니다.

보간에는 4가지 유형이 있습니다.

텍스트

JavaScript 표현식

원시 HTML

속성

텍스트

우리는 이 HTML이 있을 때 이미 그것을 보았습니다.

<div id="app">
  <h1>{{ title }}</h1>
</div>

참고용으로 Vue 인스턴스도 가져와 봅시다.

new Vue({
  el: "#app",
  data: {
    title: "I'm Interpolating!"
  }
})

Vue가 Vue 인스턴스 내에서 데이터 속성에 액세스하고 제목을 잡고 {{ title }} 내에서 값을 '바인딩'하는 것을 볼 수 있습니다. 그게 다야 여기서 볼 것이 없습니다. 👀

자바스크립트 표현식

Vue는 JavaScript 표현식을 지원하므로 기본적으로 모든 JavaScript 코드를 안에 넣을 수 있습니다.

<div id="app">
  <div>2 * 2 = {{ 2 * 2 }}</div>
  <div>Today is {{ new Date().toDateString() }}</div>
  <!-- It also works with ternary expressions -->
  <div>And the output is: {{ foo ? 'bar' : 'baz' }}</div>
</div>

삼항의 출력? 🤷‍♂️

foo는 Vue 인스턴스에서 정의되지 않았으므로 false로 평가되므로 baz가 됩니다.

⚠Attention⚠, Vue will bind only one single expression, so the following code won't run.

<div id="app">
  <div>{{ let myVariable = 'be' }}</div>
  <div>{{ if (foo) { return 'bar' } }}</div>
</div>

위의 코드는 JavaScript 표현식이 아니기 때문에 작동하지 않습니다.

원시 HTML

여기까지 우리는 Mustache{{ }} 내부에 있는 모든 것이 텍스트이거나 텍스트로 해석되는 것을 보았지만 일부 HTML을 바인딩하려는 경우에는 어떻게 해야 합니까? 웹사이트의 콘텐츠를 저장하거나 백엔드에서 가져오는 JSON이 있다고 상상해 보세요. 대부분의 경우 콘텐츠를 일반 텍스트로 저장하지만 때로는 HTML을 대신 받을 수도 있습니다.

이를 위해 v-html 지시문을 사용해야 합니다. 지금은 걱정하지 마세요. 디렉티브가 무엇인지 다룰 것입니다.

이 자습서의 목적을 위해 해당 HTML을 제목에 넣겠습니다.

new Vue({
  el: "#app",
  data: {
    title: "<h1 style='color: blue;'>I'm Interpolating!</h1>"
  }
})

이제 HTML에서 {{ title }} 태그 안에 있는 h1를 가져올 필요가 없습니다.

<div id="app">
  {{ title }}
</div>

이전에 설명했듯이 Vue는 이것을 텍스트로 해석하므로 출력은 👇이 됩니다.



HTML을 HTML로 보기 위해 해야 할 일은 다음과 같습니다.

<div id="app">
  <span v-html="title"></span>
</div>

우리는 HTML 태그를 사용했는데, 이 경우에는 span 입니다. 여는 태그 안에 지시어 v-html 를 추가하고 값으로 title 를 전달했습니다. Vue가 할 일은 범위 내에서 title의 값을 전달하는 것입니다. 이 시간이 효과가 있는지 보자 👇

속성

v-html 에서 보았듯이 특정 값을 HTML에 전달해야 하는 경우가 있습니다. 이를 위해 지시문을 사용합니다. HTML의 id 안에 dynamic div 을 넣어야 한다고 상상해보세요. 이를 위해 v-bind 지시문을 사용할 수 있습니다. 다시 한 번 걱정하지 마세요. 지침은 이 시리즈의 향후 에피소드에서 다룰 것입니다.

구문은 이전 예제와 매우 유사합니다.

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

:id 다음에 v-bind를 추가하여 우리가 원하는 것이 이것이 <span id="1"></span>가 될 것이라고 Vue에 알리는 방법을 살펴보십시오. dynamicId의 값이 1이면 😅

그리고 우리는 v-bind로 더 많은 일을 할 수 있습니다. 비활성화된 것으로 표시하고 싶은 버튼이 있다고 상상해 보십시오. :disabled 끝에 v-bind를 추가하기만 하면 됩니다. 그러나 이를 위해 Vue가 문자열로 해석할 수 있는 값을 제공하지 않습니다. Vue는 이 버튼을 비활성화할지 여부(예 또는 아니오)를 알아야 하므로 값이 참인지 거짓인지 확인합니다.

<div id="app">
  <button v-bind:disabled="isButtonDisabled">Sign In</button>
</div>

우리의 경우 isButtonDisabled 는 undefined 이므로 Vue는 비활성화된 속성을 렌더링하지도 않으며 값도 null 또는 false 인 경우 이런 일이 발생합니다.

결론

이 에피소드에서는 다음 내용을 다뤘습니다.

Mustache 구문을 사용하여 일반 텍스트로 보간을 수행할 수 있습니다{{ }}.

Mustache 구문 내부에 JavaScript 표현식이 있을 수 있습니다.

원시 HTML을 렌더링하려면 v-html 지시문이 필요합니다.

v-bind 지시문을 사용하여 속성을 동적으로 변경할 수 있습니다.

GitHub repo 이 에피소드에 사용된 코드입니다.

Did you enjoy this article? Don't be selfish, go on and share the knowledge!
You can also find me on Twitter .