Javascript Vue：如何将属性动态绑定到新的DOM元素

例如，我有一个具有以下模板的组件：

<div id="root"></div>

我认为新生元素的绑定将不起作用，因为Vue对这个新元素及其绑定一无所知

但是，也许有一些方法可以实现所需的逻辑

---

PS我知道Vue的本质是处理数据，而不是DOM，但我必须处理这种情况。

您可以先绑定没有值的样式

data() {
   return {
      styles: { a1: '' }
   };
}

然后，您可以通过普通JS从事件向其中添加数据。（这里甚至不需要JQuery）

编辑：我搞错了。似乎Vue在安装后不会检测到新添加的元素。因此，您可以在添加附加元素后装载Vue实例，或者使用

forceUpdate

重新渲染整个实例。（后者将重新呈现整个实例，因此为了提高性能，我建议将其分解为多个Vue实例）

---

如果使用的是Vue组件，则不应操作DOM

• 您应该使用模板逻辑来实现这一点

• 将非Vue代码包装到它自己的Vue组件中

  Vue.component（'date-picker'{
  模板：“”，
  挂载：函数（）{
  $（this.$el）.datepicker（）；
  },
  beforeDestroy:function（）{
  $（this.$el）.datepicker（'hide'）.datepicker（'destroy'）；
  }
  });
  

• 使用一个

  Vue.directive（'demo'{
  绑定：函数（）{
  css（{color:'#fff'，backgroundColor:this.arg}）；
  },
  更新：函数（值）{
  $（this.el）.html(
  '参数-'+this.arg+'！
  '+
  “键-”+this.key+”
  '+
  “价值-”+价值）；
  }
  });
  

---

谢谢，但不幸的是，你的回答不是我要问的。我的问题是如何创建新元素，将其添加到DOM（或以某种方式绑定其他元素）并将一些数据绑定到它—所有这些都是通过编程实现的。样式对象只是一个例子。啊，搞错了。很抱歉是的，你可以！您只需在附加实例后重新装载实例，因为Vue不会检测到它们。^这里有更多信息！等等，链接错了。一分钟的更新。希望这是你想要的答案，这不是我想要的，但是我会考虑这个特性（更新整个实例）。或者你可以制作多个VUE实例，只更新被追加的实例，这样它就不会重新渲染整个页面^ ^。我不想使用DOM操作，但是问题是模板是动态加载的。（它可以是任何东西），其次，我必须添加新元素。请告诉我如何避免在这种情况下操纵DOM。在这种情况下，您应该使用字符串模板，编译后的模板将不起作用。或者，如果必须，您可以使用

v-html

添加更多html，但无法向其添加指令。您可以添加有关使用字符串模板的更多信息吗elp？我不能使用任何模板逻辑，因为在我的例子中，模板可以是任何东西。另一件事是，我必须在安装和呈现模板后添加新元素。如果我事先不知道新元素是什么，我看不出自定义指令会有什么帮助。

data() {
   return {
      styles: { a1: {color: 'red'} }
   };
}

data() {
   return {
      styles: { a1: '' }
   };
}

methods: {
   quack() {
        this.styles.a1 = { color: red }
    }
}