问题:Vuejs:如何使用 webpack 模板操作元素?

我真的不知道该怎么做。我发誓我研究了很多

此代码返回 null

解答

该元素在那个阶段不会存在,因为它尚未安装,它需要在安装的钩子内完成:

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

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

见:见:https://v2.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 对象之外编写代码,请确保您查看文档以了解如何正确格式化您的代码。