입문

《수학 소녀의 비밀 노트/비트와 이진법》 소재 두 번째 단락.
4장에서'플립트립'이라는 게임이 화제다.어떤 게임인지 설명하는 것보다 더 빨리 보는 것 같아요.
질 때

우승시

그러니까

돌을 하나하나 뒤집는다

같은 모드에서 두 번 내면 진다

틀리지 않고 모든 모드를 치면 이긴다

예를 들어 트위터에서 누군가가 설치한 것을 보고 "이번에는 반드시 웹팩으로 지금의 JS를 써야 한다"고 말했다
in-browser Babel transformer로 생각한 시제품을 써봤는데 100줄 정도 썼어요. 그래서 "이걸로 모듈화할 필요가 없어요"라고 다시 생각해 봤어요.
나는 React에 쓴 것을 Vue로 써 보기로 했다.코드는 아래에 놓으세요.
https://gist.github.com/junjis0203/4b26b3ef265879aa264f139f2ec13b5a

React 설치

React 버전은 원형이 여기 있습니다.
https://gist.github.com/junjis0203/0910a106e7a8da2304f4fa648a6f9ed0
물론'돌','돌을 정리하는 게임'같은 구성 요소를 만들고 설치했지만 이동을 목적으로 썼기 때문에'React에 어긋나는 것 같다'고 생각했다.구체적으로 말하면

Stone 상태 유지 여부

게임이 가진 돌 전체의 정보와 지금까지 이력은 React 상태?우선 일반적인 실례 변수로 보유하시겠습니까

돌 전체 정보(Game의 stones) 정상적으로 개작할 수 있나

그러고 보니 읽기 강좌 ○×게임이지만 다시 읽어보니 어떻게 되는지 궁금했던 것들이 모두 적혀 있었다.곧

Stone에는 state가 없습니다.부모 구성 요소에서props를 통해 전달되는 것을 사용하여 자신을 묘사합니다.클릭된 일은 부모에게 주고 부모로 상태를 업데이트해야 한다.그리고 묘사 이외에도 방법이 필요하지 않기 때문에 클래스가 아니라 함수로 쓰면 된다.

역사도 상태.

음소거가 좋지 않다.모조품일 거예요.일단 Array.slice () 를 복사합니다.

따라서 튜토리얼에 따라 개작하면
기본적으로 튜토리얼과 같은 프로그램 구조(웃음)일
https://gist.github.com/junjis0203/4b26b3ef265879aa264f139f2ec13b5a#file-fliptrip-react-html

Vue.js 구현

React 버전을 Vue로 마이그레이션합니다.
그렇다기보다는 Vue를 사용해 본 적이 없기 때문에 간단한 프로그램을 이식해 React와 Vue의 차이를 관찰해 보자.
그래서 길잡이 읽으면서 여유롭게 이식을 했는데 2시간 정도 걸렸어요.
https://gist.github.com/junjis0203/4b26b3ef265879aa264f139f2ec13b5a#file-fliptrip-vue-html
저는 React가 여기랑 다른 점은요.

데이터의 개작용 일반적인 대입문능(뒷면은 흑마술을 사용하는 것 같다)

render 함수가 아니라template라도 이렇게 할 수 없습니다.컴퓨터를 사용하면 방법이 있을 거예요.만약 쓰기 처리를 할 수 있다면 곧 복잡해질 것이다. 그러므로template식이 비교적 좋다고 생각한다.이렇게 생각하면렌더도 쓸 수 있어요..

또 Vueapp.number = 4에서는Reactive에서 돌의 수가 증가해야 하지만 이는 안 된다.
→ Vue 문서를 다시 읽는 방법을 파악하고 구현했습니다.후술

상태를 유지해야 하는 구성 요소와 이벤트 리스트 이야기

