javascript - 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 对象之外编写代码，请确保您查看文档以了解如何正确格式化您的代码。