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
9
Help us understand the problem. What is going on with this article?
@pale2f

Vue.jsをお手軽に導入する

More than 3 years have passed since last update.

概要

Vue.jsを手軽に導入してみます。

方針は、

  • WebpackやNode.jsは使わない

ということで、単純なHTMLとJSだけでVue.jsをとりあえず使ってみましょう。

サンプルコード

まずは、サンプルコードです。

<!-- Vue.js(このサンプルではCDNを使用する) -->
<script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>

<!-- x-templateでテンプレートを定義 -->
<script type='text/x-template' id='app-template'>
  <div>
    <p>sampleNumber: {{ sampleNumber }}</p>
    <p>sampleText: {{ sampleText }}</p>
    <p>sampleComputedNumber: {{ sampleComputedNumber }}</p>
  </div>
</script>

<!-- appのマウント先となるHTML要素 -->
<div id='app-mount-element'>
</div>

<!-- ロード時に実行されるscript -->
<script>
  // Vueインスタンスを生成する
  var app = new Vue({
    // テンプレート
    template: '#app-template',
    // データオブジェクト
    data: {
      sampleNumber: 100,
      sampleText: 'abc'
    },
    // 算出プロパティ
    computed: {
      sampleComputedNumber: function() {
        return (this.sampleNumber * 2);
      }
    }
  });

  // VueインスタンスをHTMLにマウントする
  app.$mount('#app-mount-element');
</script>

See the Pen NYZLgG by pale2f (@pale2f) on CodePen.

最初に知っておくべきこと

最初に、

  • Vue.jsのテンプレートは(専用の文法に従った)単純な文字列である

ということを理解しておく必要があります。

elオプションを使用すると、指定した要素の内容を置換してくれるので、HTMLに値をバインドしているかのようにみえますが、そうではないのです。

また、以下の制限にも要注意です。

上記のリンク先に記載されているとおり、HTML上でテンプレートを定義する場合、ブラウザがHTMLを解釈する方法に注意が必要です。

このサンプルコードでは、

  • x-templateでテンプレートを定義する

という手法で、上記の制限を回避しています。

詳しくは、以下のリンク先をご参照ください。

Vueインスタンスを意識する

  • Vueのコンストラクタ(new Vue(...))で指定するのは、Vueインスタンス生成のオプション

↑改めて文章にしてみたら当たり前すぎました。
しかし、Vue.jsの場合、この当たり前のことに混乱しがちです。

  • datacomputedも、Vueコンストラクタのオプションに過ぎない

ということを忘れないようにしましょう。

このサンプルコードでは、敢えて変数に代入する事でインスタンスを意識しやすくしています。

また、Vueインスタンスのマウント処理も敢えて明示的に書いています。

API - vm.$mount

最後に

Vue.jsは非常に便利なので色々なシーンで使いたいのですが、最近のフロントエンド界隈は、環境構築のハードルが(いろんな意味で)高いので、手軽に導入するためのサンプルを書いてみました。
これぐらいなら、jQueryぐらいの導入コストで、Vue.jsを使えるのではないかと思っています。

無論、Webpackなどが使える環境であれば、Vue.jsの魅力をもっと引き出せるのはいうまでもありませんが、この程度の使い方でも、Vue.jsは充分便利です。本当に隔世の感があります。

9
Help us understand the problem. What is going on with this article?
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
pale2f
恋するQiita

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
9
Help us understand the problem. What is going on with this article?