在Vue.js中定义组件模板的七种方式

vue 至少有7种定义组件模板的方法:

• 字符串
• 模板字面量
• X-Templates
• 内联模板
• 渲染方法(Render)
• JSX
• 单文件组件

字符串

默认是在js文件中定义成字符串的形式. 我想我们都会同意在字符串中定义模板是很难以理解的.除了为了更广泛的浏览器支持, 这种方法没多大用处.

    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-Templates

通过这种方法, 你的模板被定义在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>

内联模板

通过给组件添加inline-template属性, 你向vue表明, 组件的内容是它的模板, 而不
是把它作为分布式内容(参考 插槽slot)

这和x-template面临一样的问题, 但是优点是html模板内容是在正确的地方, 所以可以在页面加载时渲染而不是等待js执行.

    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. 一些开发者认为JSX是丑陋, 不直观, 而且是对Vue精神的背叛.

因为JSX对浏览器不可读, 所以首先需要你编译. 但是, 如果你需要使用渲染(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>

在使用了像带SFCS的Pug之类的模板预处理器之后, 你可能会说, 还有更多定义模板的方式.

哪一个是最好的?

当然都不是最完美的方式, 需要看你的具体使用情况了. 我认为最好的开发人员会注意到所有的可能性,并将它们作当做vue的工具来使用.

翻译自: https://vuejsdevelopers.com/2017/03/24/vue-js-component-templates

补充

IE11不支持 data(){} 这种形式的定义, 改为如下方式即可:

data: function () {
            return { checked: false, title: 'Check me' }
        }