Vue.js 自体の構文
まず、Vue.js 自体の基本的な構文を整理します。
Vue インスタンス
Vue インスタンスの書き方は次のような感じです。
app.js
new Vue({ el: "#app", data: { name: "Kei", age: "30", counter: 0 }, methods: { increase: function() { this.counter += 1; } } })
この app.js を Vue.js と共にインポートします。
html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <script src="app.js"></script>
{{ }}
{{ }} でVueインスタンスの要素を呼び出すことができます。
html
<p>{{ name }}</p>
v-bind
HTML要素をVue.jsで動的に指定したい場合は、v-bind を使います。
html
<a v-bind:href="link">Google</a>
v-once
v-once をHTMLタグに含めることで1度描画された内容を変更不可にできます。
html
<h1 v-once>{{ title }}</h1>
v-html
v-html はHTMLタグのまま出力するときに用います。
html
<p v-html="finishedLink"></p>
v-on
v-on でイベントリスニングします。
html
<button v-on:click="increase(2, $event)">Click me</button>
app.js
new Vue({ methods: { increase: function(step, event) { this.counter += step; } } })
v-on:click=“counter++” のように、if や loop を含まないJSの場合はインラインに直書きできます。
また、v-on:keyup.enter.space のようにつなげられます。
v-model
v-model を使えば、Vueインスタンスの data をHTML要素にバインドできます。変更された場合は、その値を参照しているDOM全てに反映されます。
html
<input type="text" v-model="name"> <p>{{ name }}</p> <!-- 入力値によって動的に name が変わる -->
app.js
new Vue ({ el: "#app", data: { name: "Kei" } })
@
v-on: の省略記法で、@click="link" のように書けます。
また、v-bind の代わりに : も使えます。
:class
:class="{YOUR_CLASS: boolean}" で動的にCSSを適用できます。
html
<div class="demo" @click="attachedRed = !attachedRed" :class="{red: attachedRed}"></div>
:class を複数定義する場合は array で書きます。
:style
:class と同様に、:style で動的にスタイルを適用できます。
html
<div :style="{backgroundColor: color}"></div>
スタイルのプロパティ名はキャメルケース（もしくは""）で書きます。
computed
Vueインスタンスの computed オブジェクトは、 methods に似ていますが、data プロパティのように処理結果を保持させる時に使います。methodsと違い、呼び出す時に () は不要です。
js.app.js
new Vue ({ computed: { divClassses: function() { return { red: this.attachedRed, blue: !this.attachedRed } } } })
watch
Vueインスタンスの watch オブジェクトは、特定のプロパティの変化をトリガーに処理を走らせる時に使います。data だけでなく computed のプロパティも watch できます。
js.app.js
new Vue ({ watch: { // counter を watch する counter: function(value) { var vm = this; setTimeout(function() { vm.counter = 0; }, 2000); }) } })
v-if, v-else
v-if が false の時は、そのHTML要素とその子要素をDOMから取り除きます。
v-else は直前の v-if が false の時に、そのHTML要素とその子要素をDOMに表示させます。
html
<p v-if="boolean">Hello!</p> <p v-else>Hello again!</p>
v-else-if という書き方もあります：
https://vuejs.org/v2/guide/conditional.html#v-else-if
v-show
v-show は v-if と同じ振る舞いをしますが、false の場合 display: none; となって、HTMLコード自体は残ります。
v-for
v-for で配列などプロパティに対するイテレーションを書きます。
html
<!-- ingredients: ["meat", "fruit", "cookies"] --> <ul> <li v-for="ingredient in ingredients">{{ ingredient }}</li> </ul>
index を取りたい時は次のように第2引数を定義してあげます。
html
<li v-for="(ingredient, i) in ingredients">{{ ingredient }}</li>
上は配列の例ですが、Objectにも同様に v-for を使えます。Objetctの場合、第2引数が key, 第3引数が index になります。
html
<li v-for="person in persons"> <div v-for="(value, key, index) in person"> {{ key }}: {{ value }} ({{ index }}) </div> </li>
また、Rubyでいう 10.times {} は v-for="n in 10" と書きます。
v-for や v-if の中で変更するデータを Vue.js に認識させたい場合は、意図した挙動になるように v-key=“ユニークな値” を付けます。
html
<li v-for="ingredient in ingredients" :key="ingredient"></li>
ライフサイクル
Vueインスタンスのライフサイクルは次の通りです。それぞれのタイミングでフックして処理を書くことができます。
beforeCreate
Created
beforeMount
mounted
(DOM描画)
(DOMの変更を検知)
beforeUpdate
updated
( this.$destroy(); )
beforeDestroy
Destroyed
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <meta charset="UTF-8"> </head> <body> <div id="app"> <input type="text" v-model="text1"> <input type="button" @click="add()" value="追加"> <div>{{ itemCount }}</div> <table border="1" v-if="items.length > 0"> <tr v-for="(item, i) in items"> <td>{{ item }}</td> <td><input type="button" @click="del(i)" value="削除"></td> <td><input type="button" @click="update(i)" value="更新"></td> </tr> </table> </div> </body> </html> <script> const app = new Vue({ el: '#app', data: { text1: '', items: [] }, mounted() { this.text1 = 'test'; }, methods: { add() { this.items.push(this.text1); }, del(i) { app.items.splice(i, 1); }, update(i) { Vue.set(app.items, i, this.text1); } }, computed: { itemCount() { return this.items.length + '個'; } } }) </script>
'IT' 카테고리의 다른 글
| 웹 테트리스 (0) | 2021.06.26 |
|---|---|
| 큐브리드 정기교육 교육자료 (0) | 2021.06.26 |
| 제우스 라이브러리 등록방법 (JSP컴파일문제, 클래스패스 문제, 프로퍼티설정 등) (0) | 2021.06.26 |
| JEUS의 heap size 설정 (0) | 2021.06.25 |
| [JEUS] JEUS 디렉토리 구조 (0) | 2021.06.25 |
댓글