2019.09.12 추기
나중에 담화(외부 블로그) 썼어요.
결국 어느 초보자든 하루 만에 베일을 하게 된다.js를 배우면 어느 정도 이해할 수 있습니까?과거의 계획을 되돌아보다

Vue.js 1 Day BootCamp!

안녕하세요!덮밥@don-bu-rakko.
지금 내가 다니는 프로그래밍 학교 주위는 모두 Vue이다.나는 끊임없이 js를 배우기 시작했다.결국 동료들이 말하는 내용을 몰라 하루하루를 힘들게 보냈다.
이런 상태는 안 돼!
그래서 저도 베입니다.나는 js를 열심히 공부하기로 결심했다.
하지만 제 성격은 덥고 춥습니다.
거기서 생각했어.
하루에 어느 정도 이해할 수 있는 게임을 하자!
그래서 하루도 스케줄 없이 혼자 Vue.js 캠핑 시작.도전을 해봤는데 어느 정도 이해가 되는지!
이 Qita는 그때 어떻게 공부했는지, 실제 사용한 자료의 총결산이다.
처음js를 배우는 여러분의 학습 원가감을 측정하는 목표가 되었으면 좋겠습니다!

내 자바스크립트 레벨

그나저나 제 JS 등급은 이렇습니다.

지난해 10월부터 프로그래밍 학교를 열심히 공부했다.4개월이야.

jQuery가 건드렸어요.

Vue.js? 그게 무슨 맛있는 거예요?

결론

할 수 있는 일

개념의 파악(Vue.js의 디자인 사상)

간단한 To Do 어플리케이션을 만들기 전에 0부터 조립

여기서 공개됐습니다.
https://cha1ra.github.io/croll-youtube-programming-movie/index.html

거꾸로 말하면, 이 기사에 쓴 자료만 읽으면 적어도 이런 물건을 만들 수 있다!잘 됐다!
※ 이번엔 뒷면에 아무것도 설치되지 않아, 다시 장착하면 데이터가 사라집니다.
따라서 실제 진행된 학습 자료는 다음과 같다.

해본 일

1. Vue.js의 전체감을 잡다

성인 프런트엔드 입문 Vue.미래 회의실

어떤 문법에 대한 해설과 수법이 있기 때문에 실제로 손을 움직이면서 공부할 수 있다.이게 없으면 보통 처음부터 걸려서 넘어진 걸로 알고 있어요.고맙다
두 애니메이션이 4시간 차이 나는 초대형 작품이 많지 않은데, 해즈를 위한 대기 시간도 애니메이션에 수록돼 1.5배의 속도로 보는 것도 딱 좋다.

Youtube

슬라이드 쇼

Youtube

슬라이드 쇼

PHP Conference 2016 Track 7 (3) PHper의 Vue입니다.엔트리 및 Vuejs2.0의 미래

위 영상(성인 전단입문 Vue.js편@미래회의실)을 보고 봤습니다.이것도 1.5배 속도다.
Vue.js의 전체감은 예를 섞으면서 이야기를 나누기 때문에 위의 영상을 통해 얻은 지식을 머릿속에 효과적으로 연결시킨다!타조 클럽의 비유 수일!!
후반부는 아직 경험해보지 못한 부분이기 때문에'이런 말이 있나'정도는 돼야 한다.
※ 2년 전 애니메이션이기 때문에 정보의 신선도에 주의할 필요가 있습니다.

Youtube

슬라이드 쇼

2. 공식 문서 읽기

다행히 일본어가 녹아서 계속 읽게 됐어요.위의 애니메이션을 보면 전제 지식이 있는 상태에서 읽을 수 있기 때문에 처음부터 순조롭게 진행될 것이라고 생각합니다.후반부에 가면 점점 힘들어져요.
구성 요소 세부 정보를 사용자 지정 이벤트로 이동하기 전에 읽기를 중지한 다음 구현을 시작하는 것이 좋습니다.
비결은 양이 많아 처음부터 100% 이해하기 싫기 때문이다.어차피 기억이 안 나니까 장별 개념만 이해하면 OK, 난 그냥 계속 읽었어.

주의해야 할 일

인스턴스 속성에서는 ARO 함수를 사용할 수 없습니다!

