Help us understand the problem. What is going on with this article?

はじめてのVue.js

概要

社内の技術共有会で使用したもの。
自分の勉強も兼ねつつ、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 }} <!-- ほげ1、ほげ2がリスト形式で描画される -->
  </li>
</ul>
<script>
const hogeVue = new Vue({
  el: '#example',
  data: {
    hoges: ['ほげ1', 'ほげ2']
  }
})
</script>
</html>

所感

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

参考

Vue公式様
とほほ様

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした