Vue.js 2のVue Instanceは、Vueアプリケーションの基本単位であり、DOMの一部を管理するために使われます。Vue Instanceを作成することで、Vueの機能を使ってデータバインディング、イベントハンドリング、コンポーネント管理などが行えるようになります。以下に、Vue Instanceの基本的な使い方とその主要な構成要素について解説します。
Vue Instanceの作成
Vue Instanceを作成するには、new Vueコンストラクタを使用します。通常は、Vueアプリケーションのルート要素にマウントします。
var vm = new Vue({
// オプションオブジェクト
el: '#app', // マウントする要素
data: {
message: 'Hello Vue!'
}
});主要なオプション
el
- マウントするDOM要素を指定します。CSSセレクタ文字列か、実際のHTML要素を指定します。
- 例:
el: '#app'
data
- Vue Instanceで管理するデータオブジェクトを定義します。このデータはバインディングを通じてテンプレートと連動します。
- 例:
data: { message: 'Hello Vue!' }
methods
- Vue Instanceで使用するメソッドを定義します。これらのメソッドはインスタンス内のイベントハンドラやその他の操作に使用されます。
- 例:
methods: {
greet: function() {
alert('Hello ' + this.message);
}
}computed
- 算出プロパティを定義します。これらは他のデータに依存するプロパティで、依存するデータが変更されると自動的に再計算されます。
- 例:
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('');
}
}watch
- 特定のデータプロパティを監視し、そのプロパティが変更されたときに実行する関数を定義します。
- 例:
watch: {
message: function(newVal, oldVal) {
console.log('message changed from', oldVal, 'to', newVal);
}
}created
- インスタンスが作成された後に呼び出されるライフサイクルフックです。この段階でデータの初期化やAPI呼び出しを行うことが一般的です。
- 例:
created: function() {
console.log('Vue instance created');
}データバインディング
Vue.jsでは、データバインディングを使ってデータとDOMをリンクさせることができます。以下は、その基本的な例です。
<div id="app">
<p>{{ message }}</p>
<button v-on:click="greet">Greet</button>
</div>上記のテンプレートでは、{{ message }}を使ってdataオブジェクトのmessageプロパティを表示し、v-on:clickディレクティブを使ってgreetメソッドをボタンのクリックイベントにバインドしています。
コンポーネント
Vue.jsでは、複雑なアプリケーションを構築するためにコンポーネントを使用します。コンポーネントは再利用可能なVueインスタンスで、他のコンポーネントやVueインスタンスに組み込むことができます。
Vue.component('my-component', {
template: '<div>A custom component!</div>'
});
new Vue({
el: '#app'
});これにより、<my-component>をテンプレート内で使用できるようになります。
以上がVue.js 2のVue Instanceの基本的な解説です。詳細な情報やさらなる機能については、公式ドキュメントを参照してください。
コメント