1.0系と0.0系でディレクティブる際のお作法が一部異なるのでメモ。

• ネットに転がってる記事は割りと0.0系が多い印象。
• コピペで使うと私みたいに痛い目に遭う。
• ココのNotable Changesをよく読む事。

v-if, v-show

v-ifのみtemplate使用可能。

一般的に言って、v-if はより高い切り替えコストを持っているのに一方、v-show はより高い初期レンダリングコストを持っています。そのため、とても頻繁に何かを切り替える必要があるのであればむしろ v-show を選び、条件が実行時に変更することがほとんどない場合は、むしろ v-if を選びます。

#myApp
    button(v-on:click="ok=!ok") change

    template(v-if="ok")
        h2 hello
        p world
    template(v-else)
        h2 bye
        p bye

script.
  var vm = new Vue({
    el: '#myApp',
    data: {
        ok: true
    }
  });

v-on

1.0系になって、v-on="click:hoge"からv-on:click="hoge"に記述方法が変わった。
ついでにv-on:click="hoge"は@:click="hoge"に省略可能。

#myCounter
  div(v-text="count")
  button(v-on:click="countUp") カウントアップする

script.
  var vm = new Vue({
    el: '#myCounter',
    data: {
      count: 0
    },
    methods: {
      countUp: function(){
        this.count++;
      }
    }
  });

v-class → v-bind:class

1.0系からv-classは廃止されて、v-bindに統合されてv-bind:classで対応するようになったっぽい。
ちなみにv-bind:class="{hoge: fuga}"は:class="{hoge: fuga}"に省略可能。

//- jade形式

style.
  div { width: 200px; background-color: blue; color: #fff;}
  .active { background-color: red; }

#myApps
  div(v-bind:class="{active: isActive}" v-on:click="isActive=!isActive") {{ content }}

script.
  var vm = new Vue({
    el: '#myApps',
    data: {
        content: 'click me',
        isActive: false
    }
  });

v-on:click="isActive=!isActive"でtoggleになる。超便利。

下記のように直接バインドも可能。
これが一番使用頻度が高そげ。

style. 
    .active {background-color: red !important;}
    .btn { width: 200px; background-color: blue; color: #fff;}

#myApps
    div(v-bind:class="hoge" v-on:click="hoge.active=!hoge.active") {{ content }}

script.
  var vm = new Vue({
    el: '#myApps',
    data: {
        content: 'hellow vue',
        hoge: {
            'active': false,
            'btn': true
        }
    }
  });

配列構文（条件付き）の場合

これもよく使うことになりそうだからメモ。
条件は三項演算子で書く。
ここまで書いておいてなんだけど公式のドキュメントのコピペみたいになってる。
VueJSは公式のドキュメントのできがとても良いと思う。
分かりやすい。

style.
    .active {background-color: red !important;}
    .btn { width: 200px; background-color: blue; color: #fff;}

#myApps
    div(v-bind:class="[c_btn, showActive ? c_active : '']" v-on:click="showActive=!showActive" )
      {{ content }}

script.
  var vm = new Vue({
    el: '#myApps',
    data: {
        content: 'hellow vue',
        c_active: 'active',
        c_btn: 'btn',
        showActive: false
    }
  });

v-repeat → v-for

1.0系からv-repeatは廃止、今後はv-forで対応。
オブジェクトをforる場合は{{$key]} {{value}}で値を出力できる。
v-repeatの時は{{$key}} {{$value}}だったから、地味にハマってた。

v-repeat (old)

#myApp
  ul
    li(v-repeat="hoge") {{$value}}
  ul
    li(v-repeat="fuga") {{$key}} : {{$value}}
  ul
    li(v-repeat="piyo") {{$index}} . {{name}} : {{age}}

script.
  var vm = new Vue({
      el: '#myapp',
      data: {
          hoge: ['a', 'b'],
          fuga: {A: 'a', B: 'b'},
          piyo: [
              {name: 'mogami moga', score: 26},
              {name: 'yumemi nemu', score: 28}
          ]
      }
  });

v-for (new!!)

#myApp
  ul
    li(v-for="value in hoge") {{value}}
  ul
    li(v-for="value in fuga") {{$key}} : {{value}}
  ul
    li(v-for="value in piyo") {{$index}} . {{ value.name }} : {{ value.age }}

script.
  var vm = new Vue({
      el: '#myapp',
      data: {
          hoge: ['a', 'b'],
          fuga: {A: 'a', B: 'b'},
          piyo: [
              {name: 'mogami moga', score: 26},
              {name: 'yumemi nemu', score: 28}
          ]
      }
  });

v-model

FormとModelを連動させる。

#myApp
    p
        input(type="text" v-model="name")
        {{name}}
    p
        input(type="checkbox" v-model="isAccept")
        {{isAccept ? "accept" : ""}}
    p
        input(type="radio" name="phone" v-model="phone" value="iphone")
        label(for="iphone") iphone
        input(type="radio" name="phone" v-model="phone" value="android")
        label(for="android") android
        br
        {{phone}}
    p
        select(v-model="city")
            option(value="tokyo") tokyo
            option(value="kyoto") kyoto
            option(value="osaka") osaka
        {{city}}

script.
  var vm = new Vue({
      el: '#myApp',
      data: {
          name: 'yumemi nemu', 
          isAccept: true,
          phone: 'iphone',
          city: 'tokyo'
      }
  });

おわりに

シンタックスハイライトさせるためにhighlight.jsを導入したんだけど、jadeが未対応っぽい…。
むちゃくちゃなカラーが割当たってしまってるけど、まあいいか。