Vue를 시작합니다.js: 명령

계속해서 두 편의 블로그를 통해 저는 Vue의 기초 지식을 더 많이 소개할 것입니다.js.Vue를 사용하여 프로젝트를 시작하는 방법과 프로젝트에서 Vue 실례를 사용하는 방법에 대해 설명했습니다.이 글에서 나는 Vue의 지령을 되돌아볼 것이다.웹 페이지를 Vue 인스턴스의 데이터와 상호 작용하는 방법
명령은 Vue에서 제공하는 특수 속성입니다.그것들의 접두사는 v-이고 각각 특정한 반응 행위를 페이지에 추가된 HTML 요소에 적용한다.Vue의 주요 지령은 v-bind, v-if, v-for와 v-on가 있다.사용v-bind의 예는 다음과 같습니다.

<div v-bind:id="someVariable"></div>

v-bind 속성은 HTML 속성 내부에서 Vue 인스턴스 변수에 액세스하는 데 사용됩니다.위의 예는div의 id를 v-bind라는 변수에 분배하는 someVariable 속성을 보여 줍니다.HTML 요소 간에 변수를 참조하는 것과 달리 중괄호를 사용하여 HTML 속성의 변수를 설명할 수 없으며 v-bind:

<!-- Doesn't work, causes an error! -->
<a href={{ url }}>Vue.js</a>
<!-- This is the correct way to assign the href attribute to url -->
<a v-bind:href="url">Vue.js</a>

v-bind를 사용하여 요소가 가질 수 있는 모든 속성을 변수에 지정할 수 있습니다.그러나 여러 변수를 속성에 추가해야 할 때v-bind는 더욱 혼란스러워질 수 있다.페이지에 스타일을 추가할 때, 클래스와 스타일 속성은 그것과 관련된 많은 변수를 필요로 할 수 있습니다.이 경우 각 요소에 여러 클래스가 있는 것처럼 배열 또는 객체 구문을 v-bind와 결합하여 사용할 수 있습니다.

<div v-bind:class="[activeClass, errorClass]">
  <!-- This will have the class names of whatever is in
    the 'activeClass' and 'errorClass' variables -->
</div>
<div v-bind:class="{ active: isActive, 'text-danger': hasError }" >
  <!-- This will have the classes of 'active' and 'text-danger'
    depending on if their variables are true or false -->
</div>

스타일 속성을 사용할 때는 일반적으로 속성에 바인딩할 스타일 객체를 인스턴스에 생성하는 것이 좋습니다.

// in index.html
<div v-bind:style="styleObject">
  <!-- content -->
</div>
// in index.js
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

이렇게 하면 스타일 객체가 너무 커져도 HTML의 공간을 차지하지 않습니다.
다음 지령은 어떤 프로그래머라도 익숙해야 할 개념을 사용했다.v-if 명령은 조건에 사용되며 주어진 조건에 대한 값을 구하는 방식은 코드의if문장에 대한 값을 구하는 방식과 같다.예를 들면 다음과 같습니다.

<div id="if-directive">
  <h1 v-if="condition">I'm conditionally rendered!</h1>
</div>

이 예에서 condition 가리키는 v-if 은 사용자가 정의한 데이터일 것입니다.true 또는false로 계산할 수 있습니다.현재, 만약 condition 이 사실이라면, 웹 페이지에서 h1 표시를 볼 수 있고, 가짜라면, 이것은 비어 있을 것이다. div이 div에 연결된 Vue 인스턴스를 생성하여 이를 테스트할 수 있습니다.

let ifDirective = new Vue({
  el: "#if-directive",
  data: {
    condition: true
  }
})

현재 브라우저에서 페이지를 열면 h1 표시가 보일 것입니다. 그러나 컨트롤러를 열고 ifDirective.condition 을false로 설정하면, 눈썹이 사라지는 것을 볼 수 있습니다.
모든 프로그래밍 언어의if문장과 마찬가지로 v-if도 관련v-else과v-else-if가 있기 때문에 각종if조건에 따라 다른 옵션을 제공할 수 있습니다. 아래와 같습니다.

