ローカル環境でvue.js

こんにちは。
巷を賑わせているvue.jsを使ってみました。ただしローカルの環境で！

vue.jsを始めるときって大体、npm installやら、node.jsが絡んできて、
ローカルサーバ立てたりとかしないといけない感じがして、敷居がとても高く感じることありませんか？

でも、もっと手軽に簡単に使ってみたいときとか、事情があってnode環境作れないって人とかとか。
意外に多いんじゃないかと思うんですよね。

なので、今回はローカル環境でvue.jsを使ってみたときのことをまとめてみたいと思います。

準備

まず初めに、vue.js本体を入手する必要があります。公式サイトにアクセスして、手に入れましょう！
CDN経由で使いたい場合も、ここに記載されているようにhtmlファイルに組み込んでください。

index.html

<html>
  <head>
    <!-- 自分の環境に配置したvue.jsを指定 -->
    <script src="./vue.min.js"></script>

    <!-- もしくはCDN経由で読み込み -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  </head>

  ・・・

</html>

準備はこれだけです。簡単ですね。

実際に使ってみる

vue.jsの準備ができれば、早速使ってみましょう。
基本的には、vue.jsもjavascriptなので、scriptタグ内に処理を記述していくことになります。
以下のサンプルソースを載せてみます。

index.html

<html>

  ...

  <body>
    <div class="contents">
      {{ message }}
      <button v-on:click="test_function">test</button>
      <div v-if="str === '1' ">
          if分岐できるよ
      </div>
    </div>
  <script>
    var app = new Vue({
      el: ".contents",
      data: {
         message: "test",
         str: "2",
      },
      methods:{
         test_function: function(event){
            alert( "test" );
         }
      },
    })
  </script>
  </body>
</html>

elはhtmlのエレメントを指定することができ、dataの中に変数を記載し、methodの中に関数を記述します。
dataのなかで宣言した変数を、{{ 変数 }}として指定することで、htmlないで使用することができます。

このとき、注意しなければならないポイントは、elにどのエレメントを指定しているか？です。
vue.jsの場合、ここで指定したエレメントのスコープ中でしかdataに指定した変数およびmethodsの関数を利用することができません。

あとは、v-on:clickで関数を呼び出したり、v-ifで条件分岐させたり、思うようにvueを使いましょう。

vue.js使って静的なサイトを作ってみました。
QRコードを生成するツール
vue.jsと、vue-qriouslyに独自に手を加えたもの、bootstrapも使ってみています。

vue-qriouslyはQRコードを生成するためのライブラリで、bootstrapは言わずもがなcssのフレームワークですね。
上記に関しても、いずれ記事を書いてみたいと思います。