인스턴스 속성이나 콜백에 Arro 함수를 사용하지 마십시오.예를 들어,create: () = > console.log(this.a) 및 vm.$watch('a’,newValue=>this.myMethod()).Arro 함수는 부모 상하문의 제한을 받아서this는 예상한 대로 Vue의 실례가 될 수 없으며, 항상 Unncaught Typererererererererererere: Cannot read propertyof undefined 또는 Unncaught Typerererererererererererererererererererererere:this에 있습니다.myMethod is not a function 등의 오류가 발생했습니다.

라이프 사이클

에서 발췌 https://jp.vuejs.org/v2/guide/instance.html
실례 속성이 언제 호출되는지 알 수 있습니다.
기억해야 해!

3. 실제로'자기 생각'으로 작품 완성

위의 학습이 끝났을 때 실제로 스스로 생각하고 작품을 만들었다.
이'자기 사고'의 부분은 매우 중요하다.단지 견본을 베끼기만 하면 뇌를 사용하지 않아도 완성할 수 있다.
역시 머리로 이해하는 것과 실제로 하는 것은 전혀 다르다.
나는 특히 조립식 사고의 실천에 집중했다.
학교 동기들이 "어디를 부분화해야 할지 모르겠다"고 했지만 그렇다.
예를 들어 처음에 나는 조립품으로 카드를 만들고 싶었다.
index.html

<div v-for="(card, index) in cards" :key="card.id" class="col s12 m4">
  <movie-card :content='card'></movie-card>
</div>

main.js

Vue.component('movie-card', {
  props: ['content'],
  data: function () {
    return {
      date: new Date(),
      title: 'My Title'
    }
  },
  methods: {
    embId: function () {
      return 'https://www.youtube.com/embed/' + this.content.url.split('=')[1]
    }
  },
  template: `
    <div class="card">
      <div class="card-image">
        <iframe width="100%" height="auto" v-bind:src="embId" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <div class="card-content center">
        <p>Update: {{content.date | date-filter}}</p>
      </div>
      <div class="card-action center">
        <a class="waves-effect waves-light btn" v-bind:href="content.url" target="_blank">
          YouTube
        </a>
        <a v-on:click.native="removeCard(content.id)" class="waves-effect waves-light btn">
          <i class="material-icons">delete</i>
        </a>
      </div>
    </div>
    `

그러나 이 결과는 구성 요소에서 뒤죽박죽으로 일하기 때문에 보기 어렵다.이렇게 쓰면 HTML이 필요 없어요.
결국 이런 작법으로 냉정해졌다.
index.html

<div v-for="(card, index) in cards" :key = "card.id" class="col s12 m4">
    <div class="card">
        <div class="card-image">
            <iframe width="100%" height="auto" v-bind:src="embId(card.url)" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div class="card-content center">
            <p>Update: {{card.date | date-filter}}</p>
        </div>
        <div class="card-action center">
            <a class="waves-effect waves-light btn" v-bind:href="card.url" target="_blank">
            YouTube
            </a>
            <a v-on:click="removeCard(index)" class="waves-effect waves-light btn">
                <i class="material-icons">delete</i>
            </a>
        </div>
    </div>
</div>

main.js

const vu = new Vue({
  el: '#app',
  data: {
    url: '',
    cards: [ /*..(中略)..*/ ]
  },
  methods: {
    embId: function (key) {
      return 'https://www.youtube.com/embed/' + key.split('=')[1]
    }
  }
})

솔직히 어떤 글쓰기가 좋을지 나는 아직 판단을 내리지 못했다.

앞으로 공부를 추진해보고 싶은 부분.

이상은 안내캠프에서 실시한 것이다.아직 이해 못 할 게 많지만 먼저 움직일 수 있다는 게 만족스럽다.그리고 저는 반복적인 출력을 통해 Vue의 디자인 사상을 제 마음속에 담고 싶습니다.
앞으로의 학습적 의미에서 제가 가장 알고 싶은 것은 실제 현장 디자인의 Vue입니다.js의 원본 코드를 보십시오.위에도 썼어요, Vue.js에는 각양각색의 문법을 쓸 수 있다.자유도가 높은 것이 이 프레임의 장점이지만 거꾸로 보면 자신의 작법이 디자인 사상에 맞는지 확인할 수 없다.그쪽 자료와 위에 적힌 코드에 대한 댓글이 있다면 댓글을 받을 수 있다면 좋겠습니다m()m
또 학교 동기생@guru_taka은 "Vue.js 혼자서 개발하는 것은 무의미하다"고 말했다.기초 학습의 단계에서 한 사람도 할 수 있지만 구성 부분의 사고는 각 부분을 하나의 부분으로 이해하고 팀 개발에 적합하다.여러 사람의 개발을 체험하고 싶군요.
또 자신이 배워야 할 항목을 열거한다.

백엔드 측과의 협력 방법

탭의 전환 방법, 한 페이지의 제작 방법

이번에 해결되지 않은 의문의 해결

왜?js는 HTML에 많은 것을 쓸 수 있습니까?

잘 쓰여졌지만<li v-for="item in list"> ...</li> 또는<myComponent> </myComponent> 왜 이렇게 썼을까요?

저는 Virtual DOM을 깊이 파고들어야 답을 얻을 수 있다고 생각합니다

Vue.js 설정 방법

특히 PHPCon의 등단자가 말하는 독립판과 란시빌딩판의 차이는 무엇일까.앞으로 자신도 Vue를 해야 한다.처음부터 js를 구축했을 때, 즉!

사건 수식자는 무엇입니까?

https://jp.vuejs.org/v2/guide/events.html

최후

너무 무서워하지 말라는 느낌이 든다.앞으로 많은 어려움을 겪게 될 것입니다. 몇 번의 좌절감을 느낄 수 있는 기회가 있을 것입니다. 적어도 도입 부분에 관해서 공부를 결심하면 적어도 이런 것들을 습득할 수 있습니다.
앞으로도 이 세상에서 살아남고 좋은 일만 하고 정신으로 노력하자!!
이'제로지식부터~'시리즈는 자신에게 맞는 것 같아서 다른 지식을 다시 배울 수 있는 기회를 만들겠습니다.Qita에 다시 투고할 예정이니 꼭 봐주세요~