Vue.js 定义伟德1946手机版模板的七种方式

编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过伟德19463331开发的每一个技术干货。 点击链接查看最新伟德19463331内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。
特别声明,本文转载@茄子翻译@ANTHONYGORE的《7 Ways To Define A Component Template in Vue.js》一文,如需转载,烦请注明原文出处: 英文:https://vuejsdevelopers.com/2017/03/24/vue-js-component-templates 译文:https://laravel-china.org/articles/4382/seven-ways-to-define-a-component-template-by-vuejs
在 Vue 中定义一个伟德1946手机版模板,至少有七种不同的方式(或许还有其它我不知道的方式):
  • 字符串
  • 模板字面量
  • x-template
  • 内联模板
  • render 函数
  • JSF
  • 单文件伟德1946手机版
在这篇文章中,我将通过示例介绍每个选项,并探讨利弊。以便你知道在任何特定情况下最适合的是哪一种。

字符串

默认情况下,模板会被定义为一个字符串。我想我们的观点会达成一致:字符串中的模板是非常难以理解的。除了广泛的浏览器支持之外,这种方法没有太多用处。 Vue.component('my-checkbox', { template: '<div class="checkbox-wrapper" @click="check"><div :class="{ checkbox: true, checked: checked }"></div><div class="title"></div></div>', data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } } });

模板字面量

ES6 模板字面量允许你使用多行定义模板,这在常规 JavaScript 字符串中是不被允许的。此方式阅读体验更佳,并在许多现代浏览器中得到支持,不过安全起见你还是需要把代码转换成 ES5 。 这种方法并不完美,我发现大多数 IDE 仍然会通过语法高亮、tab 格式化、换行符等地方的问题折磨着你。 Vue.component('my-checkbox', { template: ` <div class="checkbox-wrapper" @click="check"> <div :class="{ checkbox: true, checked: checked }"></div> <div class="title"></div> </div> `, data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } } });

x-template

使用此方法,你的模板被定义在例如 index.html 文件中的 script 标签里。此 script 标签使用 text/x-template 标记,并由伟德1946手机版定义的 id 引用。 我喜欢这种方法,它允许你使用适当的 HTML 标记编写你的 HTML,不过不好的一面是,它把模板和伟德1946手机版定义的其它部分分离开来。 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"></div> </div> </script>

内联模板

通过在伟德1946手机版中添加 inline-template 属性,你可以向 Vue 指示内部内容是其模板,而不是将其视为分布式内容(参考 slot 它与 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"></div> </div> </my-checkbox>

render 函数

render 函数需要你将模板定义为 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 ] ) ] ); } });

JSX

Vue 中最有争议的模板选项是 JSX,一些开发者认为它丑陋、不直观,是对 Vue 精神的背叛。JSX 需要你先编译,因为它不能被浏览器运行。 不过,如果你需要完整的 JavaScript 语言功能,又不太适应 render 函数过于抽象的写法,那么 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> } });

单文件伟德1946手机版

只要你把构建工具设置的很舒服,单文件伟德1946手机版就是模板选项中的王者。它允许你写 HTML 标签定义伟德1946手机版,并且将所有伟德1946手机版定义保留在一个文件中。 尽管它也有一些劣势:需要预编译,某些 IDE 不支持 .vue 文件的语法高亮,不过其地位依然难以被撼动。 <template> <div class="checkbox-wrapper" @click="check"> <div :class="{ checkbox: true, checked: checked }"></div> <div class="title"></div> </div> </template> <script> export default { data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } } } </script> 你还可以通过引入 pug 之类的预处理器,来获得模板定义的更多可能性。

最好的是哪一个?

当然没有一个完美的方法,每一个都应该根据你的用例来判断。我认为最好的开发人员会注意到所有的可能性,并将它们作为 Vue.js 工具栏的一个工具。
返回顶部