Vue 定义组件模板的七种方式(一般用单文件组件更好)

在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式):

  • 字符串
  • 模板字面量
  • x-template
  • 内联模板
  • render 函数
  • JSF
  • 单文件组件

在这篇文章中,我将通过示例介绍每个选项,并探讨利弊。以便你知道在任何特定情况下最适合的是哪一种。

1. 字符串

默认情况下,模板会被定义为一个字符串。我想我们的观点会达成一致:字符串中的模板是非常难以理解的。除了广泛的浏览器支持之外,这种方法没有太多用处。

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; }
    }
});

2. 模板字面量

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; }
    }
});

3. x-template

使用此方法,你的模板被定义在例如 index.html 文件中的 script 标签里。此 script 标签使用 text/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"></div>
    </div>
</script>

4. 内联模板

通过在组件中添加 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>

5. 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 ]
                )
            ]
        );
    }
});

6. 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>
    }
});

单文件组件

只要你把构建工具设置的很舒服,单文件组件就是模板选项中的王者。它允许你写 HTML 标签定义组件,并且将所有组件定义保留在一个文件中。
尽管它也有一些劣势:需要预编译,某些 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 之类的预处理器,来获得模板定义的更多可能性。

原文地址:https://www.cnblogs.com/hanguidong/p/9381830.html

时间: 2024-11-03 22:50:39

Vue 定义组件模板的七种方式(一般用单文件组件更好)的相关文章

vue组件通信的几种方式

最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props,然后创建一个名为message的属性 child.png 3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值 App2.png 4.保存修改的文件,查看浏览器 browser.png 5.我们依然可以对m

Vue单文件组件基础模板

背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点,童鞋们可以在评论里帮我补充:因为有这么多优点,所以决定有必要将vue组件的常用配置项提炼出来,形成一个组件模板,方便日后项目开发复用 <template> <div> <h1>{{title}}</h1> <ChildComponents></

Vue路由传参的几种方式

原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613 前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式.具体区分和使用后续分析. 参考官网:https://router.vuejs.org/zh/guide/essentials/navigation.html params传参(url中显示参数)

基于VSCode的vue单文件组件模板设置---一次设置,可爽终生

第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 "Print to vue": { "prefix": "vue", "body": [ "<template>", "  <div></div>", &q

windows堆栈溢出利用的七种方式

文本由 www.169it.com 搜集整理 windows下的堆栈溢出攻击和unix下的,原理基本相同.但是,由于windows用户进程地址空间分配和堆栈处理有其独立的特点,导致了windows 环境下堆栈溢出攻击时,使用的堆栈溢出字符串,与unix下的,区别很大.另外,windows的版本也导致了windows下的exploit不具有通用性.windows版本不同,而exploit使用了很多动态链接库里面的库函数,其地址都是与dll的版本有关系的.不同的dll版本,里面的库函数的偏移地址就可

JavaScript 创建对象的七种方式

转自:xxxgitone.github.io/2017/06/10/JavaScript创建对象的七种方式/ JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产.接下来介绍七种非常经典的创建对象的方式,他们也各有优缺点. 工厂模式 1 function createPerson(name, job) { 2 var o = new Object() 3 o.name = name 4 o.job

详解Python拼接字符串的七种方式

忘了在哪看到一位编程大牛调侃,他说程序员每天就做两件事,其中之一就是处理字符串.相信不少同学会有同感. 几乎任何一种编程语言,都把字符串列为最基础和不可或缺的数据类型.而拼接字符串是必备的一种技能.今天,我跟大家一起来学习Python拼接字符串的七种方式. 1.来自C语言的%方式 print('%s %s' % ('Hello', 'world')) >>> Hello world %号格式化字符串的方式继承自古老的C语言,这在很多编程语言都有类似的实现.上例的%s是一个占位符,它仅代表

React组件通信的几种方式

需要组件之进行通信的几种情况? 父组件向子组件通信?? 子组件向父组件通信?? 跨级组件通信?? 没有嵌套关系组件之间的通信? 1. 父组件向子组件通信React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息?Child.jsximport?React?from?'react';import?PropTypes?from?'prop-types';export?default?function?Child({?name?})?{????return?

webpack入坑之旅(五)加载vue单文件组件

这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不是开始的开始 webpack入坑之旅(二)loader入门 webpack入坑之旅(三)webpack.config入门 webpack入坑之旅(四)扬帆起航 webpack入坑之旅(五)加载vue单文件组件 webpack入坑之旅(六)配合vue-router实现SPA 需要什么? 在经过前面的四