Vue.js始めるおれおれアドベントカレンダー2016 – 15日目

テンプレートの短縮記法

よく使う v-bind と v-on は短く書けます。

1
2
3
4
5
6
7
<!-- 完全な構文 -->
<a v-bind:href="url"></a>
<a v-on:click="doSomething"></a>
 
<!-- 省略記法 -->
<a :href="url"></a>
<a @click="doSomething"></a>

JavaScript

Vueは割と先進的なJS構文を使ってる場合が多いすね。

オブジェクト

一部のチュートリアルでオブジェクト作るときにこういうの書いてるのをみかけるかもしれません。

1
2
3
4
const state = require('./store.js')
const mutations = require('./mutations.js')
 
module.exports = { store, mutations }

この { store } なんですが、 { store: store } の省略です。プロパティ名と変数名が同じ場合にこう書けます。つまりこういうこと。

1
2
3
4
5
6
7
const store = require('./store.js')
const mutations = require('./mutations.js')
 
module.exports = {
  store: store,
    mutations: mutations
}

関数

一部のチュートリアルでオブジェクト作るときにこういうの書いてるのもみかけるかもしれません。

1
2
3
4
5
6
7
new Vue({
  computed: {
    sayHello () {
      return 'Hello'
    }
  }
})

function が書いてないけど、関数です。つまりこういうこと。

1
2
3
4
5
6
7
new Vue({
  computed: {
    sayHello: function () {
      return 'Hello'
    }
  }
})

getter/setter

もしかしたらこういうのもあるかも。

1
2
3
4
5
6
7
8
9
10
const obj = {
  get fullName () {
    return this.firstName + ' ' + this.lastName
  },
  set fullName (name) {
    const [ firstName, lastName ] = name.split(' ')
    this.firstName = firstName
    this.lastName = lastName
  }
}

これは短縮記法とは違う気もするんだけど、getter, setterをちゃちゃっと作る構文です。

ついでに [ a, b ] = array も短縮記法ですね。こんな風に書けます。

1
2
3
4
5
6
7
const obj = { a: 123, b: 234 }
const { a } = obj
console.log(a)  // => 123
 
const arr = [ 11, 22 ]
const [ first ] = arr
console.log(first)  // => 11

よくわからないこと

HTML的に妥当？

先の公式ガイドによると、以下。

これらは普通の HTML とはちょっと違うように見えるかもしれません。ですが、 : や @ は属性名に利用可能な文字です。

ほんと？

原文の方でもvalid chars for attribute namesだから誤訳でもなさそう。

いやまあ別に妥当じゃなくても個人的には構わないんだけど。