javascript - 没有 Vue 加载器的 Vue 2 组件样式

Question

考虑到只有一个文件组件(如 shown in the guide )，

<style>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

在非模块化的 ES5/ES6 环境中，如果没有 Vue 加载器，如何完成同样的事情？

考虑到样式是作用域的，

<style scoped>
.example {
  color: red;
}
</style>

有没有办法在非模块化环境中实现作用域 CSS？如果没有，有没有办法在模块化环境 (Webpack) 中实现它，但没有 Vue 加载器和自定义 .vue 格式？

Answer 1

无需在 Vue 组件中使用 template 实例，您可以利用 render 函数 来利用“更接近编译器的替代方案”，而无需Vue 加载器或编译器。您可以使用 createElement 函数中的第二个参数添加任何其他属性，这会给您带来很大的灵 active ，而不仅仅是样式。

有关更多信息和数据对象中允许的完整选项，请参阅指南中的渲染函数部分:

https://v2.vuejs.org/v2/guide/render-function

https://v2.vuejs.org/v2/guide/render-function#The-Data-Object-In-Depth

注意:这里需要注意的是，该样式将仅应用于声明它的组件，因此它可能无法像 CSS 那样跨同一类的多个组件使用。不确定这是否也是您想要实现的目标。

文档中的一个示例迎合了这个用例:

Vue.component('example', {
    // render function as alternative to 'template'
    render: function (createElement) {
        return createElement(
            // {String | Object | Function}
            // An HTML tag name, component options, or function
            // returning one of these. Required.
            'h2',
            // {Object}
            // A data object corresponding to the attributes
            // you would use in a template. Optional.
            {
                style: {
                    color: 'red',
                    fontSize: '28px',
                },
                domProps: {
                    innerHTML: 'My Example Header'
                }
            },
            // {String | Array}
            // Children VNodes. Optional.
            []
    )}
});

var example = new Vue({
    el: '#yourExampleId'
});