Vue instance

Vue인스턴스(instance)

본 코스를 통해 우리가 이 제품 페이지를 함께 구축하는 동안 Vue의 기본 지식을 배우게 됩니다.

필수 구성 요소:

이 과정은 HTML, CSS및 JavaScript에 대한 기본 지식을 가정합니다.

우리의 목표

이 과정에서는 Vue를 사용하여 웹 페이지에 데이터를 표시하는 방법에 대해 설명합니다.

우리의 출발

다음과 같은 간단한 HTML과 JS코드로 시작하겠습니다.

문제

변수를 잡을 방법이 필요해요product우리의 자바 스크립트로부터 그리고 그것이 나타나게 합니다h1우리의 HTML에 대한 것을 제공합니다.

우리의 첫번째 단계는 프로젝트에 Vue를 포함시키는 것입니다. 이 선을 우리 프로젝트의 맨 아래에 추가하는 것입니다.index.html파일

다음 주. js는 다음과 같습니다.

그리고 index.html에서는 첫번째 JavaScript표현식을 사용합니다.

이것을 저장하면 우리 웹 페이지에 "양말"이 나타납니다.

효과가 있었어요. 자바 스크립트의 데이터가 HTML에 나타나고 있는데, 우리가 방금 뭘 했지? 그것을 분석해 보자.

Vue인스턴스(instance)

Vue인스턴스(instance)는 애플리케이션의 루트입니다. 옵션 개체를 전달하여 생성됩니다. 이 개체에는 데이터를 저장하고 작업을 수행할 수 있는 기능을 제공하는 다양한 옵션 속성이 속성이 있습니다.

요소에 연결

그런 다음 Vue인스턴스가 선택한 요소에 연결되어 인스턴스와 DOM의 해당 부분 사이에 관계를 형성합니다. 다른 말로 하면, 우리는 ID로 div위에 Vue를 활성화하고 있습니다.app세팅으로'``#app``'구성 요소로서()el인스턴스가 연결되어 있는지 확인합니다.

데이터를 그 자리에 배치

Vue인스턴스는 데이터 속성에 데이터를 저장합니다.

인스턴스의 데이터는 해당 인스턴스가 연결된 요소 내부에서 액세스 할 수 있습니다.

표현식 사용

우리가 원한다면product출연하다h1우리는 넣을 수 있다.product이 이중 나선식 버팀대 안을 말이야

봐 봐, 효과가 있어. 심플하죠?

그것은 어떻게 작동하나요? 이중 나선형 가새 안에서 JavaScript표현을 사용하고 있습니다.

중요 용어:표현

표현식을 사용하면 논리와 함께 기존 데이터 값을 활용하여 새 데이터 값을 생성할 수 있습니다.

Vue가 그 표현을 볼 때{{ product }}다음과 같은 경우에는 관련 Vue인스턴스(Vue인스턴스)데이터를 참조하고 있다는 것을 인식하고 대신 해당 식을 제품 값으로 대체합니다. “양말을”.

다음과 같은 몇가지 다른 방법으로 표현식을 사용할 수 있습니다.

대응성 소개

Vue가 표시할 수 있는 이유product‘s의 값은 Vue가 반응성이기 때문입니다. 즉, 인스턴스의 데이터는 데이터가 참조되는 모든 위치에 연결됩니다. 따라서 Vue는 데이터를 참조하는 HTML내에 데이터를 표시할 뿐만 아니라 참조된 데이터가 변경될 때마다 새 값을 표시하도록 HTML을 업데이트할 수 있습니다.

이를 증명하기 위해 콘솔을 열고 제품 문자열 값을 변경해 보겠습니다. 무슨 일이 일어나는지 보세요.