將DOM元素轉換為Vue.js組件

Question

我正在使用d3.js插件在Vue.js應用程序中創建復雜的可視化效果。 我想對d3插件添加的元素應用自定義vue指令。
看起來vue2中不推薦使用的$ compile功能正是我想要的。

如何動態地將dom中的元素更改為vue組件？

Answer 1

您正在尋找的屬性似乎是$mounted 。 為mounted的鍵提供功能，然后可以實例化d3可視化。

這是一個很好的例子

通過上面的鏈接獲得$mounted的基礎知識：

<template>
  <svg width="500" height="300"></svg>
</template>

<script>
const d3 = require('d3');
export default {
  mounted: function() {
    // this.#el - is the root element in <template>
    // in this case it is <svg> tag
    d3.select(this.$el)
      .append('circle')
      .attr('cx', '250')
      .attr('cy', '150')
      .attr('r', '100')
  }
}
</script>