Vue instance using classes

Question

I\'m new to Vue and have a few questions on it. But I think the issue I am running is the one I have no idea how to solve it:

I have a few

相关标签:

Answer 1

Additionally, if you want to access the html from your js/ts files, you can use vue's ref system.

example:

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

example.js:

var myExampleDiv = this.$refs.example;

or if your using typescript

example.ts:

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

For more information on this: https://vuejs.org/v2/api/#vm-refs

Answer 2

You can't do what you are suggesting, but you could create a new Vue for each element matching your selector.

Each would hold it's own state.

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

Example.

If you wanted a shared state,

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

At which point you could do something like data.message = "new value" and all the Vues would change.

Example 2.

This is just me playing around though. It might be advisable for you to just create one Vue and manage all your foos.