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

Posted 2023-02-22

【中文标题】Vuejs：如何使用 webpack 模板操作元素？

【英文标题】：Vuejs: how to manipulate elements using webpack template?

【发布时间】：2018-04-05 11:45:40

【问题描述】：

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

这段代码返回null

【问题讨论】：

尽量不要在id中使用“-”，改用camelCase

【参考方案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 对象之外编写代码，请务必查看文档以了解如何正确格式化您的代码。

【讨论】：

感谢@craig_h 询问后几分钟才注意到，但不确定是否安装了正确的方法，所以谢谢

没问题。 mounted 是页面上所有元素都存在的点，如果您需要访问它们来初始化组件，那么您应该使用安装的钩子。您可以在 created 挂钩中初始化数据。老实说，你很少会使用其他 webhook，所以这两个是专注于学习的。