2021-10-05・Vue.jsの書き方、HelloWorldを画面上に出すまで・v-bind、v-model、v-ifのよく使いそうな書き方はじめに先日から学習を始めたVue.jsのアウトプットです。おなじみのHelloWorldの出力と、バインディングで使われる「v-bind」、「v-model」とVue.jsでの分岐式「v-if」の書き方を紹介します。Worldを出力まずはVue.jsの第一歩、HelloWorldの出力です。HTMLファイルの任意のタグ(DIVタグとか)にidを設定してその領域に対してVue.jsが有効になります。Vue.jsはHTMLファイルに、スクリプトタグでjsファイルを呼び出して使います。Vue({})」を定義して中カッコの中に処理を書きます。今回はDIVタグの中に「id=’app’」を指定してDIVタグの中にVue.jsで設定した「message」変数を出力します。}})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の変数に格納したり変数の値をテキストボックスに出力することが出来ます。}})先ほどのHelloWorldとの違いはHTMLファイルの3行目のみです。テキストボックスのタグに変更して、「v-bind:value=’message’」を設定しています。ここでは中カッコの連続表記は行っていません。v-bindのみ「v-bind」を省略出来ます。:value=’message’>」と表記しても同じ結果を得られます。v-modelについてv-modelはテキストボックスの値を変更した場合、設定している変数の格納も同時に行い非同期通信の振る舞いを行ってくれます。}})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変数を表示する処理となります。}})HTMLファイルのPタグにv-ifを追加しています。testという変数はVue.js側にあり現在はtrueを設定しています。これをfalseに設定した場合は画面上何も表示されません。