VueJS 및 JQuery 변경 클래스

이벤트를 수신하고 (예 : 포커스, 흐림, 홀수/짝수 등) 양식 요소에 일부 클래스를 추가하는 몇 가지 사용자 정의 JQuery 코드가 있습니다. 큰 건 없지만 모든 웹 사이트에서만 JQuery를 사용하고 1 페이지는 복잡한 형식으로 VueJS를 사용하므로 VueJS에서이 모든 로직을 다시 작성하지 않으려합니다.VueJS 및 JQuery 변경 클래스

새로운 VueJS 요소에 JQuery 코드를 시작하라는 지시문을 작성했는데 작동 중입니다. 하지만 일부 VueJS 코드 (내 경우에는 vee-validate 지시어 플러그인이지만 VueJS 코드가 될 수 있음)는 v-bind:class을 사용하여 클래스를 변경합니다. 그래서 그것은 JQuery에 의해 클래스 집합을 지우고, 그것을 대체하는 클래스를 추가하지 않습니다 ... VueJS 및 JQuery/Javascript에서 클래스와 함께 멋지게 연주 할 수있는 방법이 있습니까? JQuery가 기존 클래스 또는 무언가를 인식하도록하십시오.

감사

출처

2017-12-10 Mushr00m

그것은 당신이 구성 요소에 (아마도 mounted''에서) 수명주기보다는 뒷부분 JQuery와 클래스를 지정해야 할 것 같은데 지시문. – webnoob

위의 내용을 확장하면 일반적으로 라이프 사이클 후크가 고려해야합니다. 'mounted'와'updated' 훅은 당신이 가장 관심을 가질만한 것들입니다. –

그것은 당신이 찾고있는 것이 아니지만 jQuery와 Vue를 멋지게 만드는 방법입니다. https://stackoverflow.com/a/43255516/392102 –

당신은 vuejs 응용 프로그램을 설정하는 MutationObserverhttps://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

다음 예제와 함께이 작업을 수행 할 수있는 오프에에 다시 VUE를 통해 클래스 목록을 수정 변경에 클래스를 클릭하면. 그런 다음 돌연변이 관찰자를 설정하여 클래스 속성에 대한 변경 사항을 확인하고 makeBold 클래스가 클래스 목록에 있는지 확인하고 추가하지 않을 경우 추가 jquery를 실행합니다.

이 VUE는 요소 클래스 목록을 제어하는 것을 보여주고 관찰자 제가 그 VUE가 makeBold 클래스

제거되어 표시하도록 oberserver 반응을 중지하기 위해 체크 박스를 추가

별도로 일부 jQuery를 실행하여 변화에 반응한다

const app = new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     on: true 
 
    } 
 
    } 
 
}) 
 
const node = document.getElementById('app') 
 
// add bold class with jQuery 
 
$('#app').addClass('makeBold') 
 

 
const observer = new MutationObserver(mutations => { 
 
    if ($('#cbx').prop('checked')) return 
 
    const changes = mutations 
 
    .filter(({ attributeName }) => attributeName === 'class'); 
 
    if (changes.length && !$('#app').hasClass('makeBold')) { 
 
    $('#app').addClass('makeBold') 
 
    } 
 
}) 
 

 
observer.observe(node, { attributes: true })

.on { 
 
    background-color: orange; 
 
} 
 

 
.off { 
 
    background-color: white; 
 
} 
 
.makeBold { 
 
    font-weight: 600; 
 
} 
 
.appBody { 
 
    height: 100px; 
 
    border: 1px solid #000; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="app" class="appBody" :class="{ 'on': on, 'off': !on }" @click="on=!on"> 
 
    Click Me 
 
</div> 
 
<input type="checkbox" id="cbx"> Disable Observer reaction

출처

2017-12-15 08:47:25 vbranden

VueJS 및 JQuery 변경 클래스

답변

관련 문제