Vue

【Vue.js 2.9】はじめてのVue.js 基本構文まとめ（v-bind、v-model、v-if）

  /

・Vue.jsの書き方、HelloWorldを画面上に出すまで
・v-bind、v-model、v-ifのよく使いそうな書き方

はじめに

先日から学習を始めたVue.jsのアウトプットです。
まずはおなじみのHelloWorldの出力と、バインディングで使われる「v-bind」、「v-model」とVue.jsでの分岐式「v-if」の書き方を紹介します。

【Vue.js 2.9】はじめてのVue.js プロジェクト作成からWelcomeページの表示 ・はじめてVue.jsを使う場合のやり方・Welcomeページを表示するまで紹介 はじめに Vue.jsの学習がここから始...

環境情報

名前詳細
Vue.js開発バージョン（https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js）
エディタJSFiddle（https://jsfiddle.net/）

Hello Worldを出力

まずはVue.jsの第一歩、HelloWorldの出力です。

HTMLファイルの任意のタグ（DIVタグとか）にidを設定してその領域に対してVue.jsが有効になります。
Vue.jsはHTMLファイルに、スクリプトタグでjsファイルを呼び出して使います。

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

別のスクリプトタグの中に、「new Vue({})」を定義して中カッコの中に処理を書きます。
今回はDIVタグの中に「id=’app’」を指定してDIVタグの中にVue.jsで設定した「message」変数を出力します。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id='app'>
  <p>
    {{ message }}
  </p>
</div>
new Vue({
	el: '#app',
	data:{
  	  message: 'Hello World'
        }
})

HTMLファイルには、Vue.jsを呼ぶスクリプトタグと、Vue.jsを有効にする領域DIVタグ（id=’app’）を設定しています。
3行目から5行目にはVue.jsで定義した変数「message」を呼んでいます。
Vue.jsで定義した変数を呼ぶには中カッコ2つ連続が必要です。（{{変数名}}）

Vue.jsが記載しているJSファイル（スクリプトタグでも可）には、Vue.jsを有効化したい領域のid名を設定しています。
今回はid名「app」を有効化させたいので「#app」としています。（#はidのことでありCSSの書き方と同じです）
なお、「el」はelementの略とのことです。

3行目から5行目で変数の定義と初期化をしています。
HTMLファイルにはmessage変数を出力しているのでmessage変数を4行目で設定しています。

ここまででHelloWorldの出力が終わりました。
Vue.jsの使える範囲を設定するのは個人的には珍しく面白い気持ちでした。

v-bindについて

ここからはVue.js独特の属性についです。
Vue.js独特の属性はディレクティブ（指令）と呼ばれ「v-」から始まります。

v-bindはデータバインディングの1つであり、HTMLのテキストボックスの値をVue.jsの変数に格納したり変数の値をテキストボックスに出力することが出来ます。


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id='app'>
  <input type='text' v-bind:value='message'>
</div>

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

先ほどのHelloWorldとの違いはHTMLファイルの3行目のみです。
テキストボックスのタグに変更して、「v-bind:value=’message’」を設定しています。
ここでは中カッコの連続表記は行っていません。

また、v-bindのみ「v-bind」を省略出来ます。
サンプルのテキストボックスのタグは「<input type=’text’ :value=’message’>」と表記しても同じ結果を得られます。

v-modelについて

v-modelはテキストボックスの値を変更した場合、設定している変数の格納も同時に行い非同期通信の振る舞いを行ってくれます。


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id='app'>
  <input type='text' v-model='message'>
  <p>
    {{ message }}
  </p>
</div>

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

v-bindの違いはHTMLファイルの3行目の「v-model」の部分のみです。
反映が分かるようにmessage変数をPタグで括っています。

初期表示はv-bindの時と同じでテキストボックスにはmessage変数の値が設定されています。
ここでテキストボックスの値を変更した場合、下記のようにPタグの部分も、変更された値が表示されます。

サーバーサイド側からすると、変数が変わっているから表示は当然かと考えられますがクライアントには描画という段階があるため通常は変数が変わっても反映されません。
そういった場合はAjaxや、onChangeイベントを定義する必要ありますがVue.jsでは「v-model」を設定するだけで反映されます。

v-ifについて

Vue.jsでの条件式の書き方は「v-if」をタグの中に埋め込みます。
サンプルとして、testという変数がtrueの場合のみmessage変数を表示する処理となります。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id='app'>
  <p v-if='test'>
    {{ message }}
  </p>
</div>

new Vue({
  el: '#app',
  data:{
    message: 'Hello World',
    test: true
  }
})

HTMLファイルのPタグにv-ifを追加しています。
testという変数はVue.js側にあり現在はtrueを設定しています。
これをfalseに設定した場合は画面上何も表示されません。

参考記事

Vue.js-テンプレート構文-
https://jp.vuejs.org/v2/guide/syntax.html

RELATED POST