Comprender simplemente los elementos el, template y replace en Vue

Este artículo analiza los elementos el, template y replace en Vue, proporcionando una referencia para el lector, los detalles específicos son los siguientes

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

el

Tipo: String | HTMLElement | Function

Restricción: Solo puede ser una función en la definición del componente.

Detalles:

Proporciona un elemento de montaje para la instancia. El valor puede ser un selector CSS, un elemento HTML real o una función que devuelve un elemento HTML. Nota: el elemento solo se utiliza como punto de montaje. Si se proporciona una plantilla, el elemento se reemplaza, a menos que replace sea false. El elemento se puede acceder mediante vm.$el.

Debe ser una función de valor en Vue.extend, de modo que todas las instancias no compartan elementos.

Si se especifica esta opción en la inicialización, la instancia entrará inmediatamente en el proceso de compilación. De lo contrario, se debe llamar a vm.$mount(), iniciando manualmente la compilación.

template

Tipo: String

Detalles:

Ejemplo de plantilla. La plantilla se reemplaza por defecto en el elemento montado. Si la opción replace es false, la plantilla se inserta dentro del elemento montado. En ambos casos, el contenido del elemento montado se ignora, a menos que la plantilla tenga un slot de distribución de contenido.

Si el valor comienza con #, se utiliza como símbolo de opción, utilizando el innerHTML del elemento coincidente como plantilla. Una técnica común es usar <script type="x-template"> Contiene plantilla.}}

Nota: en algunos casos, como cuando el plantilla contiene múltiples elementos de nivel superior o solo contiene texto común, la instancia se convertirá en una instancia de fragmento, administrando múltiples nodos en lugar de un nodo. Las instrucciones no de control de flujo en el elemento montado del fragmento de instancia se ignoran.

replace

Tipo: Boolean

Valor predeterminado: true

Restricción: solo se puede usar con la opción template

Detalles:

Decida si desea usar el plantilla para reemplazar el elemento montado. Si se establece en true (este es el valor predeterminado), la plantilla cubrirá el elemento montado y combinará los atributos del elemento montado y el nodo raíz de la plantilla. Si se establece en false, la plantilla cubrirá el contenido del elemento montado, pero no reemplazará el elemento montado mismo.

Ejemplo:

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

new Vue({
 el: '#replace',
 template: '<p class="bar">replaced</p>'
)

Resultado:

<p class="foo bar" id="replace">replaced</p>

replace establecido en false:

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

new Vue({
 el: '#insert',
 replace: false,
 template: '<p class="bar">inserted</p>'
)

Resultado:

<div id="insert" class="foo">
 <p class="bar">inserted</p>
</div>

Esto es todo el contenido de este artículo, espero que sea útil para su aprendizaje y que todos apoyen a la tutoría de grito.