• 技術が集うTECH GUILD

    Vue.jsの入門 お手軽サンプルを試してみる

    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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

    Copyright © TECH GUILD All Rights Reserved.
    Powered by WordPress & saitama Theme by Commnitycom,Inc.