Vue에서 DOM을 찾는 방법
16033 단어 vuedomjavascript
웹 개발에서 흔히 볼 수 있는 방법은 DOM(문서 대상 모델)의 한 요소(즉 모든 HTML 요소와 표시된 논리 구조)를 목표로 하고 어떤 방식으로 그것을 조작하는 것이다.
본고에서 우리는
ref의 기능과 그 일부 변두리 상황을 검사할 것이다.토스트를 준비해 놓고 껍질을 벗기다🥑.노무장자 기사단
낡은 방법 (일명
jQuery) 에서 온 사람들에 대해서 말하자면, 우리는 페이지에서 DOM 요소를 지정해서 수정하거나 특정한 방식으로 사용하는 것에 매우 익숙하다.사실상, 페이지의 요소를 사용하기 위해 어떤 종류의 플러그인을 사용하고 싶다면, 이것은 거의 불가피하다.jQuery에서 $() 함수를 통해 원소를 선택할 수 있으며 이 대상을 조종하는 여러 가지 방법을 제공할 수 있다.div을 예로 들면 display css 속성을 전환하여 가시성을 설정하거나 전환하기를 원합니다.다음 표기를 예로 들자.
<body>
<div id="datOneDiv" class="myCoolClass" style="display: none;">I is hidden</div>
<div>I is shown</div>
<div>I is 🐶</div>
</body>
jQuery에서 다음과 같다.$('#datOneDiv').css('display', 'block');
div이다. 선택기 id은 datOneDiv의 #datOneDiv을 볼 수 있다. (이곳의 # 작업 원리는 CSS 선택기와 같고 이것은 하나의 id를 나타낸다).두 번째는 매우 간단하지만, 많은 사람들이 자바스크립트를 어떻게 사용하는지 진정으로 배우지 못하게 하는 것이다. 시간이 지날수록 이것이 문제가 되었다.
그거 알아, 브레?😎💪
실제 vanilla JavaScript에서
querySelector과 일부 속성 조작을 사용해도 같은 결과를 얻을 수 있다.document.querySelector('#datOneDiv').style.display = 'block';
id을 사용하여 문서에서 매우 구체적인 div을 포지셔닝하는 것이다.물론 우리도 div을 통해 .myCoolClass을 겨냥할 수 있지만, 당신이 알고 있는 바와 같이 이것도 같은 문제를 가져올 수 있다.뷔가 깨어났어요.
우리는 오늘 시스 살육을 해야 한다. 걱정하지 마라. 이 문장의 제작 과정에서 진정으로 뿔이 있는 멋진 남자가 상처를 입지 않았다.
다음 Vue 구성 요소
Sith.vue을 고려하십시오. <template>
<div>
<p class="sithLord">I is Sith</p>
<button @click="keelItWithFire">Kill the Sith DED!</button>
</div>
</template>
<script>
export default {
methods: {
keelItWithFire() {
document.querySelector(".sithLord").style.display = "none";
}
}
};
</script>
만약 우리가
App.vue이나 메인 응용 프로그램 입구점에서 이 구성 요소를 실례화한 다음 단추를 누르면 실제 작업을 알 수 있습니다.그렇다면 왜 우리는 지금처럼 Vue에서 DOM을 직접적으로 겨냥하는 것이 이렇게 나쁘다는 것을 한 번 또 한 번 알렸을까?두 개 이상의 시스 영주를 실제로 수용할 수 있도록 메인 템플릿을 수정해 보세요.
<template>
<div id="app">
<Sith/>
<hr>
<Sith/>
<hr>
</div>
</template>
구성 요소 방법
keelItWithFire이 두 번째 구성 요소에서 터치되었을 때 querySelector 방법은DOM을 두루 훑어보고 sithLord으로 분류된 요소의 첫 번째 실례를 찾으려고 시도했습니다. 과연 찾았습니다!Vue에서 DOM을 직접적으로 겨냥한 큰 문제는 첫째, 구성 요소는 다시 사용할 수 있고 동적이어야 하기 때문에 우리는 이곳의 종류가
unique이라고 보장할 수 없다.우리는
id을 사용할 수 있다. 봐라!부분은 정확합니다. id 속성을 Vue에 지정한 템플릿은 어느 정도 유일성을 보장합니다. 이것은 전체 응용 프로그램에서 이 구성 요소를 실례화하는 횟수가 하나를 초과하지 않는다는 것을 증명합니다. 그렇지 않으면 기본적으로 상술한 것과 같은 문제에 부딪힐 수 있습니다.두 번째 경고는 응용 프로그램에 다른 것이 없다는 것을 보증해야 한다. 다른 개발자도, 같은
id을 포함할 수 있는 다른 라이브러리도 만들어야 한다.Vuedi의 길
Vue 또는 no, 시도되지 않았습니다.
Vue에서는 속성 계산, 로컬 상태, 동적 바인딩 등을 통해 템플릿을 동적으로 수정할 수 있는 도구가 많습니다.하지만 DOM에 대한 실제 요구 사항은 어느 정도 충족해야 합니다.두 가지 흔히 볼 수 있는 이유는 vue에 특정되지 않은 외부 플러그인을 실현하거나, 폼의 한 필드를 목표로 초점을 맞추는 것이다.
이런 상황이 발생할 때 우리는 매우 멋진 속성을 가지고 있다. 우리는 이를
ref이라는 요소에 추가할 수 있다. 당신은 여기서 https://vuejs.org/v2/api/#ref의 공식 문서를 볼 수 있다.이번에
Jedi.vue의 새로운 구성요소를 제작하고 Vue의 지침을 따르겠습니다. <template>
<div>
<p ref="jedi">I is Jedi</p>
<button @click="keelItWithFire">Kill the Jedi DED!</button>
</div>
</template>
<script>
export default {
methods: {
keelItWithFire() {
this.$refs.jedi.style.display = "none";
}
}
};
</script>
현재 중요한 것은 우리가
ref 중의 한 요소에 <template> 속성을 첨가할 때 무슨 일이 일어날지 이해하는 것이다.간단하게 말하자면, 모든 구성 요소의 실례는 현재 자신을 가리키는 <p> 표기의 개인 인용을 가지고 있으며, 우리는 실례의 keelItWithFire 속성을 통해 $refs 함수에서 이 표기를 볼 수 있다.클래스와 id 포지셔닝이 가져오는 문제를 제외하고 가장 중요한 것은 DOM을 직접 수정하면 이 구성 요소나 부모 구성 요소에 DOM을 다시 나타낼 때 이 변경 사항이 Vue에 덮어씌울 수 있다는 것을 알아야 한다.
우리가 직접 DOM을 목표로 할 때, Vue는 그것을 알지 못하기 때문에, Vue가 저장한 가상 '던전' 을 업데이트하지 않습니다. 다시 만들어야 할 때, 모든 변경 사항을 완전히 잃어버립니다.
Vue에서 DOM의 일부를 계속 렌더링하지 않으려면
v-once 속성을 적용하면 특정 부분을 다시 렌더링하지 않습니다.지금까지 이 예는 흥분되지 않는 것 같지만, 우리가 실제 사례 장면으로 넘어가기 전에 주의사항을 보충하고 싶다.
경고1
만약에 Vue 구성 요소(예를 들어
ref)에서 <Jedi ref="jedi">을 사용한다면 this.$refs.jedi에서 얻은 것은 구성 요소의 실례이지 element이 아니다. 왜냐하면 우리가 사용하는 것은 <p> 표시이기 때문이다.이것은 모든 cool Vue 속성과 메서드에 액세스할 수 있음을 의미하지만 DOM을 직접 변경하려면 $el을 통해 이 구성 요소의 루트 요소에 액세스해야 합니다.경고2
구성 요소의
$refs 기능을 실행하면 render이 등록됩니다.이것은 $refs을 호출하기 전에 발생한 갈고리에 render을 사용할 수 없다는 것을 의미합니다. 예를 들어 created()에서 mounted()을 사용할 수 없습니다.created()이 이 요소들을 제공할 때까지 기다릴 수 있는 방법이 있는데 이것이 바로 this.$nextTick 함수를 이용하는 것이다.this.$nextTick은 다음 DOM 업데이트가 수행될 때까지 Vue에 전달된 함수를 실행합니다.아래의 예를 고려하다.
<template>
<div>
<p ref="myRef">No</p>
</div>
</template>
<script>
export default {
created() {
if (!this.$refs.myRef) {
console.log("This doesn't exist yet!");
}
this.$nextTick(() => {
if (this.$refs.myRef) {
console.log("Now it does!");
}
});
},
mounted() {
this.$refs.myRef.innerHTML = "🥑";
console.log("Now its mounted");
}
};
</script>
<p> 라벨과 ref의 myRef이 있는데 별다른 것이 없다.created() 갈고리에서 몇 가지 일이 일어나고 있지만.우선,
this.$refs.myRef이 우리에게 사용할 수 있는지 확인해 봅시다. 예상한 바와 같이, 이것은 우리에게 사용할 수 없습니다. 왜냐하면 아직 DOM이 나타나지 않았기 때문에 컨트롤러도 마찬가지입니다.로그가 실행됩니다.이후, 우리는
$nextTick에서 익명 함수를 호출할 것입니다. 이 함수는 DOM이 다음 업데이트 주기를 끝낸 후에 실행될 것입니다.언제든지 이 상황이 발생하면 콘솔 "Now it do!"에 로그인합니다.mounted() 갈고리에서 우리는 실제로 이 ref을 사용하여 <p> 라벨의 내부 텍스트를 우리의 구세주인 신기한 아보카도로 바꾸고 다시 기록한다.콘솔 로그는 다음 순서로 가져옵니다.
mounted()은 실제로 nextTick 이전에 촉발된다. 왜냐하면 nextTick은 렌더링 주기가 끝날 때 발생하기 때문이다.암흑면
좋아, 네가 모든 훌륭한 이론을 가지고 있는 이상 우리가 이 지식으로 무엇을 할 수 있겠니?제3자 라이브러리
flatpickr을 우리의 구성 요소에 도입한 흔한 예를 보겠습니다.당신은 이곳에서 flatpickr에 대한 더 많은 정보를 읽을 수 있습니다. https://flatpickr.js.org/.다음 구성 요소를 고려하십시오.
<template>
<input
ref="datepicker"
/>
</template>
<script>
import flatpickr from 'flatpickr';
import 'flatpickr/dist/themes/airbnb.css';
export default {
mounted () {
const self = this;
flatpickr(this.$refs.datepicker, {
mode: 'single',
dateFormat: 'YYYY-MM-DD HH:mm'
});
}
};
</script>
ref을 사용하여 라이브러리를 정확한 element과 this.$refs.datepicker을 가리켰다.이 기술은 심지어
jQuery 플러그인에도 적용된다.하지만 어두운 면은 조심해야 한다.분노, 두려움, 반응;원력의 어두운 면은 그들이다.(면책 성명, 이것은 농담이다. 나는 사실 다른 틀을 싫어하지 않는다. 아마도 jQuery를 제외하고는 jQuery가 사악할 것이다.)
마무리
오늘
ref에 대해 흥미로운 이해를 얻었으면 합니다. 이것은 오해를 받고 충분히 이용되지 않은 도구입니다. 당신이 정확한 시간에 그것을 사용할 때 번거로움에서 벗어날 수 있습니다!본고에서 사용한 코드 예시를 포함하는 샌드박스는 아래 링크에서 찾을 수 있다. https://codesandbox.io/s/target-dom-in-vue-r9imj
예전과 같이 트위터에서 당신의 ref 체험을 읽고 공유해 주셔서 감사합니다.
부언: 신기한 아보카도 환호🥑
쉿!❤️🔥🐶☠️
Reference
이 문제에 관하여(Vue에서 DOM을 찾는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/marinamosti/how-to-target-the-dom-in-vue-l5j텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
