Vue를 시작합니다.js:Vue 인스턴스

저의 지난 블로그에서 저는 어떻게 Vue를 배우기 시작하는지 소개했습니다.나는 React와 React의 유사점을 이야기했다. React는 내가 가장 자주 사용하는 프레임워크이고 내 컴퓨터에서 Vue 테스트를 하는 프로젝트 설정 방법 중의 하나도 소개했다.나는 기사의 마지막 부분에서 Vue 실례와 웹 페이지에 그 데이터를 어떻게 표시하는지에 대해 이야기했다.이 예가 바로 Vue의 전체 내용입니다. 이 블로그에서 Vue가 할 수 있는 일과 그것을 어떻게 사용하는지 소개할 것입니다.
마지막 경고의 기본 Vue 인스턴스는 다음과 같습니다.

new Vue({
  data: {
    // put properties you will use here
  }
})

Vue 인스턴스의 data 섹션이 가장 중요합니다.Vue는 데이터 객체에 넣은 모든 속성을 자동으로 추적하며, 이러한 속성에 대한 변경 사항은 항상 업데이트된 값을 표시하도록 페이지를 다시 표시합니다.네가 사용하고 추적하고 싶은 모든 데이터는 여기에 두어야 한다.data 대상에 저장된 데이터는 대부분 유형일 수 있다.숫자, 문자열, 부울 값(true 또는false), 수조, 심지어 함수까지.이렇게 평가할 수도 있습니다.

new Vue({
  data: {
    date: new Date().toLocaleString()
  }
})

이 예제에서는 JavaScript의 내장된 날짜 클래스를 사용하여 호출할 때 정확한 날짜와 시간을 가져오고 방법을 사용하여 날짜 객체를 사람이 읽을 수 있는 문자열로 변환합니다.또 다른 복습으로 웹 페이지에서 이 속성을 사용하는 방법은 HTML에서 쌍괄호로 묶고 el 속성을 HTML 요소를 인용하는 실례에 추가하는 것이다.

<div id="name">
  {{ date }}
</div>

이제 페이지에는 다음과 같이 날짜와 시간date 문자열이 표시됩니다.

이 날짜는 페이지를 새로 고치지 않는 한 로드 페이지에서 시작되는 정확한 날짜 및 시간입니다.이러한 괄호 안에 데이터를 삽입할 때 미리 정의된 데이터를 인용할 뿐만 아니라, 코드를 사용하여 페이지에 표시된 내용을 변경할 수 있다.예를 들어 날짜만 표시하고 시간을 표시하지 않으려면 쉼표date 속성을 다음과 같이 첫 번째 부분만 표시할 수 있습니다.

{{ date.split(',')[0] }}

주의해야 할 점은 괄호마다 하나의 표현식만 넣을 수 있기 때문에 HTML의 데이터를 너무 복잡하게 처리할 수 없다는 것이다.하지만 더 길거나 복잡한 코드를 작성하기 위해 Vue 실례에 추가할 수 있는 것들이 있습니다.el와 data를 제외하고 Vue 실례에 추가할 수 있는 또 다른 속성은 methods이다.지금까지 나는 컨트롤러를 열어 실례의 데이터를 수동으로 바꾸는 것만 논의했지만, 보통 함수를 사용해서 이 점을 실현해야 한다.다음은 method 속성이 있는 인스턴스의 예입니다.

new Vue({
  el: "#counter",
  data: {
    count: 0
  },
  methods: {
    add: function () {
      this.count++
    }
  }
})

이제 다음 블로그에서 이 함수를 DOM의 버튼에 추가할 수 있는 지침을 자세히 설명합니다.

<div id="counter">
  <p>Count: {{ count }}</p>
  <button v-on:click="add">Add</button>
</div>

이 예는 단추를 눌렀을 때 v-on 명령을 사용하여 이벤트 탐지기를 만들고 add 함수를 탐지기에 추가합니다.현재, 추가 단추를 누르면 count 화면에 나타나는 것을 볼 수 있습니다.
내가 토론하고자 하는 Vue 실례의 마지막 속성은 computed 속성이다.그것은 함수도 사용하기 때문에 methods 속성과 매우 비슷하다.예를 들면 다음과 같습니다.

new Vue({
  data: {
    firstName: "Jane",
    lastName: "Doe"
  },
  computed: {
    fullName: function () {
      return `${this.firstName} ${this.lastName}`
    }
  }
})

이 계산 속성은 항상 firstName 와 lastName 사이에 빈칸이 있는 속성을 되돌려주고, 다른 속성 중 하나가 변경되면 업데이트됩니다.methods 속성에서 이 함수를 사용하거나 data 의 일부분으로 사용할 수도 있지만, 약간 다르다.우선, 계산 속성을 사용하면, 호출 함수처럼 괄호를 사용하지 않고 DOM에서 모든 데이터를 인용하는 것처럼 인용할 수 있습니다.또한 계산 속성은 DOM에서 참조할 때 결과를 다시 계산하는 함수가 아닌 일부 데이터가 업데이트될 때만 업데이트됩니다.따라서 복잡하고 시간이 많이 걸리는 평가를 하려면 속성을 계산하지 않는 시간의 대가가 더 높다.
Vue 실례의 최종 목적은 웹 페이지의 데이터를 참고하고 변경하여 업데이트를 추적하기 쉽고 사용자가 필요로 하는 모든 방식으로 데이터를 변경할 수 있도록 돕는 것입니다.지금까지 저는 Vue가 제공한 데이터를 DOM에 보여주는 모든 쿨한 방법만 소개했습니다.이것은 나의 다음 블로그의 중점이 될 것이다. 나는 여기서 Vue 지령을 토론할 것이다.