Простое понимание элементов el, template и replace в Vue

Этот пример подробно объясняет элементы el, template, replace в Vue, предоставляя для вас материал для参考, подробности см. ниже

api: http://cn.vuejs.org/api/#el

el

Тип: String | HTMLElement | Function

Ограничение: может быть только функцией в определении компонента.

Подробности:

Предоставляет элемент для экземпляра. Значением может быть CSS селектор, реальный HTML элемент или функция, возвращающая HTML элемент. Обратите внимание, что элемент используется только в качестве точки подключения. Если предоставлен шаблон, элемент будет заменен, если только опция replace установлена в false. Элемент можно получить через vm.$el.

При использовании в Vue.extend должна быть функцией, чтобы все экземпляры не делили элементы.

Если опция установлена при инициализации, экземпляр немедленно начнет процесс компиляции. В противном случае, необходимо вызвать vm.$mount(), чтобы вручную начать компиляцию.

template

Тип: String

Подробности:

Пример шаблона. По умолчанию шаблон заменяет掛載 элемент. Если опция replace установлена в false, шаблон будет вставлен в элемент掛載. В обоих случаях содержимое элемента掛荷载 будет ignorироваться, если только шаблон не содержит slot для分发 контента.

Если значение начинается с #, то оно используется в качестве символа опции, и будет использоваться innerHTML соответствующего элемента в качестве шаблона. Часто используется <script type="x-template"> для включения шаблона.

В некоторых случаях, например, если шаблон содержит несколько верхних элементов или содержит только обычный текст, экземпляр становится фрагментным экземпляром, управляющим несколькими узлами, а не одним узлом. Ненормативные инструкции на элементе фрагментного экземпляра игнорируются.

replace

Тип: Boolean

Значение по умолчанию: true

Ограничение: может использоваться только с опцией template

Подробности:

Решить, использовать ли шаблон для замены элемента挂载. Если установлено в true (по умолчанию), шаблон будет заменять элемент挂mount, и объединять атрибуты элемента挂mount и корневого узла шаблона. Если установлено в false, шаблон будет заменять содержимое элемента挂mount, но не заменять сам элемент挂mount.

Пример:

<div id="replace" class="foo"></div>

new Vue({
 el: '#replace',
 template: '<p class="bar">заменен</p>'
)

Результат:

<p class="foo bar" id="replace">заменен</p>

replace установлено в false:

<div id="insert" class="foo"></div>

new Vue({
 el: '#insert',
 replace: false,
 template: '<p class="bar">вставлен</p>'
)

Результат:

<div id="insert" class="foo">
 <p class="bar">вставлен</p>
</div>

Вот и все, что есть в этой статье, надеюсь, это поможет вам в изучении, и希望大家 будут активно поддерживать учебное руководство.