Vue 등급의 실례를 만들 수 있는 구조기의 쓰기 학습편Part3~v-지도성

※ 이 내용은 Vue입니다.이것은 js 입문을 학습한 ~ 기초부터 실천 응용 개발까지 ~ P51 ~ P58 시 자기이해 노트입니다.
[앞의 기사!]

Vue.js 입문~Vue.js의 첫걸음~5분을 뛰어넘어 읽다

Vue.HTML, CSS, jQuery, JS를 다 해봤는데 그것과 무슨 차이가 있나요?

Vue.js~도입, 기본 단어의 정의, 생각~

Vue.js, 전역 변수, 구조기 실례 도입

Vue 등급의 실례를 만들 수 있는 구조기의 쓰기 학회편 Part1

구조기의 기본 쓰기 방법, $watch 방법

Vue 등급의 실례를 만들 수 있습니다~ 구조기의 쓰기 학습편 Part2~

데이터 바인딩

이 글은 Vue 등급의 실례~구조기를 만들 수 있는 작법학회편Part2~의 속편을 담고 있지만, 한 편의 문장이 끝났기 때문에 특별히 읽을 필요가 없다는 내용이다.
약간의 복습을 위해 지도를 확인하다.

지시성

메시지 속성에 v-in directionse를 사용하여 데이터로 하여금 원본 HTML을 가지게 하고 DOM에 적용할 수 있도록 합니다.이렇게 편한 뷔.한편으로는 js의directions 기능과 데이터 백업을 결합시키고 한편으로는 장면을 결합시켜 생각하고 시도한다.

오디오

데이터 속성은 지시를 사용하여 다시 활성화할 수 있습니다.왠지 여기까지 배운 건 베인 것 같아.js의 장점은 주동적이고 편리하며 학습 원가가 낮은 것이다.그걸 어떻게 이루어?나 그거 배웠어.(구성 요소 같은 것도 앞으로도 나오겠죠. 아마 Vue.js의 축을 따르는 뛰어난 기능일 거예요. 너무 많이 올렸어요.v-if 지시로 진위를 판단하고 DOM을 삭제, 삽입할 수 있다.
index.vue

<div id="app-3">
  <p v-if="seen">おはよ</p>
  <p v-if="!seen">おはよ</p>
</div>


<script>
var app3 = new Vue({
  el: "#app-3",
  data: {
    seen: true
  }
})
</script>

seen의 진가
진.
어머니 숨기기
기초는 매우 간단하다.하지만 실제 업무에서는 더 복잡하게 사용된다.예를 들어 트위터를 돌이켜보면 제 개인 프로필 페이지와 저 이외의 개인 프로필 페이지가 조금 다르다는 것을 알 수 있습니다.


좋아하는 유튜버의 트위터 프로필 페이지를 캡처해서...
이 분류도 v-if와 관련이 있다.대전제로서 Vue.이것은 js에 대한 생각입니다.트위터는 로컬 응용 프로그램이자 웹 응용 프로그램이다.
여기서 말하는 것은 Vue입니다.js로 이렇게 분리하는 방법.

v-if에서는 진위를 전달할 수 있지만 이런 분배에 사용할 수 있을 것 같다.기본적인 사용법만 나왔지만 기본적인 부분은 함께 구성 부분으로 나눠서 개발 원가를 줄이는 것 같았다.

v-show 디렉토리

DOM 내의 디스플레이/숨기기 전환에서 v-if 이외에도 v-show를 사용할 수 있습니다.

v-if와 v-show의 차이

v-if: DOM의 추가 및 삭제 전환
v-show: 디스플레이/숨기기 전환 (display 전환)
외관상 변화가 거의 없는데 어떻게 구분해서 사용합니까?이런 요점이 있다면 과장 원가를 간단하게 머릿속에 기억하면 된다.
v-if: DOM 작업 → 렌더링 비용 높음
v-show: 스타일 조작→DOM 조작에 비해 원가가 낮다
빈번한 변화 결과의 값에 대해서는 v-show를 사용하고 한 번의 변화 결과만 나오면 v-if를 사용하는 것이 좋다.매번 판단 후 사용한다.

v-bind 디렉토리

v-디렉토리에 매개변수가 있습니다.바로 이 예다.

v-bind:class

클래스 귀속은 v-if의 생각과 비슷하며 v-bind:class에서 지정한 대상의 진위에 따라class 속성을 바꿉니다.
index.vue

<div id="app-5">
    <div v-bind:class="{ active: isActive }">v-bind:classでtrueを持つ</div>
</div>

<script>
var app5 = new Vue({
  el: "#app-5",
  data: {
    isActive: true
  }
})
</script>

진위를 데이터에 넘기다.
또한 이 v-bind:class는 일반적으로 부여된class를 사용하는 동시에 사용할 수 있습니다.그리고 여러 종류의 전환도 할 수 있다.
index.vue

<div id="app-5">
    <div class="plain" v-bind:class="{ active: isActive, 'hidden': isHidden }">v-bind:classでtrueを持つ</div>
</div>


<script>
var app5 = new Vue({
  el: "#app-5",
  data: {
    isActive: true,
    isHidden: false
  }
})
</script>

개발자 도구로 확인

클라스 이름이 플레인 active인 걸 알 수 있어요.

<div id="app-4">
  <a v-bind:href="http://google.com">Go to Google</a>
</div>

이로써 v-디렉터리, v-if, v-bind의 기본 내용을 확인했습니다.실제 업무에서 구성 요소를 사용할 때 v-if 지도성과 v-bind:class 같은 실용적인 방법을 사용합니다.그 내용은 앞으로의 구성 요소를 공부할 때 함께 정리한다.
그런 다음 논리를 DOM 요소에 병합하여 Vue를 수행합니다.js의 JavaScript 요소를 확인합니다.다음은 예고.

[다음 예고] Vue반의 실례를 만들 수 있는~ 구조기의 쓰기 학습편 Part4~

다음

목록 표시

이벤트 처리

창 입력 귀속

잠깐만, 확인하고 싶어.
끝맺다