router

어제 했던 것을 정리해보자

http://www.naver.com : url 이렇게 메인페이지 같은 것이 홈 컨포넌트이고 여기서 다양한 메뉴들이 있다. 예를 들어 네이버에서는 카페가 있고, 스포츠, 블로그 등등 파생된 컴포넌트들이 있는데 이걸 연결해주는 것이 router이다.

여기서 네이버 홈은 홈컴포넌트이고 파생된 애들이 컴포넌트라고 한다.

주소에 따라서 어떤 페이지를 보여줄 지 정하는 태그가 router이다.
이걸 정할때는 뷰에서 규칙을 미리 정해뒀는데 그 규칙을 따라 해주면된다.

a말고 router을 사용하는 이유

router링크가 a태그보다 성능이 빨라서 뷰에서 이걸 사용

a는 페이지 이동시 모든 태그를 새로 만들음 (html한장을 모두 다시 실행한다 )

근데 router은 불러와야하는 링크만 새로 만들기때문(부분 새로 고침)에 고치지 않을 것들은 나두어서 필요없는 실행은 줄인다.

예를 들어 머리말과 꼬리말 같은 경우는 잘 바뀌지 않는다. 그런데 본문은 보여줘야할 데이터들이 수시로 바뀌기 때문에 바꿔줘야 할 필요가 있다. 이때 router로 본문만 바꿔주는 것이 페이지 전체를 다시 실행하는 것보다 효율적이다.

<router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>

   <!--<a href="/home">home</a>|
    <a href="/about">about</a> 이렇게 코딩할 수도 있지만 성능이 안 좋음-->

이런 이유로 a태그보다는 router를 사용한다.

router 지정

그럼 이 router 어떻게 지정해줄까?
왼쪽 탭에 router폴더에 js파일에 들어가면 확인이 가능하다.

저기 빨간색으로 표시한 곳에 연결해줄 컴포넌트를 넣어주면 된다.
저 부분은 객체가 배열에 들어가 있는 형태로 되어있는데 객체하나당 하나의 컴포넌트들이다.

path속성에는 component의 url을 넣어주면되고, name속성은 생략이 가능하다. 그리고 component속성에 연결하고 싶은 component의 파일경로를 입력해주면된다.

파일경로를 입력하는 방법은 2가지가 있는데 하나는 import를 사용하여 연결한 후 component자리에 이름만 적어주거나, component자리에 직접 import함수를 사용해 파일경로를 적어주는 방법이 있다. 두번째 방법이 성능이 좋아서 두번째 방법을 지향하는 것이 좋다.

component와 router

자주바뀌지 않는 거(머리말, 꼬리말)는 component파일에서 만들고 태그로 연결

자주 바뀌는 것(본문)은 views에서 만들고 router-link로 연결

router app.vue 연결위치

이제 router연결은 잘 했는데 이것의 위치를 어떻게 지정할 수 있을까?

빨간박스의 router-view태그의 위치가 router의 위치이다.

보통 router은 본문으로 header와footer사이의 위치에 놓아주면 될거같다.

여기서 헷갈릴수 있는게 링크 버튼이 저기에 뜨는게 아니라 버튼을 눌렀을 때 나오는 화면이 저기에 뜨는 것이다. 버튼은 router-link태그위치에 뜨게 된다.

새로 만든 컴포넌트 App.vue에 나타내기

새로운 컴포넌트 views에서 만들기

안녕이라는 말이 나오도록 코딩을 했다. template에 바로 안녕이라고 적어도 되지만 하드코딩을 지양하기에 js에 hello라는 속성을 만들고 거기에 안녕이라는 값을 주고, hello속성을 template에 넣어주어 안녕을 화면에 띄울것이다.

컴포넌트 router로 연결하기
path에 url을 넣어주었고, component에 경로를 넣어주었다.

app.vue에 router-link넣어주기
"to = "/binding""을 해주어서 BindingView.vue를 연결해주었다.

결과binding버튼이 생겼고 안녕이라는 말이 잘 출력된 것을 확인할 수 있다.

template에 js속성으로 태그 넣기