또 떠오른'Vue의 상황, 상태 돌지지(있다)? 게임지지(있다)?'그래서 가이드의 느낌을 대충 보았지만 특별한 기술은 없었다
"조성품에 데이터를 정의할 수 있으니 돌을 들 수 있겠지. 하지만 게임에 클릭된 것을 사용해야 한다."가이드를 찾았더니이벤트 파견 방법.이것을 사용하면 돌부터 바둑판, 그리고 게임의 클릭 알림까지 다음과 같이 쓸 수 있다.
fliptrip-vue.발췌하다

  Vue.component('stone', {
    methods: {
      handleClick: function() {
        this.toggle = !this.toggle;
        this.$emit('stone-click', this.index);
      }
    },
    template: `
      <div class="stone-wrapper">
        <div
          class="stone"
          v-bind:class="classObject"
          v-on:click="handleClick"
        />
      </div>
    `,

  Vue.component('board', {
    methods: {
      handleClick: function(i) {
        this.$emit('stone-click', i);
      }
    },
    template: `
      <div className="board">
        <stone
          v-for="stone in stones"
          v-bind:key="stone.key"
          v-bind:index="stone.index"
          v-on:stone-click="handleClick"
        ></stone>
      </div>
    `

  Vue.component('game', {
    methods: {
      handleClick: function(i) {
        // 反転、履歴への積み、勝ち負け判定
      }
    },
    template: `
      <div class="game">
        <board
          v-bind:number="number"
          v-on:stone-click="handleClick"
        />
        <div class="message">
          {{ message }}
        </div>
      </div>
    `

React의 경우 이벤트 처리 프로그램의 속성을 전달했는지 조사한 후에 불러야 하지만 이 구조라면 전달하지 않아도 이벤트만 무시할 수 있기 때문에 안전합니다.

number 재대입 시 돌 수량 증가 처리

단순 이식물app.number = 4이라면 돌의 수량도 Reactive가 되지 않았지만 문서를 읽으면 Reactive의 방법을 알 수 있다.
원래의 설치에서 아래와 같은 number에서 데이터로 제작stones한다.그러면 숫자가 바뀌어도 스톤스는 바뀌지 않는다.
friptrip-vue.수정 전 발췌

  Vue.component('board', {
    props: ['number'],
    data: function() {
      const stones = [];
      for (let i = 0; i < this.number; i++) {
        stones.push({index: i});
      }

      return {
        stones: stones
      };
    },
    template: `
      <div className="board">
        <stone
          v-for="stone in stones"
          v-bind:key="stone.index"
          v-bind:index="stone.index"
          v-on:stone-click="handleClick"
        ></stone>
      </div>
    `

스톤스를 만든 것은 v-for가 요소의 중복일 뿐 색인을 쓸 수 없는 중복이라고 생각했기 때문이다사실 괜찮아요..
정수 순환을 사용하면 간단하게 다음과 같이 쓸 수 있다.
frriptrip-vue.html 수정 후 발췌

  Vue.component('board', {
    props: ['number'],
    template: `
      <div className="board">
        <stone
          v-for="i in number"
          v-bind:key="i"
          v-bind:index="i"
          v-on:stone-click="handleClick"
        ></stone>
      </div>
    `

이렇게 하면 돌의 수가 바뀌지만, 반드시 게임 상태를 리셋해야 한다.사용세척기.
frriptrip-vue.html 수정 후 발췌

  Vue.component('game', {
    props: ['number'],
    watch: {
      // reset game state when number is reassigned
      number: function(newNumber, oldNumber) {
        const stones = Array(newNumber).fill(false);
        this.history = [stones.slice()];
        this.fulltrip = this.error = false;
      }
    },

그리고 돌도 모두 하얗게 변해야 한다.$children를 사용하여 설치할 수 있습니다$children을 사용하지 마십시오.이.만약 네가 더 좋은 방법을 찾게 된다면, 나는 다시 쓰고 싶다.
frriptrip-vue.html 수정 후 발췌

  Vue.component('board', {
    props: ['number'],
    watch: {
      // reset stone state when number is reassigned
      number: function(newNumber, oldNumber) {
        for (let c of this.$children) {
          c.toggle = false;
        }
      }
    },

끝내다

따라서 우리는 React와 Vue에서 비밀 주석/비트와 이진법 소개의 전환을 실현했다.Vue를 처음 보는 건데 재미있더라고요.
그렇다면 자유행이지만 필승법이 있다.저기... 직접 읽어보고 확인하세요(웃음).
https://note11.hyuki.net/
이력서의 뜻은 다르지만  ↩
문서를 부른 게 아니라 개발자 도구 inspect로 "아, 이거 쓸 수 있어요"를 찾았어요(웃음)↩