Vue.jsを試してみます。
Vue CLIを導入する前に、まずは簡単に試せるVue.jsのサンプルを動かしてみます。
以下をhtmlファイルとして保存し、Webブラウザで開きます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Vueサンプル</title> </head> <body> <div id="app"> {{ text }} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { text: "Hello, Vue", } }); </script> </body> </html>
恐らくこれが最もシンプルなVue.jsのサンプルになると思います。
{{ text }} は変数textの値を表示しています。
<div>タグのidにappを指定しています。後述のVueインスタンスで#appと対応が取れていれば任意のidが指定可能ですが、慣例的にappにしています。
<div id="app"> {{ text }} </div>
Vueインスタンスを生成しています。elで<div>タグのidを指定していて、data配下で「text」という名前の変数を定義し、値を設定しています。
new Vue({ el: '#app', data: { text: "Hello, Vue" } });
たったこれだけですが、まずは実行して簡単に画面に表示できることがわかりました。