Vue.jsの「el」とは？ - JavaScript勉強会

Vue.jsの学習メモ。

jsstudy.hatenablog.com

Vue.jsの基本的なコードを見ると、「el」というプロパティーがあるけど、これって何なんだろう？と思いました。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

↑この「el: '#app'」という部分ですね。

本ではサラッと説明されていて、いまいちピンと来なかったので、他の説明を調べてみました。

マウントする要素

まずは本書の説明です。

(p.43)

オプションには使用するデータやメソッドを定義していきます。

var app = new Vue({
  // （コンポーネントの）オプションをここに書く
})

基本的なオプションの構成

// 基本的なオプション構成（使用するデータやメソッド）
var app = new Vue({

  // (1) mountする要素
  el: '#app',
  
  // (2) アプリケーションで使用するデータ
  data: {
    message: 'Vue.js'
  },
  
  // (3) 算出プロパティ
  computed: {
    computedMessage: function() {
      return this.message + '!'
    }
  },
  
  // (4) ライフサイクルフック
  created: {
    // 行ないたい処理
  },
  
  // (5) アプリケーションで使用するメソッド
  methods: {
    myMethod: function() {
      // 行いたい処理
    }
  }

})

こんな感じで、プロパティーやメソッドを詰め込んでいくんですね。

で、この「el」というプロパティーは何なのか？という話です。

(p.44)

el - マウントする要素

「el」はアプリケーションを紐付ける要素のセレクタです。

ソースコードで確認

「el」は「element」の省略形だろうと予想できるのですが、なぜ「el」という2文字で表記されているのか？が分かりませんでした。

（ある意味、どうでもいい些細なことだけど、ついつい知りたくなる性分ですｗ）

こういうときは、Vue.jsのソースコードで、どのように定義されているのか？を見ると調べられますね。

開発用の「vue.js」（バージョン2.5.17）のソースコードで、「var el =」という文字列を検索してみます。

f:id:jsstudy:20181003175401p:plain

Vue.jsは1万行超の長いコードでした。

isUnknownElementメソッドなど、9か所で定義されていていました。

チラッと眺めても、何だかよく分かりませんでしたが、要するに

「el」プロパティーで、Vueの表示をはめ込む場所＝HTML要素のセレクター（id）を定義してるんですね？

参考

他にも、検索して分かりやすい説明があったのでメモ。

Vue.jsをシンプルに理解しようその２

Vueインスタンス内のelというオプションについて確認しておきましょう。

elというオプションが指定した要素がVue.jsが作用を及ぼす範囲になります。

elはelementの略です。

Hypertext Candy | Vue.js入門 (1) el, data

el

'#app' のように、DOM要素を指し示すセレクタが指定されます。

このプロパティの値は、Vueアプリーケーションの範囲、Vueの管轄領域を表します。

<div id="app"> タグ内部がVueアプリケーションとして認識されるということです。

Vue.js初学者によるVue.jsのコトハジメ | creative tweet.

elやdataは、Vue.jsのAPIと呼ばれるもので、Vue.jsを扱う上での規格のようなものです。

用意されているAPIを使って、さまざまな処理を記述します。

new Vue({})の直下にあるものはAPIと思ってだいたい間違いないです。

自分的には「elはVueのAPI」という説明がしっくり来ました！

（参考）APIとは？

jsstudy.hatenablog.com

Vue.jsのAPI一覧

jp.vuejs.org

el

型: string | HTMLElement

制約: new 経由でインスタンス作成のみだけなので注意してください。

詳細:
既存の DOM 要素に Vue インスタンスを与えます。CSS セレクタの文字列、実際の HTML 要素をとることができます。

インスタンスがマウント後、解決された要素は vm.$el としてアクセス可能になります。

インスタンス化の際にオプションが有効ならば、そのインスタンスはただちにコンパイルの段階に入ります。さもなければ、ユーザーがコンパイルを始めるために手作業で明示的に vm.$mount() を呼ぶ必要があります。

与えられた要素は単にマウントするポイントとして機能します。Vue 1.x とは異なり、マウントされた要素は、全てのケースで Vue によって生成された DOM に置き換えられます。従って、ルートインスタンスを <html> または <body> にマウントすることは推奨されません。

render 関数または template オプションも存在しない場合、マウントしている DOM 要素にある HTML がテンプレートとして抽出されます。この場合、Vue のランタイムとコンパイラが同包された完全ビルドを使用する必要があります。