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

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。

在Vue中定义组件模板有很多选择。在我看来,至少有七种不同的方式:

字符串

模板文字

X-Templates

内联

渲染功能

JSX

单页组件

在本文中,我们将逐一介绍每种方法的示例,并讨论其优缺点,以便您了解在任何特定情况下使用哪种方法最好。

1、字符串

默认情况下,模板将被定义为JS文件中的字符串。我想我们都同意字符串中的模板是非常难以理解的。除了广泛的浏览器支持之外,这个方法没有什么特别之处。

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: 'Check me' }
	},
	methods: {
		check() { this.checked = !this.checked; }
	}
});

2、模板文字

ES6模板字面量(“backticks”)允许您跨多行定义模板,这是在常规Javascript字符串中无法做到的。虽然为了安全起见,您可能仍然应该转换为ES5,但现在许多新浏览器都支持这些命令,并且更容易阅读。

不过,这种方法并不完美;我发现大多数ide在语法高亮、制表符、换行等方面仍然让您感到痛苦。

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: 'Check me' }
	},
	methods: {
		check() { this.checked = !this.checked; }
	}
});/

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; }
	}
});
<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属性,您可以向Vue表明内部内容是其模板,而不是将其视为分布式内容。

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

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、渲染功能

呈现函数要求您将模板定义为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 <div class="checkbox-wrapper" onClick={ this.check }>
		         <div class={{ checkbox: true, checked: this.checked }}></div>
		         <div class="title">{ this.title }</div>
		       </div>
	}
});

7、单个文件组件

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

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

<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: 'Check me' }
    },
    methods: {
      check() { this.checked = !this.checked; }
    }
  }
</script>

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

哪个最好?

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

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

相关推荐:

2020年前端vue面试题大汇总(附答案)

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

更多编程相关知识,请访问:编程入门!!

更多关于云服务器域名注册虚拟主机的问题,请访问西部数码官网:www.west.cn

赞(0)
声明:本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-62778877-8306;邮箱:fanjiao@west.cn。本站原创内容未经允许不得转载,或转载时需注明出处:西部数码知识库 » Vue.js中定义组件模板的几种方法介绍

登录

找回密码

注册