7.テンプレート構文-基本

テンプレート構文の概要

データのバインド
ビューインスタンスで定義したプロパティが画面に表示されます.
基本データバインド方法:かっこ
ガイド人
画面上の要素をビューで操作しやすくする構文
指導形式:v-で始まるex)v-on,v-if,v-model...
データバインドと計算プロパティ
≪計算プロパティ｜Calculation Properties｜oraolap≫:テンプレート内のデータのプロパティをより直感的かつ簡潔に表示することで、ビュー・テンプレート・コードの可読性を向上させ、データ・プロパティを計算プロパティのターゲットとして指定したときに検出し、自動的に再計算できます.

<div>{{ message.split('').reverse().join('') }}</div> //템플릿에 계산식이 많아지면 가독성 문제 발생!

<div> id="app">
    <div>{{ reverseMessage }}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    data:{
      message:'Vue.js' //데이터의 값이 변경되었을 때, computed내의 자동으로 갱신
    }
    computed: { //데이터의 값과 연결되어 계산되어 변경될 값은 computed에 정의
      reverseMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  })
</script>

クラスバインド、v-bind、v-if、v-show

<div id="app">
  <p v-bind:id="uuid" v-bind:class="name">클래스 바인딩</p>
  <div v-if="loading">Loading...</div> //loading이 false일때 태그 자체가 사라짐
  <div v-else>this is the result</div>
  <div v-show="loading">Loading...</div> //loading이 false일때 display:none 유관상으로만 사라짐 </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      uuid: "abc123",
      name: "text-blue",
      loading: true,
    },
  });
</script>

メソッドhodsプロパティとv-onディレクトリを使用してイベントを処理する方法
Click Me
//「v-on:アクティビティタイプ.イベントドライバは、特定のキーが押された場合にのみ実行されます