3

Eu li a documentação do Vue.JS e não entendi ao certo...

O exemplo acima (e alguns outros futuramente) usa Template strings para fazer templates de mais de uma linha mais legíveis.

Então toda vez que vou criar um componente vue tipo assim:

Vue.Component('nome-do-component', {

     template: 'Aqui vai todo meu html',

     data() {

         //...

     },

     props: ['title', 'content', 'font-search']

})

Então se eu tiver um html gigante vai tudo lá (no template), isso não acaba sujando o código?

3
  • 1
    Web Component e string templates em Vue são perguntas bem diferentes... sugiro separar. Em relação a string templates não é mais que usar multi linhas para o código ficar mais legível. Em vez de ter um template longo numa linha só.
    – Sergio
    12/07/2019 às 15:58
  • 2
    Parece que você está confundindo um pouco as coisas, a documentação usa a propriedade 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 propriedades template, el e render. 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. 12/07/2019 às 18:57
  • 1
    Com o Sérgio mencionou, recomendo apagar a parte "Outra dúvida" da sua pergunta... Outra dúvida é outra pergunta. 12/07/2019 às 18:58

1 Resposta 1

1

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>

Você deve fazer log-in para responder a esta pergunta.