네발로 코딩하는 포메라니안

1. vue-cli 프로젝트 구조 .vue(컴포넌트)가 views 폴더와 components 두 군데에 분리되어 있는 것을 볼 수 있다. views = router의 컴포넌트, components = 컴포넌트의 컴포넌트라고 할 수 있다. 실행할 때는, 여러 파일에 작성된 코드를 webpack으로 index.html이라는 하나의 파일로 만들어 실행한다. 따라서 각 파일의 .vue 파일은 Component 하나당 파일 1개로 구현할 수 있도록 한다. template, js, css 코드를 하나의 파일로 작성하여 Component 하나를 만들 수 있다. 이를 SFC(Single File Component)라고 한다.

* v-on: == @ 1. 이벤트 수식어 1. @click.stop - 클릭 이벤트의 전파(Bubbling)를 막음 - stopPropagation()과 같음 예시) action1은 실행되지만, action2는 실행되지 않음 버블링 막기 +) stopPropagation() 사용 더보기 버블링 막기 2. @click.prevent - "기본" 이벤트의 자동 실행을 막음 ex) a태그 = 페이지 이동, form태그 = submit - preventDefault()와 같음 예시) action 메서드는 실행되지만, 페이지 이동은 일어나지 않는다. 네이버 +) preventDefault() 사용 더보기 네이버 - 두 가지 동시에 사용 가능 이동하기 - 메서드 없이, 수식어만 사용 가능 이동하기 2. 키 수식어..

1. 중첩된 라우터란? 라우터가 Component들을 전환하는 구간 안에, 또 라우터가 전환하는 구간이 있는 구조를 말한다. 아래 그림에서 Router1에서는 Main화면, Board화면을 바꿔주며, Router2에서는 Board안의 List, Detail 등으로 Component를 전환시켜준다. 2. 중첩된 라우터 구현 1. 파일 구성 *app.js = html에서 script코드를 분리한 것으로, router설정이 있음 2. Components 코드 1) test.html 더보기 HOME | 게시판 2) Main.js : 홈 화면 더보기 export default { template:`메인 페이지`, } 3) Board.js 더보기 export default { template: ` 게시판 페이지 `..

이전글 2022.05.13 - [웹프로그래밍/Vue] - [Vue] 10. Vue Router 기초 [Vue] 10. Vue Router 기초 1. Vue Router란? Single Page Application(SPA)를 구현하려면, 한 페이지에서 Component들만 교체해주면 된다. /a => /b로 변환될 때, router를 통해 전체 화면을 구성하는 Component를 바꿈으로써 페이지 이동을.. yerinpy73.tistory.com 이전글의 코드를 보면 테스트를 위해 한 component의 template을 짧게 작성하였다. 하지만 상용소스는 이보다 훨씬 길기 때문에, 한 파일에 모든 component를 작성한다면 복잡해진다. 각 Component마다 하나의 파일로 분리해서 작성해보자. 1..

1. Vue Router란? Single Page Application(SPA)를 구현하려면, 한 페이지에서 Component들만 교체해주면 된다. /a => /b로 변환될 때, router를 통해 전체 화면을 구성하는 Component를 바꿈으로써 페이지 이동을 구현할 수 있다. 2. 라이브러리 불러오기 1. CDN 방식 2. NPM 방식 npm install vue-router 3. 실행 과정 router를 활용한 제일 기본적인 화면을 구성해보았다. STEP 0. component 생성 더보기 const Main = { template:'메인 페이지', }; const Board = { template:'게시판 페이지', }; STEP 1. path & component를 맵핑하는 router ins..

1. Component란? 화면의 구성 요소들을 블록처럼 분리해서 정의한 후, 한 화면을 만들 때 필요한 요소들을 붙여넣기 위해 사용된다. 이때 블럭에 해당하는 것이 Component이다. Vue Component는 Vue Instance이므로 이에 해당하는 속성들과 Life Cycle Hook 모두 사용 가능하다. *단, data는 함수 형식으로 작성해야 한다. data(){ return{ msg:"지역 컴포넌트!", } } Component 명명 방식 1. Component 이름 = 파스칼(MyComp) | 케밥(my-comp) 2. Component 사용할 때, 태그 명 = 케밥(my-comp) *Component이름을 파스칼형식으로 작성할 경우, 대문자를 기준으로 잘라 케밥으로 전환하여 태그명이 ..

1. v-for와 v-bind v-bind:는 : 약식으로 사용함 좋아하는 색상을 선택하세요. {{value.value}} 선택한 색상 : {{checkedList}} 결과 화면

1. v-on 사용하는 방식 1. Inline 방식 클릭한 횟수 = {{cnt}}번 클릭 2. method 방식 v-on은 이벤트 발생 시, 처리해야 하는 method이름을 받아서 처리한다. 클릭한 횟수 = {{cnt}}번 클릭 3. Inline + method 방식 Javascript구문으로 method를 사용하는 방식으로, 위에서 2번보다는 1번에 가까운 방식이다. 이때, 이벤트를 호출한 타겟의 정보를 event라는 객체가 가지고 있다. 클릭한 횟수 = {{cnt}}번 클릭 2. @ 사용하는 방식 v-on: = @이고, 이 방식 또한 위 3가지 방식 모두 적용 가능하다. 예시 클릭

1. el과 data - el = 해당 vue를 적용할 구역 지정 - data = DOM에 보여줄 데이터 정의 {{title}} 2. methods method안에서 vue객체를 접근할 때는 this.데이터이름으로 접근 *arrow function에서 this는 window를 가리키므로 arrow function 쓰지 않도록 주의하기 {{msgStar()}} {{cnt}} 증가 3. filter - 화면에 표시되는 텍스트 형식을 간단하게 변환하는 기능 - {{ }} 또는 v-bind 속성에서 사용 가능 {{ msg | filterName }} 1. 전역필터 el로 적용할 구역을 정해주지 않기 때문에, 어떤 id를 가진 구역에서든 가져다 사용할 수 있다. 2. 지역필터 el에 지정한 대로 id=app인 구..

1. 보간법 데이터 바인딩 방법으로 값 대입 또는 표현식이라고 할 수 있다. JavaScript에서는 Mustache 구문 즉, 이중 중괄호를 사용해서 나타낸다. {{변수명}} 특징 1. 이중 중괄호의 값은 HTML이 아닌 일반 텍스트로 데이터를 해석한다. {{msg}} 실행 화면 html로 해석되지 않아, tag까지 그대로 출력된다. html로 해석하기 위해서는 지시어 중 v-html을 사용해야 하며, 자세한 건 아래에 지시어 파트에 정리해놓았다. 특징 2. JavaScript 표현식 기능 지원 {{num+1}} {{num==0 ? "숫자는 0" : "숫자는 0이 아니다."}} {{"hello".split('').reverse().join('')}} {{msg}} 실행 화면 2. Directive : ..