O Vue.js utiliza o Virtual Dom para renderizar os componentes, então se você precisa ter 10 cards numa pagina por exemplo, é mais prático criar apenas 1 componente card e renderizar eles 10x usando apenas um componente base. Na prática isso poupa trabalho para o programador, deixa o código mais limpo e legível e torna a sua manutenção mais simples e no final das contas realmente, se você olhar seu código html no navegador, você verá o código html dos cards 10 vezes, pois ele renderizou as 10x na view.
Vou dar um exemplo em código:
Isso é o seu componente "card":
<template>
<div class="card">
<h4 class="title">{{cardTitle}}</h4>
<img :src="cardImageUrl" />
<p class="text">
{{cardDescription}}
</p>
</div>
</template>
<script>
export default {
props: {
title: {
required: true,
type: String
},
description: {
required: true,
type: String
},
imgUrl: {
required: false,
type: String
}
},
data () {
return {
cardTitle: this.title,
cardDescription: this.description,
cardimgUrl: this.imgUrl
}
}
}
</script>
Com isso você tem um componente simples usando props, para utiliza-lo em outras páginas basta importa-lo dentro do e instanciar ele nos components, assim:
<script>
import card from '../sharedComponents/card';
export default {
components: {
'my-card' : card,
}
},
</script>
e para usar o mesmo, use
<my-card :title="titulo card 1" :description="descrição card 1" :imgUrl="https://imagens/15163"></my-card>
template
para criar um componente porque os exemplos são curtos. Em uma aplicação real é mais provável que você use Single File Components, mas também pode serem usados as propriedadestemplate
,el
erender
. A citação que você colocou na sua pergunta apenas diz que vai usar String Templates para que o código HTML fique mais legível, pois com string templates você pode quebrar linha sem problemas. Não tem nenhum grande mistério.