第28回　Vue.js入門　省略記法一覧

こんにちは、コンスキです。

ここまでの回で、Vue.jsやVue Router、単一ファイルコンポーネントの基本的な説明は終了しました。

今回は、Vue.jsを使っていく上で覚えておくと便利だと思った省略記法をご紹介します。

ディレクティブ
- v-bindディレクティブ
- v-onディレクティブ
function
オブジェクトの引き渡し
まとめ

ディレクティブ

Vue.jsを使っていると、ディレクティブを書く機会が頻繁にありますよね。知っている人も多いと思いますが、ディレクティブの中には省略して書くことができるものがあります。

v-bindディレクティブ

普通に書いた場合

<要素名 v-bind:class="example"><要素名>

省略記法で書いた場合

<要素名 :class="example"><要素名>

v-onディレクティブ

普通に書いた場合

<要素名 v-on:click="example"><要素名>

省略記法で書いた場合

<要素名 @click="example"><要素名>

function

dataプロパティ

普通に書いた場合

data: function () {
  return {
    example: "example"
  }
}

省略記法で書いた場合

data () {
  return {
    example: "example"
  }
}

methodsプロパティ

普通に書いた場合

methods: {
  example: function () {
    console.log("example")
  }
}

省略記法で書いた場合

methods: {
  example () {
    console.log("example")
  }
}

ライフサイクルフック

普通に書いた場合

created: function () {
  console.log("example")
}

省略記法で書いた場合

created () {
  console.log("example")
}

オブジェクトの引き渡し

普通に書いた場合

var vm = new Vue({
  el: "#app",
  data: {
    product: {
      name: "鉛筆",
      price: 100,
      id: 1
    }
  },
  methods: {
    example: function (product) {
      console.log(product.name)
    }
  },
  created: function () {
    this.example(this.product)
  }
})

省略記法で書いた場合

var vm = new Vue({
  el: "#app",
  data: {
    product: {
      name: "鉛筆",
      price: 100,
      id: 1
    }
  },
  methods: {
    example: function ({ name }) {
      console.log(name)
    }
  },
  created: function () {
    this.example(this.product)
  }
})