Vue.js 템플릿 제어 지시어 요약

소개

Vue.js로 TO DO 앱 만들기의 연속입니다.

이번에는 지시어를 깊이 파고 갑니다.

v-once

처음에만 텍스트 바인딩을 수행합니다.

처음부터 정적 콘텐츠로 취급합니다.

드로잉 업데이트의 성능을 높이고 싶을 때 사용할 수 있습니다

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    click(e) {
      // 文字列を反転するメソッドを定義
      this.message = this.message
        .split('')
        .reverse()
        .join('')
    }
  }
})

다음은 v-once 를 정의하고 있기 때문에, 최초회만 텍스트 바인딩을 실시하고 있다.

첫회 이후는 정적인 컨텐츠로서 취급되기 때문에, 버튼을 클릭해도 메소드가 발화하지 않는다.

<p v-once> <!-- v-onceを定義 -->>
  {{ message }} <!-- Hello Vue.js -->
</p>
<button v-on:click="clickHandler">
    文字が反転
</button>

v-pre

요소와 모든 자식 요소의 컴파일을 건너 뜁니다.

원시 마스터 태그가 표시됩니다.

<p v-pre>
  {{ message }} <!-- {{ message }} -->
</p>

v-html

일반 HTML을 삽입합니다.

지정된 요소의 innerHTML을 업데이트할 수 있습니다.

주로 서버측으로부터 취득한 HTML을 표시하고 싶을 때에 사용한다.

data 선택적 속성에 HTML을 설정합니다.

data: {
  messageHtml: 'Hello <span style="color:red;">Vue.js!</span>'
}

v-html 지시문으로 확장합니다.

<p v-html="messageHtml"></p>

※ XSS 취약성을 일으킬 우려가 있으므로 서비스를 이용하는 사용자가 입력한 콘텐츠에는 사용하지 않을 것.

v-cloak

페이지를 표시하기 시작한 후 인스턴스 생성이 끝날 때까지 마스터시 태그와 같은 컴파일 전에 템플릿이 표시되는 것을 방지합니다.

<p v-cloak> <!-- v-cloakを定義 -->
  {{ message }}
</p>

v-cloak에 대해 display: none를 설정합니다.

[v-cloak] {
  display: none;
}

v-text

data 선택적 속성을 마스터 구문 이외에 표시하려는 경우.

사용도 별로 없을 것 같다.

<p v-text="message"></p> <!-- Hello Vue.js! -->

JavaScript 표현

데이터 바인딩 내부에서는 JavaScript式 를 이용할 수 있다.

data: {
  message: 'Hello Vue.js!',
  number: 100,
  ok: true
}

<p>
  {{ number +  1}} <!-- 101 -->
  {{ message.split('').reverse().join('') }} <!-- !sj.euV olleH -->
</p>

흐름 제어는 三行演算子를 이용한다.

<p>
  {{ ok? 'YES' : 'NO' }} <!-- YES -->
</p>

다음은 식이 아니며 문장이므로 오류가 발생합니다.

<p>
  {{ var x = 1 }} <!-- error -->
</p>

필터(로컬)

Vue.js에서는 표현식 끝에 필터를 추가 할 수 있습니다.

data: {
  price: 29800 //dataオプションにプロパティを設定
},
filters: { // filterにメソッドを追加
  numberFormat(value) {
    return value.toLocaleString()
}

{{ 式 | フィルタ }}에서 필터 실행

<p>
  {{ price | numberFormat(price) }} <!-- 29,800 -->
</p>

v-bind 지시문에서 사용하는 경우

<input type="text" v-bind:value="price | numberFormat(price)">

필터(글로벌)

필터는 전역적으로 정의 할 수 있습니다.

전역적으로 정의하려면 Vueインスタンス를 생성하기 전에 작성하십시오.

// グルーバルフィルタを定義
Vue.filter('numberFormat', function(value) {
  return value.toLocaleString()
})

// Vueインスタンス生成
var app = new Vue({
  el: '#app',
  data: {
    price: 29800
  }
})

필터 연결

필터는 복수 접속 가능하다.

필터로 처리 된 반환 값에 대해 추가 필터를 적용 할 수 있습니다.

<p>
  {{ A | filterX(A) | filterY(A) }}
</p>

필터 인수

필터로 인수를 이용한다.

예를 들면, 긴 텍스트를 생략해 ... 를 말미에 부여하는 필터를 작성한다.

그 때, 表示する文字列와 末尾に付与する文字를 인수로 지정할 수 있도록(듯이) 한다.
data 옵션에 긴 문자열이 있는 text 속성을 제공합니다.

text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt

이어서 필터를 정의한다.

JavaScript의 메소드 substring는 제 1 인수가 개시 위치, 제 2 인수가 추출하는 문자수를 지정한다.

다음 필터는 인수로 文字列, 抽出する文字数 및 連結する文字를 수신합니다.

Vue.filter('readMore', function(text, length, suffix) {
  return text.substring(0, length) + suffix
})

실행해보십시오.

<p>
  <!-- textは引数に含まないことに注意 -->
  {{ text | readMore(10, '...') }} <!-- Lorem ipsu... -->
</p>

<p>
  {{ text | readMore(5, '***') }} <!-- Lorem*** -->
</p>

v-bind 약어

v-bind에는 약어가 있습니다.

프로젝트 내에서 통일하는 것이 바람직하다.

다음과 같은 결과가 출력됩니다.

<!-- 完全な構文 -->
<a v-bind:href="url">

<!--  省略記法-->
<a :href="url">

업데이트 내역

Vue.js의 기본 사용법 요약
Vue.js로 TO DO 앱 만들기
Vue.js 템플릿 제어 지시어 요약 지금 코코
Vue.js 계산 속성과 메서드의 차이