Vue.jsの使い方まとめ

2021-02-07

イベントを扱う

マウスクリック

<div v-on:click="myFunction()"></div>

<div @click="myFunction()"></div>

でも同じ意味です。

ダブルクリック

<div v-on:dblclick="myFunction()"></div>

<!-- 省略形 -->
<div @dblclick="myFunction()"></div>

マウスオーバー

<div v-on:mouseover="myFunction()"></div>

<!-- 省略形 -->
<div @mouseover="myFunction()"></div>

マウスホバーアウト

<div v-on:mouseleave"myFunction()"></div>

<!-- 省略形 -->
<div @mouseleave"myFunction()"></div>

データバインディング（属性をプロパティと結びつける結びつける）

href属性と結びつけてみる

<a v-bind:href="url">Google.com</a>

<!-- 省略形 -->
<a :href="url">Google.com</a>

とするとdataプロパティ内のurlプロパティと紐付けることができます。
この時注意としてはhref=””の部分はhref=”{{url}}”ではなくhref=”url”だということ。

value属性と結びつけてみる

<input type="text" v-bind:value="name">

<!-- 省略形 -->
<input type="text" :value="name">

hrefと同様、上記の様にv-bindを使うとvalue属性とnameプロパティを紐付けることができます。
これ以外の属性も同じやり方でOKです。

HTMLをレンダリングして表示する

new Vue({
    el: '#app',
    data: {
        website: '<a href="https://google.com">Google</a>'
    }
})

上記の「website」プロパティにはhtmlそのものが入っています。
これをレンダリングするにはv-htmlディレクティブを使います。

<p v-html="website"></p>

こうすることでHTMLが文字列として表示されるのではなくレンダリングされて表示してくれます。
{{website}}とするとレンダリングされずに、HTMLタグが文字列として表示されてしまうので注意。

コンポーネントを使う

サイト内のいろんな場所で使う要素（パーツ）はコンポーネントを作り使い回すと便利です。
Vue.jsではVue.component()メソッドでコンポーネントを定義すると<yourtag></yourtag>のようにオリジナルタグでコンポーネントが使えるようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>Document</title>
</head>
<body>
    <div id="app">
        <alrt-box>入力</alrt-box>
        <alrt-box>データベース接続</alrt-box>
        <alrt-box>通信</alrt-box>        
    </div><!-- /#app -->
    
    <!-- 開発バージョン、便利なコンソールの警告が含まれています -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        // コンポーネント作成
        Vue.component('alrt-box', {
            template: `
            <div>
                Error!: <slot></slot>に関するエラーが発生しました。<button @click="showBox">詳細</button>
            </div>
            `,
            methods: {
                showBox: function() {
                    alert('管理者にご連絡ください: 000-0000-0000')
                }
            }
        });

        // Vueインスタンス作成
        const app = new Vue({
            el: '#app',            
        })

    </script>
</body>
</html>

<slot></slot>タグで好みの内容を差し込む

Vue.component()メソッド内にtemplateプロパティを定義し、その中で<slot></slot>タグを追加するとコンポーネントに文字列等を渡すことができます。

<componentname>こんにちは</componentname>

MethodsとComputedの違い

	Methods	Computed
使用例	{{myFunc()}}	{{myFunc}}
キャッシュ	されない	される
実行	毎回実行される	依存関係にあるデータに変更があった時のみ実行され、それ以外はキャッシュされていたものが返ってくる
処理負担	毎回実行されるためComputedに比べて重い	データ変更時のみ実行されるためMethodsより軽い
注意点		Dateオブジェクトを使って現在日時を返す場合などにcomputedを使うとキャッシュされてしまいいつも同じ日時が表示されてしまうので、あえてmethodsを使う