今回は Vue.js の書き方のテンプレートを紹介していきます。
そもそも Vue.js とはなんぞや?という方や、Vue.js の導入方法がわからないという方はこちら(^^)
参考書

テンプレート
すでにjavascriptを習得されている方ならお分かりかと思いますが、
new Vue()でインスタンスを生成し、その引数にオブジェクトが入るという形をとります。
Vue.jsでは、あるまとまった機能を持つ単体のオブジェクトをコンポーネントと呼び、
アプリケーションを構成する一つ一つのパーツのようなイメージですね。
まず new Vue({ })でコンポーネントを生成することから始まります。
また、変数宣言は var ではなく let や const でも可能であり、変数名も別のものでも問題ありません。
ここでは公式ドキュメントに合わせています。
では、そのオブジェクトが持つプロパティを見てみましょう。
Vueコンポーネントが持てる主なプロパティ
プロパティ名 | 役割 |
---|---|
el | コンポーネントのインスタンスを結びつけるHTML要素を定義 |
data | データを定義 |
methods | メソッドを定義 |
filters | フィルターを定義 |
computed | 算出プロパティを定義 |
watch | ウォッチャを定義 |
※8つのフック名 | ライフサイクルフックを定義 |
これらのプロパティを特にオプションと呼び、具体的な書き方は次のようになります。
var app = new Vue({
el: 'インスタンスを結びつけるHTML要素',
data: {
//コンポーネントが持つデータを定義
},
methods: {
//コンポーネントが持つメソッドを定義
},
filters: {
//コンポーネントが持つフィルターを定義
},
computed: {
//コンポーネントが持つ算出プロパティを定義
},
watch: {
//コンポーネントが持つウォッチャを定義
}
});
それぞれのオプションの値がオブジェクトになっているので(el 以外)
その中にまた「プロパティ名: プロパティ値」という形で記述していくことになるわけですね。
今回は el, data, methods オプションを確認していきます。
el オプション
このオプションには、どのHTML要素と結びつけるかを定義します。
これはCSSセレクタか、HTML要素を返す関数で指定ができます。
<div id="app"></div>
var app = new Vue({
el: '#app'
});
もしくは
var app = new Vue({
el: document.querySelector('#app')
});
このように書くことで、まず対象のHTML要素を指定します。
data オプション
このオプションには、コンポーネントに保持するデータを定義します。
<div id="app"></div>
var app = new Vue({
el: '#app',
data: {
lastName: '山田',
firstName: '太郎'
}
});
console.log(app.lastName + app.firstName);
//コンソールに'山田太郎'と出力
methods オプション
このオプションには、メソッド(関数)を定義します。
複数定義することができるので、methods となっていることに注意してください。
<div id="app"></div>
var app = new Vue({
el: '#app',
data: {
lastName: '山田',
firstName: '太郎'
},
methods: {
fullName: function() {
return this.lastName + this.firstName;
}
}
});
console.log(app.fullName());
//コンソールに'山田太郎'と出力
この this はインスタンスを指しているので、その中で定義されているプロパティを参照することができます。
今回は el, data, methods オプションの解説までとします。
ご覧いただきありがとうございました(^^)
続きはこちら↓
参考書

コメント