[英]Transform DOM Elements into Vue.js Components
I am using a d3.js plugin to create a complex visualization in my Vue.js application. 我正在使用d3.js插件在Vue.js应用程序中创建复杂的可视化效果。 I would like to apply a custom vue directive to the elements that were added by the d3 plugin.
我想对d3插件添加的元素应用自定义vue指令。
It looks like the $compile functionality that was deprecated in vue2 is what I am looking for. 看起来vue2中不推荐使用的$ compile功能正是我想要的。
How can I dynamically change the elements in the dom to vue components? 如何动态地将dom中的元素更改为vue组件?
It seems that the property you are looking for is $mounted
. 您正在寻找的属性似乎是
$mounted
。 Provide a funtion to the key mounted
, then you can instantiate the d3 visualization. 为
mounted
的键提供功能,然后可以实例化d3可视化。
This is a good set of example 这是一个很好的例子
The basics of $mounted
from the above link: 通过上面的链接获得
$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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.