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

Question

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

此代码return无效

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 对象之外编写代码，请务必查看文档以了解如何正确设置代码格式。

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

Vuejs: how to manipulate elements using webpack template?

javascript

webpack

vue.js

vue-loader