【Vue.js】って何なのさ？
【サンプル】
【ソース】
<!doctype html>
<html lang="ja" class="no-js">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
■フォーム入力の同期
<!-- ルートのテンプレート -->
<div id="app">
<input v-model="msg">
<p>{{ msg }}</p>
</div>
</body>
</html>
<script>
var app = new Vue({
el: "#app",
data: {
msg: 'Hello World!'
}
})
</script>
【解説】
なにはともあれテキストボックスに入力してみてください。
何の面白みもない文字が表示されているだけですが、実は【Vue.js】を使用する上で知っておくべきエッセンスがあります。
「DOM」の操作をする必要がない
ただ「Hello World!」と表示されているだけですが、テキストボックスに何か入力してみてください。
入力されたものが即、上の文字に反映されるはずです。
しかし、上のソースではDOMで「.innerHTML」等のDOMで代入している形跡がありません。
DOMの操作は【Vue.js】が勝手にやってくれます。
これが最大のメリット。
保守性も抜群です。
【Vue.js】界隈では、「データバインディング」と呼ばれます。
今回は用語よりも、とりあえず【Vue.js】がどのようなものかを触っていただきたいという目的のみの記事です。
なぜ【Vue.js】を紹介するのか。
公式のドキュメントは豊富で、私もよくお世話になっています。
正直、プログラミングになれている方は公式を都度参照したほうが確実です。
本ブログの目指すところは「何から勉強すればいいのか？」という導線となることを目指します。
私も数日前に始めた超初心者です。
なんも知らん状態からステップを駆け上がるにはどうしたらいいか。
このブログにはそんな手順を全て記載していきたいと思います。
思いついたコラムも都度はさんでいきます。
なにはともあれ「Hello World!」?
とりあえずフレームワークのステップを踏むにあたり
どのフレームワークの本を購入しても
「とりあえず特徴を書くねー」
「導入までを教えるねー」
「if文とかfor文とかは、このフレームワークではこう書きますよー」
という流れになってます。
本ブログでも、先人の流れに沿ってとりあえずは「Hello world!」を表示することから始めたいと思います。
今後しばらくの間、【Vue.js】のチュートリアル記事を続けて投稿します。
最終的に管理人が「ド初級者」から「Vue.jsはまかせろー(‘ω’)」な技術力を付けたら全てのステップをまとめてみたいと思います。
