CDN导入Vue时如何获取HTML元素？

Question

我在我的项目中使用的是Vue 3.0.2，通过CDN加载如下：

<head>
 ...
  <script src="https://unpkg.com/vue@3.0.2"></script>
</head>

如何在通过 CDN 导入库时访问 Vue 组件中的 HTML 元素？我想在普通 JS 中做 document.getElementById('element') 的等价物。

此处的相关帖子建议调用 $this.el.querySelector 应该可以解决此问题，但我无权访问该功能。我怀疑是由于通过 CDN 导入 Vue？

我的组件如下所示...

const app = Vue.createApp({
        data() {
            return {
                // data members.
            }
        },
        methods: {
            // method definitions.
        } });

app.mount('#app')

感谢任何建议！

Answer 1

尝试这样的事情

  <script src="https://unpkg.com/vue@3.0.2"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ data }}</h1>
      <input type="text" ref="input">
      <button @click="log">LOG</button>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            data: 'any'
          }
        },
        methods: {
          log() {
            console.log(this.$refs.input.value)
          }
        }
      });

      app.mount('#app')
    </script>

CDN导入Vue时如何获取HTML元素？

How can I get HTML element when importing Vue via CDN?

javascript

cdn

vue.js

vuejs3