首页 web前端 Vue.js Vue.js中定义组件模板的几种方法介绍

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

Sep 25, 2020 pm 03:46 PM
vue.js

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: &#39;Check me&#39; }
	},
	methods: {
		check() { this.checked = !this.checked; }
	}
});
登录后复制

2、模板文字

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

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

Vue.component(&#39;my-checkbox&#39;, {
    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、X-Templates

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

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

Vue.component(&#39;my-checkbox&#39;, {
	template: &#39;#checkbox-template&#39;,
	data() {
		return { checked: false, title: &#39;Check me&#39; }
	},
	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(&#39;my-checkbox&#39;, {
	data() {
		return { checked: false, title: &#39;Check me&#39; }
	},
	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(&#39;my-checkbox&#39;, {
	data() {
		return { checked: false, title: &#39;Check me&#39; }
	},
	methods: {
		check() { this.checked = !this.checked; }
	},
	render(createElement) {
		return createElement(
			&#39;div&#39;,
		  	{
					attrs: {
						&#39;class&#39;: &#39;checkbox-wrapper&#39;
					},
					on: {
						click: this.check
					}
		  	},
		  	[
		    	createElement(
	      		&#39;div&#39;,
	      		{
	        		&#39;class&#39;: {
	        			checkbox: true,
	        			checked: this.checked
        			}
	      		}
		    	),
		    	createElement(
	      		&#39;div&#39;,
	      		{
	        		attrs: {
	          		&#39;class&#39;: &#39;title&#39;
	        		}
	      		},
	      		[ this.title ]
		    	)
		  	]
		);
	}
});
登录后复制

6、JSX

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

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

Vue.component(&#39;my-checkbox&#39;, {
	data() {
		return { checked: false, title: &#39;Check me&#39; }
	},
	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: &#39;Check me&#39; }
    },
    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视频教程精选

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

以上是Vue.js中定义组件模板的几种方法介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vue项目中借助vue-cropper做图片裁剪 vue项目中借助vue-cropper做图片裁剪 Oct 31, 2022 pm 07:16 PM

vue项目中怎么做图片裁剪?下面本篇文章给大家介绍一下怎么使用vue-cropper做图片裁剪,希望给大家有所帮助!

深入聊聊vue3中的reactive() 深入聊聊vue3中的reactive() Jan 06, 2023 pm 09:21 PM

前言:在vue3的开发中,reactive是提供实现响应式数据的方法。日常开发这个是使用频率很高的api。这篇文章笔者就来探索其内部运行机制。

实战:vscode中开发一个支持vue文件跳转到定义的插件 实战:vscode中开发一个支持vue文件跳转到定义的插件 Nov 16, 2022 pm 08:43 PM

vscode自身是支持vue文件组件跳转到定义的,但是支持的力度是非常弱的。我们在vue-cli的配置的下,可以写很多灵活的用法,这样可以提升我们的生产效率。但是正是这些灵活的写法,导致了vscode自身提供的功能无法支持跳转到文件定义。为了兼容这些灵活的写法,提高工作效率,所以写了一个vscode支持vue文件跳转到定义的插件。

图文详解如何在Vue项目中集成Ace代码编辑器 图文详解如何在Vue项目中集成Ace代码编辑器 Apr 24, 2023 am 10:52 AM

Ace 是一个用 JavaScript 编写的可嵌入代码编辑器。它与 Sublime、Vim 和 TextMate 等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和 JavaScript 应用程序中。Ace 被维护为Cloud9 IDE的主要编辑器 ,并且是 Mozilla Skywriter (Bespin) 项目的继承者。

探讨如何在Vue3中编写单元测试 探讨如何在Vue3中编写单元测试 Apr 25, 2023 pm 07:41 PM

当今前端开发中,Vue.js 已经成为了一个非常流行的框架。随着 Vue.js 的不断发展,单元测试变得越来越重要。今天,我们将探讨如何在 Vue.js 3 中编写单元测试,并提供一些最佳实践和常见的问题及解决方案。

vue中组件化和模块化有什么区别 vue中组件化和模块化有什么区别 Dec 15, 2022 pm 12:54 PM

组件化和模块化的区别:模块化是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个每个功能模块的职能一致。组件化是从UI界面的角度进行规划;前端的组件化,方便UI组件的重用。

浅析Vue3动态组件怎么进行异常处理 浅析Vue3动态组件怎么进行异常处理 Dec 02, 2022 pm 09:11 PM

Vue3动态组件怎么进行异常处理?下面本篇文章带大家聊聊Vue3 动态组件异常处理的方法,希望对大家有所帮助!

深入探讨vite是怎么解析.env文件的 深入探讨vite是怎么解析.env文件的 Jan 24, 2023 am 05:30 AM

使用vue框架开发前端项目时,我们部署的时候都会部署多套环境,往往开发、测试以及线上环境调用的接口域名都是不一样的。如何能做到区分呢?那就是使用环境变量和模式。

See all articles