vue的自定义组件

<template>
  <div id="app">
    <div v-blue="color">vue3。0</div>
  </div>
</template>

<script>
import Vue from "vue";

Vue.directive("blues", function(el, binding) {
///  blues就是组件的名称
  // 把data中的color 通过binding来获得，同时el.style就是设置css属性
  el.style = "color:" + binding.value;
  el.style.width = "200px";
  el.style.height = "200px";
  el.style.background = "#000";
});

export default {
  data() {
    return {
      num: 123,

      color: "blue" //  获取这里的color
    };
  }
};
</script>

<style>
</style>