Vue.jsの基礎テンプレート構文

テンプレートについて

●HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<div id="app">
  <p>{{message}}</p>
  <button @click="reverseMessage">メッセージ反転</button>
</div>

●JS

new Vue({
  el: '#app',
  data: {
    message: 'HelloWorld!'
  },
  methods: {
    reverseMessage: function() {
    　　this.message = this.message.split('').reverse().join('')
    }
  }
})

{{ message }}の中身はJSの中のdataの中で定義している。

今回の場合、message: 'HelloWorld'と書いてるので、それがブラウザに表示される。

ディレクティブについて

Vue.jsにおける特別な属性のこと。（Vue.js専用のもの）

v-text, v-bind, v-htmlなど

v-once・・・一度も出力される値を変えたくないときに使用する。

v-bind・・・属性に対してそのデータを表示させる（URLなど）

双方向データバインディング

v-model を使用する

ブラウザinputタグの中身を入力しなくてもdataの中の記述を読み取って表示する

また、ブラウザ上で違うことを入力すると、テンプレートからデータ側（モデル）を変更することができる

算出プロパティ（computed）

動的な処理をしたいときに使用する