<div id="gender">
  <p v-if="person.gender === 'M'">
    Male
  </p>
  <p v-else-if="person.gender === 'F'">
    Female
  </p>
  <p v-else>
    Other
  </p>
</div>

내가 이 글에서 토론할 마지막 지령은 v-for이다.이것은 모든 프로그래머에게 익숙할 것입니다. 예상한 바와 같이, v-for 속성 디자인은 순환 집합이나 목록에 사용됩니다.다음은 목록이 있는 Vue 인스턴스의 예입니다.

const forDirective = new Vue({
  el: "#for-directive",
  data: {
    todos: [
      { text: 'Wash dishes', isComplete: false },
      { text: 'Do laundry', isComplete: true },
      { text: 'Check email', isComplete: false }
    ]
  }
})

HTML은 다음과 같습니다.

<ul id="for-directive">
  <li v-for="todo in todos">
    {{ todo.text }}
  </li>
</ul>

이것은 위와 유사한 목록을 나타낼 것이다.색인이 있다면브라우저에서 html 페이지를 열고 컨트롤러를 열면 todos 그룹에 항목을 추가하거나 삭제하고 페이지에서 목록 업데이트를 볼 수 있습니다.인스턴스의 목록이 변경되면 목록은 항상 업데이트됩니다.v-for 속성은 컬렉션의 각 요소에 대한 색인 및/또는 키에 액세스하여 객체를 순환하는 기능도 제공합니다.

// Using the index of each item in the array
v-for="(item, index) in items"
// Looping over an object
v-for="value in object"
// Looping over an object with it's key names and index values
v-for="(value, name, index) in object"

주의해야 할 점은 v-if와 v-for를 함께 사용하는 것을 권장하지 않는다는 것이다.그것들을 동시에 사용하려고 시도하는 주요 이유는 목록에 조건에 맞는 항목만 표시하려고 하기 때문입니다.그러나 더 좋은 방법은 계산 속성을 사용하는 것이다.계산 속성을 사용하여 원시 목록에서 정렬되거나 선별된 부분을 표시해야 합니다.만약 우리가 todo 목록에서 앞의 예시를 사용한다면, 우리는 실례에 컴퓨터 속성을 추가할 수 있습니다. 이 속성은 미완성 항목에 따라 목록을 필터할 수 있습니다. 아래와 같습니다.

computed: {
  completedTodos: function () {
    return this.todos.filter(function (todo) {
      return !todo.isComplete
    })
  }
}

그런 다음 v-for를 이 계산 속성과 함께 사용하여 완료되지 않은 TODO를 페이지에만 표시할 수 있습니다.

<li v-for="todo in completedTodos">
  {{ todo.text }}
</li>

v-for 명령에 관해서 또 다른 주의해야 할 것은 목록의 모든 요소에 유일한 키 속성을 지정해야 한다는 것이다.이렇게 하면 Vue는 모든 요소의 표식을 정확하게 추적하여 집합이 변경될 때 기존 요소를 다시 만드는 것이 아니라 집합이 변경될 때 기존 요소를 다시 사용할 수 있습니다.

<div v-for="item in items" v-bind:key="item.id">
  <!-- content -->
</div>

현재, 나는 Vue에 관한 블로그 글에서 모든 내용을 언급했고, 나는 Vue 실례의 데이터를 웹 페이지에 표시하는 대부분의 다른 방식을 소개했다.Vue가 설정되어 있기 때문에 데이터 업데이트에 따라 페이지가 변경됩니다.그러나 나는 아직 사용자와 당신의 웹 페이지의 상호작용을 어떻게 허용하는지 진정으로 소개하지 않았다.이것은 v-on 지령을 사용해야 한다. 나는 다음 블로그에서 이 점을 토론하는 데 시간을 쓸 것이다.