태그를 추가하고 싶은데 이걸js에서 속성을 주어 할 수 있는지 확인하기 위해 태그를 값으로 갖는 속성을 만들어주었다.

결과는 태그로 인식하지 않고 이것을 문자열 그대로 인식해서 다음과 같이 출력이된다.

그럼 할 수있는 방법은 없을까?

v-html이라는 속성을 이용하여 속성값에 message 속성을 주면된다. 그런데 이때 html태그(그림에서는 span)를 하나 만들어주어야한다.

안녕하세요가 태그로 인식되어 나왔다.

html속성 바인딩

html속성에 바인딩 방법

html속성에 vue의 바인딩 속성을 사용해보기
콧수염태그없이 태그를 이용해 거기에 vue의 속성을 맥이고 싶을 때가 있을 수도 있다.

js에 속성을 준다음 이 속성을 html태그의 id와 class에 넣어보았다. 이때 제일 앞에 ":"을 넣어주어야한다. 이것은 v-bind:에서 v-bind가 생략된 것으로 둘 중 아무거나 사용하면된다.

이렇게 되면 첫 p태그의 id값은 10이 되고 두번째p태그의 class값은 container가 된다. css속성을 주는 방법과 같다.

style바인딩

style은 js에 속성을 주는게 아니라 객체형식으로 주어야한다.

결과

button 활성화 비활성화 바인딩

button에 활성화 비활성화를 js에서 조절하고 싶으면 다음과 코딩한 뒤 js에서 속성값을 true와 false로 조절해주면된다. true이면 비활성화가 되거 false가 되면 활성활가 된다.

html속성에 문자열 붙이기

그림과 같이 속성에도 문자열 붙이기가 가능하다. 특이점은 문자열을 표시할때 쌍따옴표가 안되고 홑따옴표만 사용할 수있다.

이미지 바인딩

다 똑같은데 img를 바인딩하려면 그림과 같이 require함수를 사용해야하는 차이만 있다.

입력양식 바인딩

input태그를 js와 바인딩 하려면 다른 태그들과는 다르게 :이 아닌 v-model을 사용해주어야한다.

js의 속성값에 값을 넣어주면 이 값이 text상자에 값에 나타나게 된다.
반대로 text상자의 값이 변경되어도 js의 속성값도 자동으로 변경된다.

vue에서의 조건문과 반복문

조건문

조건식이 참이면 태그가 화면에 보이고 거짓이면 화면에 보이지 않음

v-if로 조건을 주어 태그를 없애고 생기게 할 수 있다.first의 속성값은 false이므로 1st p태그가 사라졌고 second속성은 true이므로 두번째 태그는 보이고 두개 중 하나가 참이었으므로 세번째 태그는 보이지 않는다.

반복문

보통 list찍을때 배열에 넣고 여러개 찍는다. 또 여러개의 컴포넌트를 만들때도 반복문을 사용할 수 있다.

사용법은 data,index는 배열의 값과 배열의 순서를 의미한다.
배열을 in뒤에 넣어준다. 영어로 해석해보면 배열 안의 data를 순서(index)대로 반복한다는 뜻이다. 그리고 출력할 자리에 {{data(배열의값)}}을 넣어주면된다.

함수

이벤트가 있을때 해당 요소에 디자인이나 특정 기능이 실행하게 할때 사용할 수 있다.
함수는 다른 것과 다르게 data안에 적는게 아니라 밖에 적는다. 이런걸보면 data는 함수였던것이다. 그리고 function은 안 적어도 되고 바로 함수의 이름을 적고 시작하면된다.

호출은 @속성="함수이름"을 해주면 된다.

느낀점

자주바뀌지 않는 거(머리말, 꼬리말)는 component파일에서 만들고 태그로 연결자주 바뀌는 것(본문)은 views에서 만들고 router-link로 연결하면된다. 그리고 태그에 js를 바인딩할때 모두다 똑같은 방법으로 바인딩을 하는 것이 아니라 함수, 조건문, 반복문, style... 다 각자의 방법이 있어서 이건 정리가 따로 필요할거 같다. 다음에 방법이 기억나지 않을때 블로그에서 쉽게 찾으면 좋을거 같다.