vuejs el の用途は何ですか?

vuejs では、el の機能は Vue インスタンスのマウントターゲットを指定することであり、インスタンスのマウント後に、ページ上に既に存在する DOM 要素を Vue インスタンスのマウントターゲットとして提供します。、要素は「vm.$el」を使用してアクセスできます。

vuejs el の用途は何ですか?

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

vue 公式 API ドキュメントでは、el に次の説明があります:

https://cn.vuejs.org/v2/api/#el

# Vue インスタンスのマウント先を指定するために使用される

##el の役割は誰もが知っています。上記の 2 つの赤い感嘆符の部分に注目します。要約すると:

レンダリング関数またはテンプレート属性がある場合、マウントされた要素は Vue によって生成された DOM に置き換えられます。それ以外の場合は、マウントされた要素が配置されている HTMLテンプレートを作成します

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="ppp"></div>
  </body>
</html>

例 1: render 関数によってレンダリングされた DOM を置き換えます0b56aebb5df5b06b70a352c6e82d051d94b3e26ee717c64999d7867364b1b4a3

new Vue({
  el: &#39;#ppp&#39;,
  router,
  store, 
  render: h => h(App)
})

例 2: 文字列テンプレートの置換0b56aebb5df5b06b70a352c6e82d051d94b3e26ee717c64999d7867364b1b4a3

new Vue({
  el: &#39;#ppp&#39;,
  router,
  components: { App },
  template: &#39;<App/>&#39;
})

例 3: 手動マウントレンダリングは存在しません関数とテンプレートの属性

new Vue({
  router,
  store,
}).$mount(&#39;#ppp&#39;)

関連記事