Introduction to several methods of defining component templates in Vue.js

Vue.js uses an HTML-based template syntax that allows developers to declaratively bind the DOM to the data of the underlying Vue instance. All Vue.js templates are legal HTML and can be parsed by browsers and HTML parsers that follow the specification.

There are many options for defining component templates in Vue. It seems to me that there are at least seven different ways:

• String

• Template Literal

• X-Templates

• Inline

• Rendering function

• JSX

• Single Page Component

In this article, we’ll go through examples of each approach and discuss their pros and cons so you know what to do in any particular Which method is best to use under the circumstances.

1. String

By default, the template will be defined as a string in the JS file. I think we can all agree that templates in strings are very difficult to understand. There's nothing special about this method other than broad browser support.

Vue.component('my-checkbox', {
	template: `<div class="checkbox-wrapper" @click="check">
	<div :class="{ checkbox: true, checked: checked }">
	</div><div class="title">{{ title }}</div></div>`,
	data() {
		return { checked: false, title: &#39;Check me&#39; }
	},
	methods: {
		check() { this.checked = !this.checked; }
	}
});

2. Template literals

ES6 template literals ("backticks") allow you to define templates across multiple lines. This This cannot be done in regular Javascript strings. While you should probably still convert to ES5 to be on the safe side, many new browsers now support these commands and are easier to read.

This approach isn't perfect, though; I've found that most IDEs still make you miserable with syntax highlighting, tabs, line breaks, etc.

Vue.component('my-checkbox', {
    template: ` < div class = "checkbox-wrapper"@click = "check" > 
    <div: class = "{ checkbox: true, checked: checked }" ></div>
							<div class="title">{{ title }}</div ></div>`,
	data() {
		return { checked: false, title: &#39;Check me&#39; }
	},
	methods: {
		check() { this.checked = !this.checked; }
	}
});/

3. Script tags are tagged with the text /x-template and referenced by id in the component definition. I like this approach, it allows you to write HTML with correct HTML markup, but the disadvantage is that it separates the template from the rest of the component definition.

Vue.component('my-checkbox', {
	template: '#checkbox-template',
	data() {
		return { checked: false, title: 'Check me' }
	},
	methods: {
		check() { this.checked = !this.checked; }
	}
});

<script type="text/x-template" id="checkbox-template">
	<div class="checkbox-wrapper" @click="check">
		<div :class="{ checkbox: true, checked: checked }"></div>
		<div class="title">{{ title }}</div>
	</div>
</script>

4. Inline template

By adding the inline-template attribute to the component, you can indicate to Vue that The internal content is its template, rather than thinking of it as distributed content.

It has the same disadvantages as x-templates, but one advantage is the correct placement of the content in the HTML template, so Can be rendered when the page loads instead of waiting until Javascript is run.

Vue.component('my-checkbox', {
	data() {
		return { checked: false, title: 'Check me' }
	},
	methods: {
		check() { this.checked = !this.checked; }
	}
});

<my-checkbox inline-template>
	<div class="checkbox-wrapper" @click="check">
		<div :class="{ checkbox: true, checked: checked }"></div>
		<div class="title">{{ title }}</div>
	</div>
</my-checkbox>

5. Rendering function

##Rendering function requirements You define templates as Javascript objects. They are clearly the most verbose and abstract of the template options.

However, the advantage of this is that the template is closer to the compiler and allows you to access the full Javascript functionality rather than the subset provided by the directive.

Vue.component('my-checkbox', {
	data() {
		return { checked: false, title: 'Check me' }
	},
	methods: {
		check() { this.checked = !this.checked; }
	},
	render(createElement) {
		return createElement(
			'div',
		  	{
					attrs: {
						'class': 'checkbox-wrapper'
					},
					on: {
						click: this.check
					}
		  	},
		  	[
		    	createElement(
	      		'div',
	      		{
	        		'class': {
	        			checkbox: true,
	        			checked: this.checked
        			}
	      		}
		    	),
		    	createElement(
	      		'div',
	      		{
	        		attrs: {
	          		'class': 'title'
	        		}
	      		},
	      		[ this.title ]
		    	)
		  	]
		);
	}
});

6. JSX

The most controversial template option in Vue is JSX. Some developers consider JSX ugly, unintuitive, and a betrayal of the spirit of Vue. JSX requires you to convert it first because the browser cannot read it. However, if you need to use rendering functions, JSX is certainly a less abstract way of defining templates.

Vue.component('my-checkbox', {
	data() {
		return { checked: false, title: 'Check me' }
	},
	methods: {
		check() { this.checked = !this.checked; }
	},
	render() {
		return <div class="checkbox-wrapper" onClick={ this.check }>
		         <div class={{ checkbox: true, checked: this.checked }}></div>
		         <div class="title">{ this.title }</div>
		       </div>
	}
});

7. Single File Components

As long as you are comfortable using the build tools in your setup, Single File Components are the king of template options . They bring the best of both worlds: allowing you to write markup while keeping all component definitions in a single file. They require transposition, and some IDEs don't support syntax highlighting for this file type, but otherwise it's hard to beat them.

<template>
  <div class="checkbox-wrapper" @click="check">
    <div :class="{ checkbox: true, checked: checked }"></div>
    <div class="title">{{ title }}</div>
  </div>
</template>
<script>
  export default {
    data() {
      return { checked: false, title: &#39;Check me&#39; }
    },
    methods: {
      check() { this.checked = !this.checked; }
    }
  }
</script>

You might argue that there are more template definition possibilities since you can use template preprocessors like Pug vs. SFCs!

Which one is best?

Of course there is no perfect way, and each should be judged based on your use case. I think the best developers realize all the possibilities and make each developer a tool in their Vue.js tool belt!

English original address: https://vuejsdevelopers.com/2017/03/24/vue-js-component-templates/

Related recommendations:

2020 Summary of front-end vue interview questions (with answers)

vue tutorial recommendation: the latest 5 vue.js video tutorials in 2020 Selected

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of Introduction to several methods of defining component templates in Vue.js. For more information, please follow other related articles on the PHP Chinese website!