使用类的Vue实例

Question

我是Vue的新手并且有一些问题.但我认为我正在运行的问题是我不知道如何解决它的问题:

<div class="foo">我的代码中有一些.我想<div>使用Vue实例与这些s进行交互.我有想法使用类似的东西:

var app = new Vue({
  el: 'div.foo',
  data: {
    message: 'bar'
  }
})

因此,所有div.foo元素都可以通过管理来实现app.但是,我怎样才能完全得到我正在使用的元素？

让我们说在JQuery中我们有这个......

$("div.foo").click(function() {
    console.log($(this));
})

代码将适用于每一个div.foo,但打印将只显示单击的元素.

Answer 1

您不能按照建议进行操作,但可以为匹配选择器的每个元素创建一个新的Vue.

每个人都会拥有自己的状态.

const vues = document.querySelectorAll(".app");
Array.prototype.forEach.call(vues, (el, index) => new Vue({el, data:{message: "hello " + index}}))

例子.

如果你想要一个共享状态,

const vues = document.querySelectorAll(".app");
const each = Array.prototype.forEach;
const data = {
  message: "hello world"
};
each.call(vues, (el, index) => new Vue({el, data}))

在这一点上你可以做类似的事情data.message = "new value",所有的Vues都会改变.

例2.

这只是我在玩耍.您可能建议只创建一个Vue并管理所有foos.