Vuejs：如何使用webpack模板操作元素？

Question

我真的不知道该怎么做。我发誓我经常研究

此代码返回null

Answer 1

该元素在该阶段不会存在，因为它尚未安装，需要在挂载的钩子内完成：

<template>
  <canvas id="canvas-basic"></canvas>
</template>

<script type="text/javascript">
  export default{
    mounted(){
       console.log(document.getElementById('canvas-basic'));
    }
  }
</script>

请参阅：请参阅：https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

这里是JSFiddle：https://jsfiddle.net/ksg7vyyq/

您还可以使用ref：

<template>
  <canvas ref="canvasBasic"></canvas>
</template>

<script type="text/javascript">
  export default{
    mounted(){
       console.log(this.$refs.canvasBasic);
    }
  }
</script>

这里是JSFiddle：https://jsfiddle.net/gkc5c1ph/

此外，您似乎是在Vue对象之外编写代码，请确保查看文档以了解如何正确格式化代码。