Zenn
Open7

Vue3の学習メモ

Vue.js
meshimeshi

基礎

  • ディレクティブ
  • 算出プロパティおよびメソッド
  • ライフサイクルフック
meshimeshi

ディレクティブ

<p>{{ hogehoge }}</p>
<p v-text="hogehoge"></p>

属性値にJavaScript式を埋め込む

<div id="app">
  <a v-bind:href="url">hogehoge homepage</p>
  <!-- 「v-bind: 属性名 = "値"」で表す -->
  <!-- これは無理 <a href="{{ url }}">hogehoge homepage</p> -->
  <!-- 省略も可能 <a :href="url">hogehoge homepage</p> -->
</div>

<script>
Vue.createApp({
  data: function() {
    return {
      url: 'https://www.example.com',
    }
  }
}).mount('#app');
</script>
meshimeshi

算出プロパティ

計算した結果を取得する

<div id="app">
  <p>{{ hogeFuga }}</p>
</div>

<script>
Vue.createApp({
  data: function() {
    return {
      hoge: 'hogehoge',
      fuga: 'fugafuga',
    }
  },
  computed: {
    hogeFuga: function() {
      return this.hoge + ' ' + this.fuga;
    }
  }
}).mount('#app');
</script>

メソッドとの違い

  • 引数の設定ができない
  • 算出プロパティは取得用（getter）
  • キャッシュされる

参考ページ

[Vue.js]算出プロパティとメソッドの違い

meshimeshi

メソッド

<div id="app">
  <p>{{ hogeFuga() }}</p>
</div>

<script>
Vue.createApp({
  〜中略〜
  methods: {
    hogeFuga: function() {
      return this.hoge + ' ' + this.fuga;
    }
  }
}).mount('#app');
</script>
meshimeshi

ディレクティブ

ディレクティブの分類として、データバインド、イベント、フォーム、制御などがある。

イベント

プログラムが実行されるきっかけ：イベント
実行されるコード：イベントハンドラー

<button v-on:click="onclick">クリック</button>
<!-- 省略構文 <button @click="onclick">クリック</button> -->
<!-- クリック時にonckuck()が実行される -->