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/
相关推荐:
更多编程相关知识,请访问:编程入门!!
以上是Vue.js中定义组件模板的几种方法介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

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

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

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

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

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

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

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