vue.js를 사용할 때 주의해야 할 점은 무엇인가요?

vue.js 사용 시 주의할 사항: 1. 필터는 주로 간단한 텍스트 변환에 사용됩니다. 2. 계산된 방법과 방법의 차이점 3. 키 사용 5. 6. 구성요소 통신.

이 문서의 환경: windows10, vue2.9, Dell G3 컴퓨터.

(학습 영상 공유: javascript 영상 튜토리얼)

vue.js 사용 시 주의할 점은 다음과 같습니다.

1. 필터는 주로 간단한 텍스트 변환에 사용됩니다. 변환하려면 계산된 속성을 사용해야 합니다.

2. 지침 사용

• v-bind는 기본적으로 id, class, href, src 등과 같은 HTML 요소의 속성에 사용됩니다.

• v-on은 click, dblclick, keyup, mousemove 등과 같은 이벤트 리스너를 바인딩하는 데 사용됩니다. 이 메소드는 현재 Vue 인스턴스를 가리킵니다

• v-show는 템플릿에서 사용할 수 없습니다

• - v-if 및 v-show 사용 시나리오

• v-if 조건이 false이면 렌더링된 요소가 컴파일되지 않습니다. v-show는 단순한 CSS 속성 스위치일 뿐이며 true/false에 관계없이 컴파일됩니다. v-if는 조건이 자주 바뀌지 않는 장면에 적합합니다. 3. 계산된 방법과 방법의 차이점은 대괄호()가 있고 계산된 내용에는 대괄호가 없습니다.

계산은 종속성 캐시를 기반으로 하며 관련 종속성이 변경될 때만 다시 검증됩니다.

• 메서드 다시 렌더링할 때 항상 함수가 호출되어 다시 실행됩니다.

• 4. 키 사용

Vue가 요소를 렌더링할 때 효율성을 고려하여 기존 요소를 최대한 재사용합니다. 이때 재사용된 요소

• <input key="go">

  5에 key 속성을 추가해야 합니다. arrays

filter(), concat(), Slice()를 사용하면 원래 배열이 변경되지 않지만 새 배열이 반환됩니다. array

성능에 영향을 주지 않고 원래 어레이를 새 어레이로 교체합니다. Vue가 렌더링되면 DOM 요소 재사용을 시도합니다

일부 배열 변경 사항은 Vue에서 감지할 수 없으며 뷰가 업데이트됩니다
app.books[3]={}app.books.length=1 다음을 수행할 수 있습니다. 위의 경우 .set 및 app.books.splice(1) 처리

• 6에서 Vue를 별도로 사용합니다. 구성요소

<table>, <ul>, <select> 및 기타 태그는 HTML에 의해 제한되며 허용됩니다. 제한된 레이블만 표시되고 사용자 정의 구성 요소 레이블은 유효하지 않습니다.
• 이때 is 속성을 사용하여 컴포넌트를 마운트할 수 있습니다.

  <table>    
      <tbody is="my-component"></tbody>
  </table>

  <tbody>는 렌더링 시 my-comComponent 컴포넌트의 내용으로 대체됩니다.

참고: 그러나 문자열 템플릿을 사용하는 경우에는 제한. .vue 파일

7, 컴포넌트 통신

parent->child prop

child->parent $emit v-model

• 관련 추천:

  js tutorial

위 내용은 vue.js를 사용할 때 주의해야 할 점은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!