最近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 の時は表示しない。
Hello!
条件分岐は他に、(v-if)(v-else)(v-else-if)がありますね。
Vue.jsはとても学習効率が高い！フロントエンドロードマップにも、
「フレームワークにも多くの選択肢がありますが、最近よく使われているのはReact、Vue、Angularです。」
こんなんかいてありますから、学習したほうが良いはず！！
長くなりそうなんで次回も引き続きVue.jsについてかこうかな...