npm run serve 키고 하자
localhost:8080/test에 접근을 할수 있도록 하였고, Test.vue파일에 입력한 test vue
문자열이 브라우저에 나타남을 확인한다.
어떤 화면이든 상관없이 App.vue를 통하게 되어있다.
spa : single page application
아래 코드중 두줄은 결과는 비슷하나 과정이 다르다.
href는 re-load기능이다. 클릭 시 마다 데이터를 새로 가져온다. 웹에 데이터가 많을 수록 느릴 수 밖에 없다.
router-link는 처음 필요한 데이터를 받아 놓고 링크 탈 때마다 필요한 데이터만! 받아오는 형식
<router-link to="/test">Test</router-link>
<a href="/test">전체 리로드</a>
.vue파일을 만들고 vbase를 자동완성으로 입력한다.
아래 코드 작성후 /test 진입
/about 진입
vue에서는 별도의 노력 없이 데이터를 실시간으로 바인딩 할 수 있다.
v-model이라는 속성으로 title이라는 변수를(객체를) 바인딩 한다.
html scope 즉 <h1>binding test{{ title }}</h1>
부분에서 {{ }}
는 변수를 사용하는 것이다. title변수를 html에서 사용.
return{} 변수가 출력되지 않을까?
※아래 사진에서 modeol
-> model
로 변경 필요
키보드 이벤트 만들자!
키보드 이벤트는 3가지가 있다.
computed test위해 아래와 같이 라우터 추가 한다.
.vue파일을 만들고 vbase를 자동완성으로 입력한다.
computed가 특이한게 함수를 변수 취급한다.!!
이상한점이 있다..
button
을 눌렀으나 button
에는 a++
만 있다. a
가 증가한 것과 addToA
함수와 무슨 상관 인가?
이게 바로 computed
의 힘이다.
computed
가 실시간으로 data 변화를 감지해서 알아서 리턴해주는 것이다.
예시 카카오톡 검색기능 사용하면 이모티콘이 늦게 로딩되는 경우가 있다.
method
사용할 경우 페이지 로딩 전에 해당 이모티콘 로딩 권한이 없어서 페이지 로딩 완료후 이모티콘 로딩을 안시키게 된다.
computed
사용할 경우 이모티콘이 최상단에 있지만 이미 로딩순서를 지나쳤더라도 나중에 해당 권한이 나오면 그때에 실시간 로딩되도록 시킬 수 있다.
차이점 | method | computed |
---|---|---|
동작 시점 | 함수를 호출했을 때(수동) | 페이지가 로딩될 때(자동) |
전달 인자 | 세팅 가능 | 세팅 불가 |
리턴 값 | 리턴값이 없어도 됨 | 리턴값이 반드시 필요함 |
if
문과show
문을 사용하여 특정 조건일 때 해당 노드를 제어할 수 있다.
v-if
는 해당 노드 자체가 실제로 나타나거나 사라지는 반면
v-show
는 해당 노드의style
속성에서display:none
값으로 제어 한다.
(브라우저의 개발자 모드에서 확인할 것)
toogle 버튼에 따라 true/false가 switch될 것이다. 그에 따라 error/success 상태 변화가 생기도록 할 것이다.
우선 v-if,v-show
차이를 보자 브라우저 Elements
를 보면 알 수 있다.
v-if
를 사용했기 때문에 두개 조건 중 포함 안되는 것은 걸리지 않는다.
최종 v-if/v-show
구문 작성 방법을 이해하자
만약 null
조건으로 설정하면 아예 조건문 { }
내용에 접근 못하고 나갈 수도 있다.
null
을 false
로 취급할 것인지 아닌지 예외처리가 필요하다.
if(active === null) { ~ }
for
문을 이용해 반복 처리를 할 수 있다.
참고 :key 속성은 필수 이며 전체 노드로 부터 유일해야 한다. (이것이 지켜지지 않는 경우 [Vue warn]: Duplicate keys detected에러가 나타난다.)
(:key는 v-bind:key(바인드 변수)를 의미 한다.)
index
를 인자로 하면 0부터 인덱스 값을 입력해준다.(자동순번)
앞에는 단수 뒤에는 복수 또는 list
를 추가하여 작성해야 for
문 해석이 상당히 편해진다.
for
문에서 사용할 변수로 2개 fruit
를 맞춰준것 뿐이고 당연히 abc
로 작성해도 된다. 나중에 해석이 문제일뿐
key
값으로 유일무이한 값을 새로설정해서 넣어줘야한다. 사실${index}
로만 작성해도 된다. 하자만 유일무이 해지기 힘들다. fruit
도 있고, user
도 있기 때문이다.fruit-${index}
로 입력하면 해당 page
내에서는 유일무이하게 될 것이다.
index를 동일하게 쓸경우 duplicate가 발생한다. 이게 뭐지
mixin을 활용하면 전역변수나 전역메소드 같은 효과를 줄 수 있다.
다음과 같은 mixin파일을 생성한다. (위치나 이름은 자유롭게 설정할 수 있다.)
import 할때 @/components/mixin/commonMixin와 같이 @를 사용하면 현재 서버의 절대 경로를 사용하게 된다.
화면 출력(mixin Test)과 콘솔 출력(This is mixin method)을 확인 할 것.
부트스트랩이란 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 css와 javascript로 만들어서 사용하기 쉽도록 제공하는 라이브러리이다. (부트스트랩을 이용한 상용 디자인 프레임워크도 많이 있다.)
vue에서Bootstrap
를 사용해 보자.
다음과 같이bootstrap-vue
를 설치 한다.
npm install하면 화살표 위치와 같이 저장된다.
TestBootstrap.vue를 확인해 보자 끝내주는군!