0%

Programmingプログラミングナレッジ

Posted:2018.05.28

Vue.jsの導入と基本に触れてみる

近年では様々なjavascriptフレームワークが登場していますが、今回はその中でも人気のある「Vue.js」について、導入部分と基本的な構文の例をいくつか挙げていきたいと思います。Vue.jsは主にフロントエンドのUIを構築する時に使われ、PWAなどで推奨されているSPA(シングルページアプリケーション)の構成でサイトを構築する時に便利だそうです。

 

Vue.jsを使うための準備

Vue.jsは基本的にライブラリとなるソースコードを読み込むことですぐに使えるようになります。CLIを使ってコンパイルする方式もありますがこちらについては後日まとめていきたいと思います。

 

下記のコードでスクリプトファイルを読み込みます。ファイルをダウンロードしてプロジェクトに含めるか、CDNで利用していきます。

<script src="./PATH/vue.js"></script>

// CDNで利用する場合
<!-- 開発バージョン -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 本番バージョン -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

 

 

Vue.jsの基本となる構文例

Vue.jsのスクリプトファイルを読み込めばVue.jsで使われている書き方でコーディングすることが可能です。様々な便利機能があるのですが、今回は基本的なところに焦点を当ててメモしていきたいと思います。

 

1. データをバインドしてレンダリングする

javascript内でデータとして設定された値をHTMLに出力する例です。もっとも基本的な形になります。

// HTML
<div id="app_01">
  {{ message }}
</div>

// JS
var app_01 = new Vue({
  el: '#app_01',
  data: {
    message: 'Hello World!!'
  }
})

// 出力結果
<div id="app_01">Hello World!!
</div>

 

 

2. 条件分岐を使った出力

値を出力する時に条件を設定することも可能です、ここでは値を切り替えることで出力を変えることができます。

// HTML
<div id="app_02" v-if="boolean">値がtrueの場合に内容が表示されます
</div>

// JS
var app_02 = new Vue({
  el: '#app_02',
  data: {
    boolean: false
  }
})

// 出力結果
<!-- 出力されません -->

 

 

3. 配列の値で繰り返す

配列の値から要素を繰り返して表示させることも可能です。

// HTML
<ul id="app_03">
  <li v-for="loop in lists">
    {{ loop.list }}
  </li>
</ul>

// JS
var app_03 = new Vue({
  el: '#app_03',
  data: {
    lists: [
      { list: '項目1' },
      { list: '項目2' },
      { list: '項目3' }
    ]
  }
})

// 出力結果
<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

 

 

4. イベントハンドラの追加

イベントを設定し、関数を実行することも可能です。

// HTML
<div id="app_04">
  <p>{{ message }}
  </p>
  <button v-on:click="changeMessage">Click!!</button>
</div>

// JS
var app_04 = new Vue({
  el: '#app_04',
  data: {
    message: 'Hello World!!'
  },
  methods: {
    changeMessage: function() {
      this.message = 'This message has changed.'
    }
  }
})

 

 

5. コンポーネントの定義とインクルード

要素をコンポーネントと定義して、テンプレートとして呼び出します。コンポーネントはグローバルとローカルで分けられており、ローカルの場合は指定されたインスタンスの中でのみ使うことができます。

// HTML
<div id="app_05">
  <component-global>
  </component-global>
</div>
<div id="app_06">
  <component-global>
  </component-global>
  <component-local>
  </component-local>
</div>

// JS
Vue.component('component-global', {
  template: '<div>グローバルを対象としたコンポーネント</div>'
})
var localComp = {
  template: '<div>ローカルを対象としたコンポーネント</div>'
}
var app_component_01 = new Vue({
  el: '#app_05'
})
var app_component_02 = new Vue({
  el: '#app_06',
  components: {
    'component-local': localComp
  }
})

// 出力結果
<div id="app_05">
  <div>グローバルを対象としたコンポーネント</div>
</div>
<div id="app_06">
  <div>グローバルを対象としたコンポーネント</div>
  <div>ローカルを対象としたコンポーネント</div>
</div>

 

 

今回はVue.jsの基本的なところのみをまとめていきましたが、次回はVue.jsで使える便利な機能やメリットを活かした使用例なども紹介していきたいと思います。

 

(参考にさせて頂いたサイト)
Vue.js はじめに

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】