vue 연구 노트(2)--vue 소개

이 기사는 Vue에 대한 소개 중 일부를 공유합니다. 관심 있는 친구들은 한 번 살펴보세요

이 연구는 주로 공식 웹사이트 https://cn.vuejs.org/v2/guide

A의 튜토리얼에서 나왔습니다. Vue 예

vue 애플리케이션은 루트 Vue 인스턴스로 시작됩니다. Vue는 데이터를 데이터에 바인딩합니다. 데이터가 변경되면 뷰도 [관찰자 모드]로 변경되어 데이터의 양방향 바인딩[응답성]을 실현할 수 있습니다. vue 인스턴스의 속성은 $+속성 이름을 통해 얻을 수 있습니다. $data

vue를 입력하면 초기화 후 요소가 다시 추가되면 뷰가 변경되지 않습니다.

2 Vue 수명 주기

vue 인스턴스 초기화 프로세스에는 데이터 모니터링 설정, 템플릿 컴파일, 인스턴스를 DOM에 마운트, 데이터가 업데이트될 때 DOM 업데이트 등을 포함하는 일련의 프로세스가 포함됩니다. 이 프로세스에는 몇 가지 라이프사이클 후크 기능이 있으며, 이 프로세스에 자체 코드를 추가하여 다양한 기능을 구현할 수 있습니다.
Vue 라이프 사이클 다이어그램은 다음과 같습니다:

세 가지 Vue 템플릿

vue 템플릿은 모두 html 구문을 기반으로 하는 합법적인 html입니다. Vue는 템플릿을 가상 DOM으로 렌더링합니다.
vue는 JSX 구문을 통해 렌더링 기능을 통해 DOM 렌더링을 구현할 수 있습니다.
vue는 보간, 즉 자리표시자에 {{}}를 사용합니다. 프리메이커와 비슷합니다. {{}}는 텍스트 문자열을 삽입합니다. v-html을 사용하면 실제 HTML 코드가 삽입됩니다. 이로 인해 xss가 발생하므로 주의해서 사용하세요.
Vue 일반 명령:

• v-bind: html 속성을 바인딩할 수 있으며 다음과 같이 축약할 수 있습니다. xx

• v-on: 이벤트를 바인드하며 @xxxx

• v-model로 축약할 수 있습니다. : 양방향 바인딩 데이터

• v-if: 판단문, v-if는 요소와 함께 사용해야 합니다. 요소가 여러 개인 경우

• v-show: v-if와 유사, 표시 여부 결정, v - show는 CSS의 표시만 제어하며 dom 구조는 항상 존재합니다

• v-for: 루프 문, v-for는 v-if

v-if보다 우선순위가 높으며 v-for는 다음과 같아야 합니다. 렌더링 시 최대한 많이 사용합니다. 기존 dom 구조를 재사용합니다. v-if의 경우 바운드 값만 변경되고 dom 구조는 다시 생성되지 않습니다. v-for는 렌더링 중에 값이 동일하면 재생성되지 않습니다. 키를 사용하여 vue가 새로운 DOM을 생성하도록 할 수 있습니다

네 가지 Vue 트리거 응답 작업

vue 트리거 응답 배열 또는 객체 작업은 아래 그림에 표시됩니다.

관련 권장 사항:

vue 학습 노트 (1)--webpack 학습

위 내용은 vue 연구 노트(2)--vue 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!