클래스를 사용하는 Vue 인스턴스

Vue를 처음 사용하고 몇 가지 질문이 있습니다. 그러나 나는 내가 달리고있는 이슈가 해결 방법을 모르는 것 같다고 생각한다.클래스를 사용하는 Vue 인스턴스

나는 내 코드에 <div class="foo"> 몇 개가있다. Vue 인스턴스를 사용하여이 <div>과 상호 작용하고 싶습니다.

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

따라서, 모든 div.foo 요소 app에 의해 관리 될 것이다 : 내가 좋아하는 뭔가를 사용하는 생각을했다. 하지만 내가 어떻게 작업하고있는 요소를 정확히 얻을 수 있습니까?

는

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

코드는 모든 div.foo 위해 일할 것입니다 ...의 JQuery와 우리가이 있다고 가정 해 봅시다,하지만 인쇄는 클릭 된 요소를 보여줍니다.

출처

2017-03-22 porthunt

이 접근 방식은 사용자가 원하는 것이 아니며 권장 사항입니다. 단순히 div에 id를 할당하지 않고 해당 div에 vue 인스턴스를 마운트하고 인스턴스 내에서 다른 구성 요소를 만들 수 있습니다. 어느 나라가 그들 자신의 주를 가질 것인가? 프로 팁 : VueJS로 작업 할 때 jQuery에 대한 모든 것을 잊어 버리려고합니다.) –

동일한 작업을 수행하는 6 또는 7 개의 vue 인스턴스가 있기 때문에 유용합니다. 이런 식으로 무엇을 권하고 싶습니까? – porthunt

당신이 정확히 무엇을 만들고 있는지 모르겠다 고 말하기는 어렵지만, div.foo 상태를 나타내는 하나의 주 인스턴스와 구성 요소를 가지고 갈 것입니다. –

제안하고있는 것을 할 수는 없지만 선택기와 일치하는 각 요소에 대해 새 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을 관리하는 것이 좋습니다.

출처

2017-03-22 21:11:57 Bert

또한 js/ts 파일에서 html에 액세스하려면 vue의 참조 시스템을 사용할 수 있습니다.

예 :

<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

출처

2018-01-09 14:33:20 DanPottsHimself

클래스를 사용하는 Vue 인스턴스

답변

관련 문제