Vue3 ESM CDN引入场景下v-bind绑定data-*属性失效问题排查

哦，我知道问题出在哪了！你把v-bind指令写在了Vue挂载的目标元素本身的属性上，而Vue只会编译这个元素内部的内容，不会处理元素自身的属性。

问题根源 #

看你的代码，你把v-bind:data-test="test"直接加在了<div id="idpartenaire">上——这个元素是你用.mount('#idpartenaire')指定的挂载目标。Vue在挂载时，会把这个元素的innerHTML当作模板来编译，但不会解析元素自身的属性，所以那个v-bind指令就原封不动地留在了DOM里，而内部的{{ id }}因为是innerHTML的一部分，所以被正常解析了。

修复方法 #

有两种简单的修复方式：

• 方法一：将绑定移到内部元素
  把v-bind:data-test放到挂载目标内部的元素上，这样Vue会正常编译这个指令：

  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    const idPartenaire = createApp({
      data() {
        return { id: 2222, test:"un_test" }
      }
    }).mount('#idpartenaire')
  </script>
  <div id="idpartenaire">
    <div :data-test="test">ID du partenaire : {{ id }}</div>
  </div>
  

  这里用了Vue的语法糖:data-test代替v-bind:data-test，两者效果完全一致。

• 方法二：使用template选项定义完整模板
  在Vue应用的配置中添加template选项，把包含绑定属性的完整元素写进去，Vue会编译整个模板并替换掉挂载目标：

  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    const idPartenaire = createApp({
      data() {
        return { id: 2222, test:"un_test" }
      },
      template: `<div id="idpartenaire" :data-test="test">ID du partenaire : {{ id }}</div>`
    }).mount('#idpartenaire')
  </script>
  <div id="idpartenaire"></div>
  

  注意此时挂载目标元素可以是空的，因为Vue会用template里的内容替换它。

内容的提问来源于stack exchange，提问作者philippedesmarez