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는 요소와 함께 사용해야 합니다. 요소가 여러 개인 경우