Ownedmedia ウェブ制作に役立つコンテンツを発信中!

Vue.js 2019.03.25

Vueインスタンスで使うオプションと単一ファイルコンポーネントについて(オプション編)

Tags: ,,,
最終更新日:Update

以前にもこちらの記事「Vue.jsの導入と基本に触れてみる」にてVue.jsの導入や基本的な部分に触れていますが、Vue.jsを使っていく上で避けては通れない、Vueインスタンスと単一ファイルコンポーネントについて改めて学んでおきたいと思います。Vue.jsでアプリケーションを開発するときには必要となるケースがほとんどですね。

 

Vueインスタンスとは

Vue.jsの機能を使うには、まずVueインスタンスを作成する必要があります。Vueインスタンスで設定や処理を入れていくことで様々な機能を実装できるようになります。具体的には下記のように作成していきます。

const vm = new Vue ({
 // ここに各種オプションを記述する
})

 

new VueでVueインスタンスを定義できます。このVueインスタンスは変数に入れておくと便利です。変数名は自由に命名できるのですが、慣例としては「vm」(ViewModelの意味)や「app」などがよく使われるようです。この定義された中にオプションと呼ばれる、様々な設定や処理を入れていくことになります。

 

Vueインスタンスで使う主なオプション

作成したVueインスタンスには必要に応じて様々なオプションを設定していく形になります。かなりの数があるのですが最低限覚えておきたいものはしっかり理解しておく必要があります。今回はよく使うものを中心にまとめています。具体的にはVueインスタンス内で下記のようにオブションを構成していく形になります。

【javascript】

const vm = new Vue ({
 el: '#app',
 data: function() {
  message: 'hello world!!'
 },
 computed: {
  computedFunc: function() {
   return // computedオプションでの処理
 },
 created: function() {
  // createdのフックでの処理
 },
 mounted: function() {
  // mountedのフックでの処理
 },
 methods: {
  methodsFunc_01: function() {
   // アプリケーション内で使う処理
  },
  methodsFunc_02: function() {
   // アプリケーション内で使う処理
  }
 }
})

 

el: Vueインスタンスを紐づける要素を指定する
data: アプリケーション内で使う情報を登録する
computed: 算出プロパティと呼ばれ、関数によって値などのデータを返し、その値を扱う
created: Vueインスタンスが作成され、初期化が終わったタイミングで実行される処理を入れる
mounted: VueインスタンスやコンポーネントのDOM要素が作成されたタイミングで実行される処理を入れる
methods: Vueのアプリケーションとして使う関数などの処理を入れる

 

これ以外にも様々なオプションがありますが、よく使われる重要なポイントとなるのは上記項目になるのではないでしょうか。最低限これらは覚えておきたいですね。

 

このようにVue.jsを使うには、まずVueインタンスを作成し、その中でいろんなオプションを設定することにより、意図するアプリケーションの動きを実現していく形となります。

 


 

今回はVueインスタンスとそのオプションについてまとめていきましたが、次回記事では引き続き、Vueの単一ファイルコンポーネントについてまとめていきたいと思います。

 

(参考にさせて頂いたサイト)
Vue インスタンス

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?