0%

Programmingプログラミングナレッジ

Posted:2019.03.25

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

以前にもこちらの記事「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 インスタンス

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】