最近Vue.jsという言葉をよく耳にします。
遅れてるのか...

Vue.jsとは、ユーザーインターフェイスを構築するためのプログレッシブフレームワーク
javascriptのフレームワークですね。

■シンプルで自由度が高い

本格的なWEBアプリから、簡単な一部の機能実装まで幅広い規模に対応できること。

■MVVM「Model(M)-View(V)-ViewModel(VM)」

「Model（データ）」「View（画面）」「ViewModel（メイン処理）」といった具合で分けて開発を行うことができる。
保守、運用なども行いやすいので、大規模なアプリにも対応できる。

■コンポーネント

各プログラムを部品化して再利用ができる。
書くプログラムの量が減るため、開発の生産性を上げることができる。

■学習効率

構造もシンプルで日本語のドキュメントも充実しているので、学習コストも低い。
HTML、CSSとJavaScriptの基礎を学習すれば使い始めることができる。
他のフレームワークに切り替えるといったことも比較的簡単。

これは覚えるしかない！！
といった感じで一から勉強中です。

ディレクティブ

Vueでは、タグに v-* の属性を指定することができる。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue TEST</title>
<!-- Vue.js を読み込む -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<div id="test">{{ msg }}</div>  <!-- {{ msg }} が Vueデータに置換 -->
<script>
var test = new Vue({
  el: '#test',                        /* #test 要素に対して Vue を適用 */
  data: { msg: 'Hello world!' }    /* msg という名前のデータを定義 */
})
</script>

</body>
</html>

表示

Hello!

テキストをレンダリングする(v-text)

<div id="test">
  <div v-text="msg"></div> <!-- この行と -->
  <div>{{ msg }}</div> <!-- この行は、同じ意味 -->
</div>
<script>
  var vt = new Vue({
    el: '#test',
    data: {
      msg: 'Hello!'
    }
  })
</script>

表示

Hello!
Hello!

HTMLをレンダリングする(v-html)

v-html を用いた場合はタグが置換されずそのまま出力される。
※クロスサイトスクリプティングに注意。

<div id="test">
  <div v-text="msg"></div> <!-- 置換される -->
  <div v-html="msg"></div> <!-- 置換されない -->
</div>
<script>
  var vt = new Vue({
    el: '#test',
    data: {
      msg: '<p>Hello!</p>'
    }
  })
</script>

表示

<p>Hello!</p>
Hello!

条件により表示を制御する(v-show)

値の真偽により表示する・しないを制御。

<div id="test">
  <p v-show="display">Hello!</p>
</div>
<script>
  var vt = new Vue({
    el: '#test',
    data: {
      display: true
    }
  })
</script>

変数 display が true の時は Hello! を表示し、false の時は表示しない。

trueの場合

Hello!

条件分岐は他に、(v-if)(v-else)(v-else-if)がありますね。

Vue.jsはとても学習効率が高い！フロントエンドロードマップにも、
「フレームワークにも多くの選択肢がありますが、最近よく使われているのはReact、Vue、Angularです。」
こんなんかいてありますから、学習したほうが良いはず！！

長くなりそうなんで次回も引き続きVue.jsについてかこうかな...

Vue.js始めました。