Several ways to define component templates in Vue

Front-end component development has become a common topic. Componentization has brought qualitative improvements to our development efficiency and maintenance costs.

Of course, because the current system is becoming more and more complex, development and maintenance costs have become issues that must be considered, and thus the current three front-end frameworks, Vue, Angular, and React, have been bred.

So today we will take a look at what ways to define component templates in Vue and some differences between them.

String form

Vue is the simplest and most direct way to define component templates, but the way is very unfriendly to write, just like we used to splice HTML elements, which is very painful, so we don't use them often.

("my-button", {
 data: function () {
 return {
  label: "If you are brothers, come and chop me up"
 }
 },
 template: "<button>{{label}}</button>"
});

Template literal

The template literal ES6 syntax, unlike strings, we can write multiple lines, which has great advantages over simple strings and has better experience, but there may be problems with browser compatibility and need to be translated into ES5 syntax.

("my-content", {
 data: function () {
 return {
  label: "If you are brothers, come and chop me up",
  content: "Knife Critical Strike"
 }
 },
 template: `
 <div>
  <button>{{ label }}</button>
  <span>{{ content }}</span>
 </div>
 `
});

Inline-template

The "X-template" template definition method is called a replacement for template definition. It defines the content inside the component label element instead of being distributed as slot content. The method is more flexible, but it separates the template of our component from other attributes.

<my-label inline-template>
 <span>{{label}}</span>
</my-label>
('my-label', {
 data: function () {
 return {
  label: "Get on the bus now, brother die"
 }
 }
})

X-template

Define a <script> tag, tagtext/x-template Type, link via id.

<script type="text/x-template" >
 <span>{{label}}</span>
</script>
('my-label', {
 template: "#label-template",
 data: function () {
 return {
  label: "Get on the bus now, brother die"
 }
 }
})

Rendering functions

Rendering functions require complete programming capabilities of JavaScript and are closer to compilation than templates, but we need to be very familiar with Vue's instance properties and will be more abstract. picture v-if v-for Directives can be easily implemented using JavaScript syntax.

('my-label', {
 data: function () {
 return {
  items: ['Give it a gift if you come!  ', 'Give it a gift if you come!  ', 'Give it a gift if you come!  ']
 }
 },
 render: function (createElement) {
 if () {
  return createElement('ul', (function (item) {
  return createElement('li', item)
  }))
 } else {
  return createElement('p', 'Event ended')
 }
 }
})

JSX

Compared to the abstraction of rendering functions, JSX is easier and is more friendly to students who are familiar with React.

('my-label', {
 data: function () {
 return {
  label: ["Event ends"]
 }
 },
 render(){
 return <div>{}</div>
 }
})

Single file component

Using the build tool cli to create a project, a single file component should be the best way to define components without causing additional learning costs of template syntax.

<template>
 <div>
 <ul>
  <li v-for="(item, index) in items" :key="index">{{item}}</li>
 </ul>
 </div>
</template>
<script>
export default {
 data() {
 return {
  items: ["I cut", "I cut", "I cut"]
 };
 }
};
</script>

The above are several ways to define component templates in Vue. Some people may say, why do I know so much? Just one is enough. I want to say that brother knows more and more, which can help us make better choices under different conditions.

For example: you need to develop a simple page, you have to create a single file component and run the scaffolding, why bother? Are you right?

Summarize

The above are several ways in Vue that the editor introduces to you that you can define component templates. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!