Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

ローカル環境でvue.js

More than 1 year has passed since last update.

こんにちは。
巷を賑わせている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のフレームワークですね。
上記に関しても、いずれ記事を書いてみたいと思います。

bakepotate
趣味はプログラミングとジグソーパズル。 興味のある事についてまとめていきたいと思っています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away