今回は Vue.js の書き方のテンプレートを紹介していきます。
そもそも Vue.js とはなんぞや？という方や、Vue.js の導入方法がわからないという方はこちら(^^)
参考書
テンプレート
すでにjavascriptを習得されている方ならお分かりかと思いますが、
new Vue()でインスタンスを生成し、その引数にオブジェクトが入るという形をとります。
Vue.jsでは、あるまとまった機能を持つ単体のオブジェクトをコンポーネントと呼び、
アプリケーションを構成する一つ一つのパーツのようなイメージですね。
まず new Vue({ })でコンポーネントを生成することから始まります。
また、変数宣言は var ではなく let や const でも可能であり、変数名も別のものでも問題ありません。
ここでは公式ドキュメントに合わせています。
では、そのオブジェクトが持つプロパティを見てみましょう。
Vueコンポーネントが持てる主なプロパティ
| プロパティ名 | 役割 |
|---|---|
| el | コンポーネントのインスタンスを結びつけるHTML要素を定義 |
| data | データを定義 |
| methods | メソッドを定義 |
| filters | フィルターを定義 |
| computed | 算出プロパティを定義 |
| watch | ウォッチャを定義 |
| ※８つのフック名 | ライフサイクルフックを定義 |
これらのプロパティを特にオプションと呼び、具体的な書き方は次のようになります。
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 オプションの解説までとします。
ご覧いただきありがとうございました(^^)
続きはこちら↓
参考書
コメント