소개

최근 Vue.js의 학습을 시작했기 때문에, 아웃풋이 테라도 ToDo 리스트를 작성해 보았습니다.
※프로그래밍의 공부를 시작해 3개월 정도이므로 돌진 커녕 있으면 교수 받을 수 있으면 다행입니다.

직접 만든 ToDo 목록

다음은 자신이 만든 ToDo 목록입니다.

자작 ToDo 목록
공부하자면 디자인에는 Bootstrap을 사용해 보았습니다.

참고

참고로 해 주신 것은 이하의 튜토리얼입니다.
ToDo 목록을 만들면서 학습합시다!

개인적으로는 Vue.js를 배우는데 몹시 신세를지고 있는 책(통칭 고양이 책)입니다.

Let's 어레인지

어레인지가 가타카나가되어있는 것은 멋지다. (센스···)

본 튜토리얼에서는, 상태가 완료와 착수중의 2 패턴의 전환이 되어 있는 곳을,
어레인지 정신으로 3 패턴의 전환으로 하고 싶다고 생각 보류를 추가해 보았습니다.

구체적으로 변경한 곳은 2점.

①사용하는 데이터를 추기

변경 전

main.js

  data: {
    todos: [],
    current: -1,
    options: [
      { value: -1, label: 'すべて' },
      { value: 0, label: '作業中' },
      { value: 1, label: '完了' }
    ]
  },

⇓⇓⇓

변경 후

main.js

  data: {
    todos: [],
    current: -1,
    options: [
      { value: -1, label: 'すべて'},
      { value: 0, label: '着手'},
      { value: 1, label: '完了'},
      { value: 2, label: '保留'}
    ]
  },

※ 개인적으로 취급하기 쉽도록 숫자를 변경하고 있습니다.

②메소드 변경

main.js

    doChangeState: function (item) {
      item.state = !item.state ? 1 : 0
    },

⇓⇓⇓

변경 후

main.js

    doChangeState: function(item){
      if(2 > item.state){
        item.state = item.state + 1
      } else {
        item.state = 0
      }
    },

삼항 연산자에서 조건 분기로 변경했습니다.

JavaScript 초보자이므로 삼항 연산자라고 알 때까지 엄청 이해에 시달렸습니다.
(좀 더 기초를 배운 편이 좋은 것은 틀림없다···)

보충

삼항 연산자는 다음과 같이 조건식이 true이면 식 1을 false이면 식 2를 반환합니다.

条件式 ? 式1 : 式2 

요약

라라벨을 배우는 가운데 프론트 사이드에서 Vue.js를 사용해보고 싶어지고 배우기 시작했습니다.

양 FW 모두 다양한 튜토리얼이 있습니다만, 어레인지~자작 포트폴리오 완성까지는,
확실히 하나 하나의 스크립트의 의미를 이해해 나가야 한다고 통감했습니다.

계속 출력하면서 학습을 해 나가고 싶습니다.
졸린 출력입니다만 누군가의 참고가 되면 다행입니다.