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

PHPz

Release： 2020-09-25 18:07:30

forward

2521 people have browsed it

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

Vue.component('my-checkbox', { template: ` < div class = "checkbox-wrapper"@click = "check" > 

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; } } });

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; } } });

 
 
 
{{ title }}
 
 

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 ] ) ] ); } });

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 
 
 
{ this.title }
 
 } });

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.

Which one is best?

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!