一、vue インスタンス#
1. vue インスタンスの作成#
vue インスタンスはnew Vueを使ってルートインスタンスを作成する必要があります。すべての vue コンポーネントは実際には vue インスタンスです。
var vm = new Vue({
...
})
インスタンスが作成されると、dataオブジェクトのプロパティはすべて vue のリアクティブシステムに追加され、値が変更されるとビューも変更されます。
var data = {a: 1}
var vm = new Vue({
data: data
})
この時、コンソールでvm.a == data.aと入力すると true が返され、変数dataはvueインスタンスのdataオブジェクトに割り当てられました。
同時に、2 つのオブジェクトのデータを操作して変更すると、もう一方にも影響を与えます。
vm.a = 2
// data.a = 2
data.a = 3
// vm.a = 3
データが変更されると、ビューも再レンダリングされます。vue インスタンスが作成された後に新しいプロパティを追加しても、リアクティブシステムには追加されません。
もし最初から後でプロパティを追加することが分かっているが、最初は存在しないか空である場合は、いくつかの初期値を設定する必要があります。
data: {
newTodoText: '',
visitCount: 0,
hideCompletedTods: false,
todos: [],
error: null
}
Object.freeze () メソッドを使用すると、データを変更してビューを変化させることはできません。
Object.freeze () メソッドはオブジェクトを凍結します。凍結されたオブジェクトはもはや変更できず、新しいプロパティを追加したり、既存のプロパティを削除したり、既存のプロパティの列挙性、設定可能性、書き込み可能性を変更したり、既存のプロパティの値を変更したりすることはできません。また、オブジェクトを凍結した後、そのオブジェクトのプロトタイプも変更できません。freeze () は渡された引数と同じオブジェクトを返します。
<div id="app">{{message}}</div>
<script>
var data = {message: 'hello,wolrd'}
Object.freeze(data)
var vm = new Vue({
el: '#app',
data: data
})
</script>
コンソールでvm.messageの値を変更しようとすると、直接エラーが発生します。なぜなら、data オブジェクトはすでに凍結されているため、変更できないからです。
vm.$data
vue インスタンスが監視しているデータオブジェクトを表します。
console.log(vm.$data)
// データオブジェクトの配列形式を返します
var data = { a: 1 }
var vm = new Vue({
el: '#app',
data: data
})
vm.$data === data // true
vm.$el === document.getElementById('app') // true
2. ライフサイクル関数#
各インスタンスは作成されるときに、データの監視を設定したり、テンプレートをコンパイルしたり、インスタンスを DOM にマウントしたり、DOM を更新したりするなどの初期化プロセスを経なければなりません。
このプロセスでは、ライフサイクルと呼ばれるフック関数が実行され、異なる段階で必要なコードを追加できます。
例えば、createdフックはインスタンスが作成された後に実行されるコードを示すために使用できます。
new Vue({
data: {
a: 1
},
created: function () {
console.log('a is: ' + this.a)
}
})
// "a is: 1"
thisは vm インスタンスを指します。
ただし、プロパティやコールバックでアロー関数を使用しないでください。
created: () => console.log(this.a)のように、アロー関数はthisの概念を持たず、thisを変数として上位スコープを常に探し続けるため、しばしばUncaught TypeError: Cannot read property of undefinedやUncaught TypeError: this.myMethod is not a functionのようなエラーが発生します。
二、テンプレート構文#
1. 挿入#
最も簡単なのは
<div id="app">{{message}}</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: 'hello,world'
}
})
</script>
。。。
次のコードはinputにdisabled属性をバインドしていますが、okの真偽値によって属性がレンダリングされるかどうかを制御します。
okがfalse、null、undefinedの値の場合、属性はレンダリングされず、v-ifに似ていますが、この書き方は属性にのみ適用されます。
<div id="app">
<input type="text" v-bind:disabled="ok">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'hello,wolrd',
ok: false
}
})
</script>
テンプレート構文では JavaScript 式も使用できます。
<div id="app">
<div>{{number + 1}}</div>
<div v-bind:id="'list-' + id"></div>
<div>{{message.split('').reverse().join('')}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
number: 2,
id: 'li',
message: 'hello,wolrd'
}
})
</script>
各テンプレートには 1 つの JavaScript 式しか含めることができません。複数ある場合は効果がありません。
<!-- これは文であり、式ではありません -->
{{ var a = 1 }}
<!-- 制御フローも効果がありません。三項演算子を使用してください -->
{{ if (ok) { return message } }}
2. ディレクティブ#
パラメータ
いくつかのディレクティブは「パラメータ」を受け取ることができ、ディレクティブ名の後にコロンで示されます。例えば、v-bindディレクティブは HTML 属性をリアクティブに更新するために使用できます：
<div id="app">
<a v-bind:href="url">百度</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
url: 'https://www.baidu.com'
}
})
</script>
ここでhrefはパラメータであり、v-bindディレクティブがその要素のhref属性を式urlの値にバインドすることを示します。
別の例は、v-onディレクティブで、DOM イベントをリッスンするために使用されます。
<a v-on:click="doSomething">...</a>
動的パラメータ
2.6.0 以降、角括弧で囲まれた JavaScript 式をディレクティブのパラメータとして使用できます。
<!--注意、パラメータ式の書き方にはいくつかの制約があります。後の「動的パラメータ式の制約」セクションで説明します。-->
<a v-bind:[attributeName]="url">...</a>
ここでのattributeNameは JavaScript 式として動的に評価され、最終的な結果がパラメータとして使用されます。
例えば、vue インスタンスにattributeNameプロパティがあり、その値がhrefである場合、このバインディングはv-bind:hrefと等価になります。
<a v-bind:href="url">...</a>
動的なイベント名を使用してリッスン関数をバインドすることもできます。
<a v-on:[eventName]="doSomething"> ... </a>
もしeventNameの値がclickであれば、このバインディングはv-on:click="doSomething"、つまりマウスクリックイベントと等価になります。
動的パラメータの値の制約
動的パラメータは文字列を返すことが期待され、異常な場合は値がnullになります。この特殊なnull値は明示的にバインディングを削除するために使用できます。他の非文字列型の値は警告を引き起こします。
動的パラメータ式の制約
動的パラメータ式にはいくつかの構文制約があります。空白や引用符などの特定の文字は HTML 属性名に無効です。例えば：
<!-- これはコンパイル警告を引き起こします -->
<a v-bind:['foo' + bar]="value"> ... </a>
したがって、空白や引用符を含む式を使用しないようにし、または計算プロパティを使用してこのような複雑な式を置き換えることをお勧めします。
DOM でテンプレートを使用する場合（HTML ファイル内でテンプレートを直接記述する場合）、キー名に大文字を使用しないようにする必要があります。なぜなら、ブラウザは属性名をすべて小文字に強制的に変換するからです。
修飾子
修飾子は.で示される特殊なサフィックスで、ディレクティブが特別な方法でバインドされるべきことを示します。例えば、.prevent修飾子はv-onディレクティブに対して、トリガーされたイベントにevent.preventDefault()を呼び出すことを指示します。
<form v-on:submit.prevent="onSubmit">...</form>
3. 省略形#
v-プレフィックスは、テンプレート内で Vue 特有の属性を識別するための視覚的なヒントとして使用されます。Vue.js を使用して既存のタグに動的な動作を追加する際に、v-プレフィックスは非常に便利ですが、頻繁に使用されるディレクティブに対しては使用が煩雑に感じることがあります。また、Vue がすべてのテンプレートを管理するシングルページアプリケーション（SPA）を構築する際には、v-プレフィックスはそれほど重要ではなくなります。したがって、Vue はv-bindとv-onという最も一般的なディレクティブに特定の省略形を提供しています。
v-bind
<!-- 完全な構文 -->
<a v-bind:href="url">...</a>
<!-- 省略形 -->
<a :href="url">...</a>
<!-- 動的パラメータの省略形 (2.6.0+) -->
<a :[key]="url"> ... </a>
v-on
<!-- 完全な構文 -->
<a v-on:click="doSomething">...</a>
<!-- 省略形 -->
<a @click="doSomething">...</a>
<!-- 動的パラメータの省略形 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
これらは普通の HTML とは少し異なって見えるかもしれませんが、:と@は属性名に対して合法的な文字であり、すべての Vue をサポートするブラウザで正しく解析されます。また、最終的にレンダリングされるマークアップには表示されません。省略形の構文は完全にオプションですが、それらの機能をより深く理解するにつれて、それらを持っていることを感謝するでしょう。