Vue.js始めました。
Vue.js始めました。:
最近Vue.jsという言葉をよく耳にします。
遅れてるのか...
Vue.jsとは、ユーザーインターフェイスを構築するためのプログレッシブフレームワーク
javascriptのフレームワークですね。
本格的なWEBアプリから、簡単な一部の機能実装まで幅広い規模に対応できること。
「Model(データ)」「View(画面)」「ViewModel(メイン処理)」といった具合で分けて開発を行うことができる。
保守、運用なども行いやすいので、大規模なアプリにも対応できる。
各プログラムを部品化して再利用ができる。
書くプログラムの量が減るため、開発の生産性を上げることができる。
構造もシンプルで日本語のドキュメントも充実しているので、学習コストも低い。
HTML、CSSとJavaScriptの基礎を学習すれば使い始めることができる。
他のフレームワークに切り替えるといったことも比較的簡単。
これは覚えるしかない!!
といった感じで一から勉強中です。
Vueでは、タグに v-* の属性を指定することができる。
v-html を用いた場合はタグが置換されずそのまま出力される。
※クロスサイトスクリプティングに注意。
値の真偽により表示する・しないを制御。
変数 display が true の時は Hello! を表示し、false の時は表示しない。
条件分岐は他に、(v-if)(v-else)(v-else-if)がありますね。
Vue.jsはとても学習効率が高い!フロントエンドロードマップにも、
「フレームワークにも多くの選択肢がありますが、最近よく使われているのはReact、Vue、Angularです。」
こんなんかいてありますから、学習したほうが良いはず!!
長くなりそうなんで次回も引き続きVue.jsについてかこうかな...
最近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>
trueの場合
Hello!
Vue.jsはとても学習効率が高い!フロントエンドロードマップにも、
「フレームワークにも多くの選択肢がありますが、最近よく使われているのはReact、Vue、Angularです。」
こんなんかいてありますから、学習したほうが良いはず!!
長くなりそうなんで次回も引き続きVue.jsについてかこうかな...
コメント
コメントを投稿