考虑到只有一个文件组件(如 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 格式?
最佳答案
无需在 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'
});
关于javascript - 没有 Vue 加载器的 Vue 2 组件样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42765262/