Components in Spain

Asked

Viewed 296 times

3

I read the documentation of Vue.JS and did not understand exactly...

The above example (and some others in the future) uses Template strings to make templates of more than one line more readable.

So every time I’m gonna create a component:

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

     template: 'Aqui vai todo meu html',

     data() {

         //...

     },

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

})

So if I have a giant html goes all there (in the template), it doesn’t end up soiling the code?

javascript vue.js
  • 1

    Web Component and string templates in Vue are very different questions... I suggest separate. In relation to string templates it is no more than using multi lines for the code to be more readable. Instead of having a long single line template.

  • 2

    It seems that you are confusing things a little, the documentation uses the property template to create a component because the examples are short. In an actual application you are more likely to use Single File Components, but properties can also be used template, el and render. The quote you put in your question only says you’ll use String Templates so that the HTML code is more readable, because with string templates you can break line without problems. It has no big mystery.

  • 1

    With Sergio mentioned, I recommend deleting the "Other doubt" part of your question... Another question is another question.

1 answer

1

Vue.js uses Virtual Dom to render components, so if you need to have 10 cards on a page for example, it’s more practical to create only 1 card component and render them 10x using only one base component. In practice this saves the programmer trouble, makes the code cleaner and readable and makes its maintenance simpler and at the end of the accounts really, if you look at your html code in the browser, you will see the html code of the cards 10 times as it rendered the 10x in the view.

Let me give you an example in code:

This is your "card component":

  <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>

With this you have a simple component using props, to use it on other pages just import it into and instantiate it in the Components, thus:

<script>
  import card from '../sharedComponents/card';

  export default {
    components: {
     'my-card' : card,
    }
  },
</script>

and to use the same, use 

<my-card :title="titulo card 1" :description="descrição card 1" :imgUrl="https://imagens/15163"></my-card>

Browser other questions tagged javascript vue.js

You are not signed in. Login or sign up in order to post.