#36 Vue.jsアウトプット

V-model

・双方向データバインディングが出来るディレクティブ。
・ "バインディング" とは "結合" を意味する。

//HTML//
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
  <input type="text" v-model="message">
  <h1>{{ message }}</h1>
</div>

//JavaScript//
new Vue({
  el: '#app',
  data: {
    message: 'こんにちは'
  }
})

・HTML3行目の<input type="text" v-model="message">の記述、JavaScript3〜5行目の記述により、入力フォームが完成する。
・入力フォーム内に文字を入力出来る様になり、エンターを押す事で入力した文字が下に出力される。
・入力フォームには、デフォルトで "こんにちは" が表示されており、入力フォームに "こんばんは" と入力すると、 "こんにちは" → "こんばんは" へ変換される。

■入力フォームデフォルト

computedプロパティ

//HTML//
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
  <p>{{ counter }}</p>
  <button @click="counter += 1">+1</button>
  <p>{{ lessThanThree }}</p>
</div>


//JavaScript//
new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  computed: {
    lessThanThree: function() {
   	return this.counter > 3 ? '3より上' : '3以下'
    }
  }
})

・動的なプロパティ
・dataの中の内容は、 "動的な表現" をする事が出来ない。あくまで初期値を扱うのみ。
・computedプロパティはfunctionを活用して関数を定義する。プロパティのため、returnで値を返す必要あり。
・プロパティのため、HTMLファイル5行目の二重括弧内で表現するときに、関数名のあとの "(　)" は不要。methodで関数を記述した場合は、関数名の後に "(　)" は必要。

computedプロパティとmethodは記述が似ているため、違いや用途を正確に理解して活用するようにしていきます😃

本日も最後まで読んで頂きありがとうございました！🙇‍♂️

参考教材：Udemy「超Vue.js 2 完全パック」