Vue.js中定义组件模板的几种方法介绍

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、X-Templates

使用此方法，您的模板将在index.html文件中的脚本标记中定义。脚本标记由文本/x-template标记，并由组件定义中的id引用。

我喜欢这种方法，它允许您用正确的HTML标记编写HTML，但缺点是它将模板与组件定义的其余部分分开。

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

4、内联模板

通过向组件添加inline-template属性，您可以向Vue表明内部内容是其模板，而不是将其视为分布式内容。

它的缺点与x-templates相同，但一个优点是内容在HTML模板中的正确位置，因此可以在页面加载时呈现，而不是等到Javascript运行时。

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

	

		

		
{{ title }}
	

5、渲染功能

呈现函数要求您将模板定义为Javascript对象。它们显然是模板选项中最冗长和抽象的。

但是，这样做的好处是模板更接近编译器，并且允许您访问完整的Javascript功能，而不是指令提供的子集。

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

Vue中最有争议的模板选项是JSX。一些开发人员认为JSX丑陋、不直观，是对Vue精神的背叛。

JSX要求您首先进行转换，因为浏览器无法读取它。但是，如果需要使用呈现函数，JSX肯定是定义模板的一种不那么抽象的方法。

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

		         

		         
{ this.title }
		       
	}
});

7、单个文件组件

只要您对在设置中使用构建工具感到满意，单个文件组件就是模板选项之王。它们带来了两方面的好处:允许您在编写标记的同时将所有组件定义保存在一个文件中。

它们需要换位，而且有些ide不支持这种文件类型的语法高亮显示，但在其他方面很难打败它们。

您可能会争辩说，有更多的模板定义的可能性，因为您可以使用模板预处理程序，如Pug与SFCs!

哪个最好？

当然没有一种完美的方式，每一种都应该根据你的用例来判断。我认为最好的开发人员会意识到所有可能性，并将每个开发人员作为他们的Vue.js工具带中的工具！

英文原文地址：https://vuejsdevelopers.com/2017/03/24/vue-js-component-templates/

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！
当前标题：Vue.js中定义组件模板的几种方法介绍
当前URL：http://dzwzjz.com/article/cgjsio.html