javascript - 如何检查特定元素的 DOM 并创建新的 Vue 实例？

Question

我正在尝试寻找一种方法来检查 DOM 中类名为“amp”的特定元素。如果匹配，那么我想创建一个新的 Vue 实例，并使用 HTML 中的数据属性作为 data()。我猜需要某种循环吗？

这可能吗？什么是正确的方法？

谢谢。

HTML 示例:

<div class="amp" id="vue" data-contentDeliveryUrl="www.urlexample.com" data-encodedQuery="=query234" data-cidItem="555-555-555"></div>

<div class="amp" id="vue" data-contentDeliveryUrl="www.urlexample.com" data-encodedQuery="=query123" data-cidItem="666-666-666"></div>

index.js

新实例的例子

new Vue({
 el: '#vue',
 data() {
    return {
        contentDeliveryUrl: contentDeliveryUrl,
        encodedQuery: encodedQuery,
        cidItem: cidItem
    }
 },
 render: h => h(Page)
})

Answer 1

你可以使用 document.querySelectorAll返回包含 amp 类的元素的 NodeList。然后，遍历该列表以创建 Vue 实例。

要设置 Vue 数据属性，您需要使用 spread operator连同 el.dataset . HTML 中的数据属性需要用连字符分隔，而不是使用驼峰式大小写。

(function() {
  document.querySelectorAll('.amp').forEach(el => {
    new Vue({
      el,

      data() {
        return {
          ...el.dataset,
        }
      },

      mounted() {
        console.log(this.$data)
        // this.contentDeliveryUrl
        // this.encodedQuery
        // this.cidItem
      },
    })
  })
})()

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="amp" id="vue" data-content-delivery-url="www.urlexample.com" data-encoded-query="=query234" data-cid-item="555-555-555"></div>

<div class="amp" id="vue" data-content-delivery-url="www.urlexample.com" data-encoded-query="=query123" data-cid-item="666-666-666"></div>