Question

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

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

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}}))

Example

如果您想要共享状态，

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都会改变。

Example 2

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

Answer 2

此外，如果你想从你的js / ts文件中访问html，你可以使用vue的ref系统。

示例：

<template> 
<div ref="example">example</div>
</template>

example.js：

var myExampleDiv = this.$refs.example;

或者如果您使用打字稿

example.ts：

const myExampleDiv = this.$refs.example as HTMLElement;

有关此内容的更多信息： https://vuejs.org/v2/api/#vm-refs

使用类的Vue实例

2 个答案: