Vueチュートリアル 2日目 - 蚊帳の中の日記

イベントハンドリングはv-onディレクティブ
v-on:click='hoge'みたいにかける。hogeの部分はメソッドでもいい。ちょっとした実行分も書けるけど冗長になるので基本的にメソッドに切り出すのが無難だと思う。
$eventでDOMイベントを取れる。
イベント修飾子なるものが、非常に便利そうな匂いを醸し出しているけれど、まだよくわかっていない。あとイベント修飾子passiveがまだよくわかっていない。
キー修飾子もある。
HTMLにこういうリスナを書くことはHTMLのテンプレートを眺めていれば「どういったイベントが発生するのか」わかりやすくなるという主張はなんとなく納得できた。

inputやtextareaみたいな入力内容のバインディングはv-modelでできる。（勝手にv-inputとかが良いじゃないのか？なんでもmodelなんだ？と思ったけど、もっと勉強すればわかってくるのかな？）
textarea以外に、checkbox, selectboxなどにも使えて、valueをバインディングすることもできる。
修飾子.lazyは使えそう。
あと地味に修飾子numberとtrimは、入力内容の余計な情報のトリミングに非常に役立ちそうな予感がした。

componentの基本として、componentは名前付きの再利用可能なvueのインスタンスだということ。なので、hogeってcomponentを作って、一つのHTMLにhogeタグを３つ作ってもそれぞれ独立したインスタンスだということ。これは重要なことだと思う。そのhogeがなにかミュータブルな値を保持するコンポーネントだとして、インスタンスが別なので値を共有することはないということになる。
dataには関数でなければいけない

Vue.componet('hoge', {
  data: function () {
    return {
      count: 0
    }
  }  
})

dataオプションの中は関数でないといけない。

<table>
  <tr is="blog-post-row"></tr>
</table>

こういったケースが関連しているのが、文字列テンプレート、単一ファイルコンポーネント、scriptタグ。。。。らしい。よくわかってない。

ここまでできたので、Todoアプリでも作りたい所存。