VueJSとりあえず触る

VueJSとは

ユーザーインターフェイスを構築するためのプログレッシブフレームワーク

https://jp.vuejs.org/v2/guide/

使って見た感じ、jQueryを導入してても邪魔しないで導入できたり、DOM操作の際にいっしょに使えたりと意外と柔軟な作りで最近伸びてきているのもわかりました。
AngularとかReactもとっつきにくいのでここから取得していくのが現実的ではないかと思います。

とりあえず使う

主にversion1系と2系がありますが、細かいところは抜きにして基本的なところだけ触っていきます。

サンプル1

サンプル1: https://www.laddy.info/static/vue_sample01.html

  • input typeのtextとmessageの部分が連動
  • ボタンを押したときの methods の挙動

インスタンス化したvueの中のdataオブジェクトがelで指定した範囲の変数として連動するところから入ると理解しやすいかもしれません。

サンプル2

サンプル2: https://www.laddy.info/static/vue_sample02.html

  • ボタンを押したときにオブジェクトのリストを突っ込んで v-forで繰り返し表示を行う

かんたんなところでこんな感じ、
v-onやv-forなどのディレクティブ機能もたくさんあるけけど基本さえ覚えればなんとか作っていけるような感じ。