Vueインスタンスで使うオプションと単一ファイルコンポーネントについて(オプション編)
最終更新日: Update!!
以前にもこちらの記事「Vue.jsの導入と基本に触れてみる」にてVue.jsの導入や基本的な部分に触れていますが、Vue.jsを使っていく上で避けては通れない、Vueインスタンスと単一ファイルコンポーネントについて改めて学んでおきたいと思います。Vue.jsでアプリケーションを開発するときには必要となるケースがほとんどですね。
これ以外にも様々なオプションがありますが、よく使われる重要なポイントとなるのは上記項目になるのではないでしょうか。最低限これらは覚えておきたいですね。
このようにVue.jsを使うには、まずVueインタンスを作成し、その中でいろんなオプションを設定することにより、意図するアプリケーションの動きを実現していく形となります。
今回はVueインスタンスとそのオプションについてまとめていきましたが、次回記事では引き続き、Vueの単一ファイルコンポーネントについてまとめていきたいと思います。 (参考にさせて頂いたサイト) Vue インスタンス
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インスタンスとそのオプションについてまとめていきましたが、次回記事では引き続き、Vueの単一ファイルコンポーネントについてまとめていきたいと思います。 (参考にさせて頂いたサイト) Vue インスタンス
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories