[Vue.js] Template Syntax (1)

https://vuejs.org/guide/essentials/template-syntax.html

Template Syntax | Vue.js

 

 

 

 

 

Text Interpolation

<span>Message: {{ msg }}</span>

기본형태 {{}} 텍스트 보간

msg 태그 (속성 변경때마다 업데이트 됨)

 

 

Raw HTML

HTML이 아닌 일반 텍스트로 전환

v-html

<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

 

 

v- << vue 특수 속성으로 DOM에서 반은 동작 적용

 

 

보안 경고

v-html태그는 신뢰할 수 있는 콘텐츠 만 사용할 것

 

 

Attribute Bindings / Shorthand

<div v-bind:id="dynamicId"></div>
<div :id="dynamicId"></div> // 이렇게 쓸 수 있다

HTML 속성 안에서는 {} 가 아니라 v-bind 지시문 사용

 

 If the bound value is null or undefined, then the attribute will be removed from the rendered element.

 

 

 

Boolean Attributes

<button :disabled="isButtonDisabled">Button</button>

 It will also be included if the value is an empty string, maintaining consistency with <button disabled="">. For other falsy values the attribute will be omitted.

 

 

Dynamically Binding Multiple Attributes

If you have a JavaScript object representing multiple attributes that looks like this:

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

You can bind them to a single element by using v-bind without an argument:

argument없이 사용

<div v-bind="objectOfAttrs"></div>

 

 

 

Using JavaScript Expressions

Vue는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원한다

 

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

In Vue templates, JavaScript expressions can be used in the following positions:

• Inside text interpolations (mustaches)
• In the attribute value of any Vue directives (special attributes that start with v-)

 

 

Expressions Only​

Each binding can only contain one single expression. An expression is a piece of code that can be evaluated to a value. A simple check is whether it can be used after return.

Therefore, the following will NOT work:

<!-- this is a statement, not an expression: -->
{{ var a = 1 }}

<!-- flow control won't work either, use ternary expressions -->
{{ if (ok) { return message } }}

Calling Functions​

It is possible to call a component-exposed method inside a binding expression:

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

TIP

Functions called inside binding expressions will be called every time the component updates, so they should not have any side effects, such as changing data or triggering asynchronous operations.

Restricted Globals Access​

Template expressions are sandboxed and only have access to a restricted list of globals. The list exposes commonly used built-in globals such as Math and Date.

Globals not explicitly included in the list, for example user-attached properties on window, will not be accessible in template expressions. You can, however, explicitly define additional globals for all Vue expressions by adding them to app.config.globalProperties.