Vue의 핵심 지식 요약

Vue 인스턴스

각 Vue 인스턴스는 해당 데이터 객체의 모든 속성을 프록시합니다. vm.a===data.a //true

이러한 프록시 속성만 응답이라는 점에 유의하세요.

인스턴스가 생성된 후 인스턴스에 새 속성을 추가하면 뷰 업데이트가 트리거되지 않습니다.

Vue 인스턴스는 데이터 속성 외에도 몇 가지 유용한 인스턴스 속성과 메서드를 노출합니다. 이러한 속성과 메서드에는 에이전트의 데이터 속성과 구별하기 위해 $ 접두사가 붙습니다.

템플릿 구문

v-html에서 {{}} 바인딩을 사용하면 다음과 같이 되며 컴파일되지 않고 문자열로 직접 사용됩니다.

데이터 바인딩은 js 표현식을 사용합니다

필터

계산된

계산된 대 메서드

계산된 속성은 종속성에 따라 캐시됩니다. 계산된 속성은 관련 종속성이 변경될 때만 재평가됩니다. 즉, 메시지가 변경되지 않는 한 reversedMessage 계산 속성에 여러 번 액세스하면 함수를 다시 실행할 필요 없이 이전 계산 결과가 즉시 반환됩니다.

계산된 대 관찰된

setter 설정

fullname을 직접 사용하여 getter를 호출합니다. fullname에 값을 할당할 때 setter

watch 옵션
을 호출합니다. 데이터 변경에 응답 이는 대규모 작업에 유용합니다.

공식 예에서 watch 옵션을 사용하면 비동기 작업(API 액세스)을 수행하고 작업 수행 빈도를 제한하며 최종 결과를 얻기 전에 중간 상태를 설정할 수 있습니다.
이것은 계산된 속성으로는 할 수 없는 일입니다.

클래스와 스타일의 동적 바인딩 및 구성 요소 사용 시 동적 클래스를 추가하는 방법

자동으로 접두사 추가

v-bind:style이 변환과 같은 특정 접두사가 필요한 CSS 속성을 사용하는 경우 Vue.js는 자동으로 테스트를 감지하고 적절한 접두사를 추가하세요.

조건부 렌더링

v-else 요소 또는 v-else-if 요소는 v-if 또는 v-else-if 요소 바로 뒤에 있어야 합니다. 그렇지 않으면 인식되지 않습니다.

키를 사용하여 재사용 가능한 요소 관리
Vue는 요소를 최대한 효율적으로 렌더링하며 일반적으로 처음부터 렌더링하는 대신 기존 요소를 재사용합니다.

v-show
차이점은 v-show가 있는 요소는 항상 렌더링되고 DOM에 남아 있다는 것입니다. v-show는 단순히 요소의 CSS 속성 표시를 전환합니다.

참고, v-show는

를 지원하지 않습니다.

위 내용은 Vue의 핵심 지식 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!