정규표현식 /movie로 시작하는 경로를 일치시킨다.

path:/^\/movie/

 

정규표현식 true와 false로 test( ) 하기

path에 들어있는 문자와 this.$route.fullPath에 들어있는 문자를 test()메소드를 통해 두개를 비교후 같으면 true 다르면 false가 나온다.

 

이미지 로드 아이콘 생성

Loader.vue로 로딩모양을 만든뒤 import하여 components에 넣고 data로 imageLoading을 true 주어 Loader.vue에 v-if로 항상 로딩되고 있도록 설정한다.

 

2. plugin에 만든 loadImage가 init에 의해 초기화시작을 하도록 설정하여 mounted로 코드가 시작되면 실행되도록 설정한다 그리고 $loadImage에 인자로 image를 넣는다.
3. plugin안에 loadimage가 app인자로 image를 받아 load가 되면 resolve로 이행 하여 methods의 init에서 true값을 받아 this.imageLoading을 false로 설정하여 로딩을 끝낸다.

고해상도 이미지변경 methods

theMovie.poster가 url로 들어가 SX300인 부분이 SX700으로 변경된다.

클래스 바인딩을 통해 특정 값에 의해 class가 추가되는것을 설정할 수 있다.

movies.length로 영화에 값이 ! 없으면 no-result라는 클래스가 추가된다.

삼항 연산자

id값이 있을시 ? 구문 없을시 :구문이 선택된다.

movie/tt123123 등 영화상세정보페이지 만들기

props 연결 구조

+ Recent posts