概要

社内の技術共有会で使用したもの。
自分の勉強も兼ねつつ、Vueを触ったことない方向けに作成したものです。

What's Vue.js ?

jsのフレームワークのひとつ
- 他だとAngular, Reactあたりが有名
プログレッシブフレームワークである。
- モノリシックではないので、開発レベルに合わせて段階的に導入することが可能
ECMAScript5対応ブラウザで使用してね
- 骨董品みたいなブラウザで使用するのは厳しいです
- せめてIE9から ~~IE8以下? 知らない子ですね~~

Hello World

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> わくわくVue </title>
<!-- 公式公開されているVue.js を読み込む -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

    <div id="app">
        <p>{{ message }}</p>
        <button v-on:click="displayMsg">Click!!</button>
      </div>

<script>
const app = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
    displayMsg : function () {
      this.message = "Hello World!!";
    }
  }
})
</script>

</body>
</html>

上記htmlを実行すると味気ないボタンが出ます。ボタン押下で「こんにちは世界」。

上記コードについて

const app = new Vue({
  el: '#app', // 1
  data: {
    message: '' // 2
  },
  methods: {
    displayMsg : function () { // 3
      this.message = "Hello World!!";
    }
  }
})

js側

1 : el
- html上でVueインスタンスの管理下に置く要素。セレクタで指定。
2 : data
- Vueインスタンスがもつプロパティ
- v-bind, v-model等でバインディングされるデータを保持
3 : methods
- Vueインスタンスが保持するメソッド
- イベントのハンドリングを行う際に使用。
- methodsオブジェクト下にメソッド名 : 関数で定義。
- アロー関数には気を付けろ、、、

<div id="app"> // 1
<p>{{ message }}</p> // 2
<button v-on:click="displayMsg">Click!!</button> // 3
</div>

html側

1 : id="app"
- Vueインスタンスで管理下に置いた要素。
2 : {{ message }}
- データバインディングの対象となる項目。今回はappインスタンスのmessageとバインディング。
- Mustache構文(二重中括弧)で記載すること。
3 : v-on:click="displayMsg"
- v-で始まる特別な記法をディレクティブと呼ぶ。属性値の変化があったときに作用する。
- 今回のv-onはdomイベントの受け取りを実施。:の後に記述されたイベントに対しバインディングする。 -v-on:clickでクリックされた時にdisplayMsgメソッドを実行。
- v-on:clickは@clickと略すことも可能。

その他の主なVueのディレクティブ

v-text

任意の文字列オブジェクトを指定要素に展開する

<span v-text="msg"></span>

<span>{{msg}}</span>

は両方同じ

v-html

<span>hoge</span>みたいな文字列を単なる文字列ではなく生htmlとして展開したいときに使用する

脆弱性とかを生むものでもあるのでご利用は計画的に

v-show

評価式に応じて指定要素のCSSプロパティdisplayに作用する

<div v-show="hoge">ほげ</div> <!-- hogeがtrueなら表示 -->

v-if, v-else, v-if-else

評価式に応じて指定要素を描画するか決定する

v-showと違って要素すら描画しない!! 用途に合わせて使い分けるのが吉。

<div v-if="hoge">  <!-- hogeがtrueなら描画 -->
  ほげ
</div>
<div v-else-if="fuga">  <!-- fugaがtrueなら描画 -->
  ふが
</div>
<div v-else> <!-- hoge,fugaがfalseなら描画, v-if, v-else-ifの直後でない場合は認識されないです -->
  not ほげふが
</div>

v-for

配列、オブジェクトを元にループを実行し要素を複数回描画する

<html>
<ul id="example">
  <li v-for="hoge in hoges">
    {{ hoge }} <!-- ほげ１、ほげ２がリスト形式で描画される -->
  </li>
</ul>
<script>
const hogeVue = new Vue({
  el: '#example',
  data: {
    hoges: ['ほげ１', 'ほげ２']
  }
})
</script>
</html>

所感

関わっている案件で使用していますが、ちゃんと使い分けとか考えてみると面白いと感じました。
次回の社内共有会ではコンポーネントやライフサイクルあたりを話そうかなあと思ってます。~~僕の知識が足りなくて今回の社内共有会でうまくまとめられなかったのは内緒~~
これからもぼちぼち頑張ろうと思います。

参考

Vue公式様
 とほほ様

はじめてのVue.js

概要