vue.js가 DOM을 작동하는 방법

Vue.js dom 운영 방법: 1. 기본 js는 dom을 운영하며 코드는 [const dom = getElementById('box')]입니다. 2. vue 공식 메소드 ref를 사용하면 코드는 [< 설정" ref="위로">].

이 튜토리얼의 운영 환경: Windows 7 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터 이 방법은 모든 브랜드의 컴퓨터에 적합합니다. RESTRION 권장 기사 :

Vue.js

】vue.js 운영 방법 : vue 공식 방법 vue의 ref는 현재 dom 요소를 "추출"하는 것입니다. $refs

const dom = getElementById(‘box')

는 우리가 작동하려는 dom 객체이고 해당 ref는 up

< div class=“set” ref=“up”>

상위 요소를 클릭하세요. 이벤트, 다음은 이 메소드를 작성해보겠습니다

@click=“Alert”

CSS를 원하시나요? 그럼 여기에 코드를 다 붙여넣으면 바로 확인하실 수 있습니다

methods:{
  this.$refs.addAlert.style.display = “block”;
}

텍스트와 스크립트를 합친 것보다 CSS가 더 많습니다. CSS를 이해할 수 있다면 ref를 배우지 못할 이유가 없습니다.거기서요. 세 번째 방법인 jQuery 연산 dom도 읽어보니 감히 안 쓰게 되더라구요

3. jQuery가 dom을 연산해요

.set

그냥 jQuery 선택기를 사용해서 해당 dom을 선택해서 연산하면 되는데, jQuery가 요소를 얻는다는 건 다들 아시죠? 모든 페이지를 찾는 것은 필요한 dom을 찾을 때까지 모든 요소를 ​​"루핑"하는 것과 동일하지만 vue는 단일 페이지입니다. dom을 얻는 jQuery는 vue의 현재 페이지를 가져오는 것이 아니라 검색을 위해 루트 경로에서 시작합니다. 모든 요소에 대해 동일한 요소가 다른 페이지에 나타날 경우에도 해당 요소를 가져오며, jQuery에서 작동하는 DOM을 동적으로 가져온 데이터를 기반으로 렌더링하는 경우 Mounted에 작성된 작업 메서드는 유효하지 않으므로 업데이트에 배치해야 합니다. . 이로 인해 일부 작업이 여러 번 실행되므로 여전히 불가능합니다. vue에서 jQuery를 사용하는 것이 좋습니다.

관련 무료 학습 권장사항:

javascript 학습 튜토리얼

위 내용은 vue.js가 DOM을 작동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!