Comprendere semplicemente i componenti el, template e replace in Vue

Questo articolo ha spiegato gli elementi el, template, replace in Vue, per riferimento, i contenuti specifici sono come segue

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

el

Tipo: String | HTMLElement | Function

Limitazione: Può essere solo una funzione nella definizione del componente.

Dettagli:

Fornisce un elemento di montaggio per l'istanza. Il valore può essere un selettore CSS, un elemento HTML reale, o una funzione che restituisce un elemento HTML. Nota che l'elemento viene utilizzato solo come punto di montaggio. Se viene fornito un modello, l'elemento viene sostituito, a meno che replace non sia false. L'elemento può essere accessibile tramite vm.$el.

Deve essere una funzione valore utilizzata in Vue.extend, in modo che tutte le istanze non condividano gli elementi.

Se viene specificata questa opzione durante l'inizializzazione, l'istanza entra immediatamente nel processo di compilazione. Altrimenti, è necessario chiamare vm.$mount(), per iniziare manualmente la compilazione.

template

Tipo: String

Dettagli:

Esempio di modello. Il modello di default sostituisce l'elemento montato. Se l'opzione replace è false, il modello viene inserito all'interno dell'elemento montato. In entrambi i casi, il contenuto dell'elemento montato viene ignorato, a meno che il modello non abbia uno slot di distribuzione di contenuto.

Se il valore inizia con #, viene utilizzato come simbolo di opzione, utilizzando l'innerHTML dell'elemento corrispondente come modello. Una tecnica comune è utilizzare <script type="x-template"> per contenere il modello.

Attenzione, in alcuni casi, come quando il template contiene più elementi di livello superiore o contiene solo testo normale, l'istanza diventa un'istanza di frammento, che gestisce più nodi invece di un singolo nodo. Le istruzioni non di controllo del flusso sull'elemento montato dell'istanza di frammento vengono ignorate.

replace

Tipo: Boolean

Valore predefinito: true

Limitazione: Può essere utilizzato solo con l'opzione template

Dettagli:

Decidere se utilizzare il template per sostituire l'elemento montato. Se impostato a true (questo è il valore predefinito), il template coprerà l'elemento montato e unirà gli attributi dell'elemento montato e del nodo radice del template. Se impostato a false, il template coprirà il contenuto dell'elemento montato, ma non sostituirà l'elemento montato stesso.

Esempio:

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

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

Risultato:

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

replace impostato a false:

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

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

Risultato:

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

Questo è tutto il contenuto dell'articolo, spero che sia utile per la vostra apprendimento, e vi prego di supportare Tutorial di urla.