• 技術が集うTECH GUILD

    Vue.jsを試してみます。

    Vue CLIを導入する前に、まずは簡単に試せるVue.jsのサンプルを動かしてみます。

    Vue.jsのサンプル

    以下をhtmlファイルとして保存し、Webブラウザで開きます。

    hello_vue.html
    <!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のサンプルになると思います。

    実行結果

    hello_vue.html

    解説

    {{ 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"
      }
    });

    たったこれだけですが、まずは実行して簡単に画面に表示できることがわかりました。


    コメント一覧

    返信2018年12月26日 22:15

    【Vue.js入門】VueのHelloWorldを解説 (Vue Routerなし) | TECH GUILD23/

    […] 以前の記事で、外部JavaScript呼び出しでお手軽にVueを始めることを試しました。ただ、本格的にVueを利用するために、様々なツールやライブラリの恩恵を受けるためにVue CLIの導入が必須 […]

    コメントを残す

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください