【Vue.js】初心者用の書き方サンプル集

初心者用と書いていますが、初心者の自分用です。

ちなみに、v-○○ みたいな構文を『ディレクティブ』と呼ぶそうです。

基礎編

v-bind

【HTML】

<div id="app">
 <input type="text" v-bind:value="message" />
</div>

v-bindはよく使うため、省略可能となっている。下も上も同結果。

<div id="app">
 <input type="text" :value="message" />
</div>

【JS】

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

【クラス付与の場合は v-bind:class】

<span v-bind:class="{ hello: time.isMoning }">

v-for 配列

【HTML】

v-for="配列の一要素の変数名 in 配列"

<div id="app">
 <ol>
   <li v-for="fruit in fruits">{{ fruit }}</li>
 </ol>
</div>

【JS】

var app = new Vue({
	el: '#app',
    data: {
        fruits: ['apple', 'banana', 'strawberry']
    }
})

v-for オブジェクト

バリューだけ取り出したい場合

v-for="value in object"

キーとバリューを取り出したいとき（バリューが先なので注意）

v-for="(value, key) in object"

【HTML】

<div id="app">
 <ul>
   <li v-for="value in book">{{ value }}</li>
 </ul>
 <hr>
 <ul>
   <li v-for="(value, key) in book">
     {{ key }} : {{ value }}
   </li>
 </ul>
</div>

【JS】

var app = new Vue({
	el: '#app',
    data: {
        book: {
            name: 'トラの書',
            date: '2020/12/01',
            author: 'ダザイオサム' 
        }
    }
})

【結果】

v-if

【HTML】

<div id="app">
 <p v-if='sundey'>
   日曜日
 </p>
</div>

【JS】

var app = new Vue({
	el: '#app',
    data: {
        sundey: true,
    }
})

v-on

【HTML】

v-on:click="ファンクション名"

<div id="app">
 <button v-on:click="click_func">
 Click
 </button>
 <p>
 {{ clickCount }}
 </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

【JS】

Vueオブジェクトにmethodプロパティを記載する

var app = new Vue({
	el: '#app',
    data: {
        clickCount: 0
    },
    methods: {
 	  click_func: function(){
   	    this.clickCount += 1;
       }
   }
})

【動作】

Clickボタンを押すたびに数字が1増える

v-model

双方向データバインディングに利用する。

【HTML】

<div id="app">
   <input type="text" v-model="message">
   <input type="text" v-model="message">
</div>

【JS】

var app = new Vue({
	el: '#app',
    data: {
        message: 'Hello'
    },
})

【動作】

一方のテキストボックス内容が変更されるとdataオブジェクト内のmessageも変更されるためもう一方のテキストボックス内容が変更される。

コンポーネントの使い方

繰り返し利用する部品をコンポーネントとして宣言し、再利用可能にする。

【HTML】

JSで宣言したコンポーネント名を指定する

<div id="app">
 <title-component></title-component>
 <title-component></title-component>
 <title-component></title-component>
</div>

【JS】

Vueオブジェクトの宣言前に記載する。

Vue.component('<コンポーネント名>', { template:'<HTML形式で記載>' })

Vue.component('title-component', {
	template: '<h1>ようこそ、Vue.js 虎の書へ</h1>'
})

var app = new Vue({
	el: '#app'
})

【動作】

応用編

v-once

初回だけVue.jsのテキストとして評価し、それ以降は静的コンテンツとする。つまり、初回に値が代入された後は変更不可となる。

【HTML】

<div id="app">
  <p v-once>
  {{ message }}
  </p>
</div>

【JS】

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }
})

v-pre

子要素のコンパイルを全て無視する。

【HTML】

<div id="app">
  <p v-pre>
  {{ message }}
  </p>
</div>

【JS】

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }
})

【動作】

v-html

タグ内にHTML要素として書き込む。

使いどころは、サーバー側からHTMLテキストを取得してくるような時。

ユーザーが入力したコンテンツをこれで表示するとクロスサイトスクリプティングなどで危険。

【HTML】

<div id="app">
  <p v-html=message>
  </p>
</div>

【JS】

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello <span style="color:red;">Tachibana</span>'
  }
})

【動作】

v-cloak

Vueインスタンスの準備が完了するまで、v-cloak属性を付与する。

インスタンスの準備が完了すると、v-cloak属性を外す。

CSSでv-cloak属性に対して見えなくする表記をしておくことで、インスタンスの準備が完了するまでその要素を見えなくすることが出来る。

ページ更新時に、マスタッシュタグなどが一瞬ちらつく現象を解消できる。

【HTML】

<div id="app">
  <p v-cloak>
  {{message}}
  </p>
</div>

【JS】

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Tachibana'
  }
})

【CSS】

[v-cloak] {
  display: none:
}

v-text

マスタッシュ構文を使う代わりに、v-textを利用してタグ内要素のテキストを代入する。

あまり使いどころがないので、なんとなくあったなあぐらいで覚えておく。

【HTML】

<div id="app">
  <p>
  {{ message }}
  </p>
  <p v-text="message">
  </p>
</div>

【JS】

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Tachibana'
  }
})

【動作】