Vue.js 실습파일 따라할것

테스트 페이지 만들기

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>

Life-cyle-Hooks

life cyle test

.vue파일을 만들고 vbase를 자동완성으로 입력한다.
아래 코드 작성후 /test 진입

/about 진입

Data binding

vue에서는 별도의 노력 없이 데이터를 실시간으로 바인딩 할 수 있다.
v-model이라는 속성으로 title이라는 변수를(객체를) 바인딩 한다.
html scope 즉 <h1>binding test{{ title }}</h1>부분에서 {{ }}는 변수를 사용하는 것이다. title변수를 html에서 사용.
return{} 변수가 출력되지 않을까?
※아래 사진에서 modeol -> model 로 변경 필요

event, method

• event test위해 아래와 같이 라우터 추가 한다.
  .vue파일을 만들고 vbase를 자동완성으로 입력한다.
  
  

• 버튼을 만들어 누를 때마다 1살씩 많아지는 버튼을 만들었다.
  

• 빼기도 가능하다.
  

• 이벤트 조건을 더블클릭으로 설정하고 10살 추가로 만들었다.
  

• once조건으로 한번만 실행되게끔만 하면 된다.
  

• 콘솔 프린터를 만들자!
  

• 마우스 추적 이벤트 만들자!
  

키보드 이벤트 만들자!
키보드 이벤트는 3가지가 있다.

• 눌렀을 때, keydown
• 누르고 땠을 때, keypress
• 누르고 있을 때, keyup
  

method vs computed

computed test위해 아래와 같이 라우터 추가 한다.
.vue파일을 만들고 vbase를 자동완성으로 입력한다.
computed가 특이한게 함수를 변수 취급한다.!!

이상한점이 있다..
button을 눌렀으나 button에는 a++만 있다. a가 증가한 것과 addToA 함수와 무슨 상관 인가?
이게 바로 computed의 힘이다.
computed가 실시간으로 data 변화를 감지해서 알아서 리턴해주는 것이다.

차이점

예시 카카오톡 검색기능 사용하면 이모티콘이 늦게 로딩되는 경우가 있다.
method사용할 경우 페이지 로딩 전에 해당 이모티콘 로딩 권한이 없어서 페이지 로딩 완료후 이모티콘 로딩을 안시키게 된다.
computed사용할 경우 이모티콘이 최상단에 있지만 이미 로딩순서를 지나쳤더라도 나중에 해당 권한이 나오면 그때에 실시간 로딩되도록 시킬 수 있다.

v-if, v-show

if문과 show문을 사용하여 특정 조건일 때 해당 노드를 제어할 수 있다.
v-if는 해당 노드 자체가 실제로 나타나거나 사라지는 반면
v-show는 해당 노드의 style속성에서 display:none값으로 제어 한다.
(브라우저의 개발자 모드에서 확인할 것)

toogle 버튼에 따라 true/false가 switch될 것이다. 그에 따라 error/success 상태 변화가 생기도록 할 것이다.

• 우선 v-if,v-show차이를 보자 브라우저 Elements를 보면 알 수 있다.
  v-if를 사용했기 때문에 두개 조건 중 포함 안되는 것은 걸리지 않는다.
  
  

• v-show는 둘다 표시가 된다.
  

• 최종 v-if/v-show 구문 작성 방법을 이해하자
  만약 null조건으로 설정하면 아예 조건문 { }내용에 접근 못하고 나갈 수도 있다.
  null을 false로 취급할 것인지 아닌지 예외처리가 필요하다.

if(active === null) { ~ }

v-for

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을 활용하면 전역변수나 전역메소드 같은 효과를 줄 수 있다.
다음과 같은 mixin파일을 생성한다. (위치나 이름은 자유롭게 설정할 수 있다.)
import 할때 @/components/mixin/commonMixin와 같이 @를 사용하면 현재 서버의 절대 경로를 사용하게 된다.
화면 출력(mixin Test)과 콘솔 출력(This is mixin method)을 확인 할 것.

• vue에서 쓰는 절대 경로는 @를 쓴다.
  

• 아래와 같이 효과가 있다.
  

Bootstrap-vue

부트스트랩이란 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 css와 javascript로 만들어서 사용하기 쉽도록 제공하는 라이브러리이다. (부트스트랩을 이용한 상용 디자인 프레임워크도 많이 있다.)
vue에서 Bootstrap를 사용해 보자.
다음과 같이 bootstrap-vue를 설치 한다.

npm install하면 화살표 위치와 같이 저장된다.

• boot에서 layout잡아주는 코드
  

TestBootstrap.vue를 확인해 보자 끝내주는군!

camelCase/kebab-case/snake_case/PascalCase