More than 3 years have passed since last update.

Vue.jsの基礎的な文法

Posted at 2021-10-19

props

親→子に値を渡す時にはpropを使います。

props: {
      data: Array
  },

アクセス方法
js内 

this.data

html内

<test :data="testNumber"></test>

※「:」は「v-bind:」の省略形です。

データが更新されない限りキャッシュの値を使用しつづける

computed: {
  dataNow: function () {
        return Date.now()
   }
},

呼び出し方

{{ dataNow }}

データに即時性を求める場合に使用する

methods: {
    dataNow: function () {
      return Date.now()
    }
 }

呼び出し方

{{ dataNow() }}

<div id="#app">
  <button @click=“dataNow”>ボタン</button> 
</div>

vueのライフサイクルフック(初期化)のうちの1つで
DOMが作成された直後に呼び出される。

mounted() {
          this.data = “data” ——>変数を定義したり
          this.getHeight() ——>メソッドを呼び出したり
 },