【Vue.js 入門】Vue.js の大まかな構造

Vue.js

今回は Vue.js の書き方のテンプレートを紹介していきます。

そもそも Vue.js とはなんぞや?という方や、Vue.js の導入方法がわからないという方はこちら(^^)



参考書

【『Vue.jsのツボとコツがゼッタイにわかる本』レビュー】最初のVue.js参考書はこれ!!
Vue.jsとは、JavaScriptのフレームワークのひとつですね。本書は、ある程度JavaScriptを習得された方が、Vue.jsの勉強を始めるにあたって最初の一冊におすすめです!Vue.jsのツボとコツがゼッタイにわかる本...

テンプレート

var app = new Vue({オブジェクト});

すでに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 オプションの解説までとします。

ご覧いただきありがとうございました(^^)
続きはこちら↓




参考書

【『Vue.jsのツボとコツがゼッタイにわかる本』レビュー】最初のVue.js参考書はこれ!!
Vue.jsとは、JavaScriptのフレームワークのひとつですね。本書は、ある程度JavaScriptを習得された方が、Vue.jsの勉強を始めるにあたって最初の一冊におすすめです!Vue.jsのツボとコツがゼッタイにわかる本...

コメント

コンタクトフォーム

    タイトルとURLをコピーしました