如何为Vue创建自定义样式特性。js组件

Question

我正在尝试使用Vue.js而不需要构建步骤。但是Vue没有样式属性。

所以我想在我的Vue组件实例上创建一个自定义的“style”属性，然后在创建或装载组件时将该属性的内容注入DOM。

问题是我不能理解。（我看了一下插件文档）。我需要创建某种插件，首先检查“style”属性是否存在，然后将其插入DOM。我也不想使用Vue。component（）函数，因为我想使用ES6导入和导出。下面是结果的样子：

// MyComponent.js
export default {
  template: `<div>My component</div>`,

  style: `
    .hello {
      background: #ccc;
    }
  `,
}

// App.js
import MyComponent from './MyComponent.js'

new Vue({
  el: '#app',

  components: {
    MyComponent
  }
})

创建MyComponent时，它应该获取“style”属性的值并像这样将其添加到DOM中。任何想法都将不胜感激。

$('body').append('<style>' + STYLE + '</style>')

下面是一个使用Vue的插件。component（）函数。但我不想使用组件函数。

https://github.com/NxtChg/pieces/tree/master/js/vue/vue-css

Answer 1

您可以使用v-bind:style或简称：style使用计算内联样式。它会将给定对象映射到正确的CSS样式。使用camelCase，即背景色而不是背景色。

如果你想要全局风格，你可以使用mountedlife-cycle钩子在头部插入一个风格标签。您应该在销毁中再次删除它。

编辑：我误解了你的帖子，更新了答案

var app = new Vue({
  el: '#app',
  data: {
    subject: 'World'
  },
  computed: {
    subjectStyle() {
      return {
        color: 'yellow',
        backgroundColor: 'rebeccapurple',
      };
    }
  },
  mounted() {
    const css = `
      body {
        background-color: #eee;
        font-family: 'Comic Sans MS', sans-serif;
      }
    `;
    this.styleTag = document.createElement('style');
    this.styleTag.appendChild(document.createTextNode(css));
    document.head.appendChild(this.styleTag);
  },
  destroyed() {
    this.styleTag.remove();
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  Hello, <span :style="subjectStyle">{{ subject }}</span>!
</div>