FrontEnd56 [Vue.js] Router 기초 SPA에 필수 요소 Router new VueRouter 로 라우터 인스턴스 생성하고 Vue인스턴스에 router: router로 연결해준다. VueRouter 인스턴스에 routes 배열에 route 정보를 적어둔다. 영역에서 컴포넌트가 뿌려진다. 는 to로 이동하는 Link 태그이다. Login Main 2022. 9. 16. [Vue.js] 같은 레벨의 컴포넌트 간의 데이터 통신 (React의 State 끌어올리기) Vue.js에선 같은 레벨의 컴포넌트 간의 데이터 통신을 어떻게 할까? React의 State끌어올리기를 Vue.js에선 어떻게 구현할까? Vue.js의 컴포넌트간 데이터 통신 방법은 아래로 Props, 위로 Event이다. 이 둘을 이용해서 Event로 올리고, Props로 다시 내리면 같은 레벨 컴포넌트간 통신이 가능하다. {{str}} 2022. 9. 15. [Vue.js] 컴포넌트간 통신, Props, Event Emit Vue에서의 컴포넌트간 통신 흐름 상위 컴포넌트 => 하위 컴포넌트로 Props가 내려간다. (데이터가 내려간다.) 하위 컴포넌트 => 상위 컴포넌트로 Event가 올라간다. Vue에서의 Props 개념은 react의 Props와 같다. 상위 컴포넌트에서 하위 컴포넌트로 전달해주는 데이터! 데이터 흐름 또한 상위 컴포넌트 => 하위 컴포넌트로 같다. props를 던져주는 방법은 v-bind:프롭스 속성 이름 ="상위 컴포넌트의 데이터 이름" Event Emit Vue에서는 하위 컴포넌트에서 상위 컴포넌트로 Event라는것을 보낼 수 있다. 방법은 아래와 같다. 1) 컴포넌트 template에 v-on:click="passEvent" 이런식으로 태그에 달아주고, 하위컴포넌트 methods 객체에 해당 pa.. 2022. 9. 15. [Vue.js] Vue 인스턴스, 전역 컴포넌트, 지역 컴포넌트 Vue 인스턴스 new Vue()를 통해 Vue 인스턴스를 생성하고, 해당 인스턴스를 통해 이미 정의되어있는 Vue의 기능들을 사용할 수 있다. Vue 생성자 함수의 인자로 객체가 들어가는데, 해당 객체에 컴포넌트들을 정의할 수 있다. (지역 컴포넌트) 해당 객체가 아닌 script태그 내에 Vue.component() 방식을 통해 컴포넌트를 정의 할 수도 있다. (전역 컴포넌트) 우리가 생각하는 웹앱 내의 컴포넌트들은 보통 지역 컴포넌트로 선언하고, 플러그인 등은 전역 컴포넌트로 선언한다. 지역 vs 전역 Vue인스턴스를 2개 이상 생성할 수 있는데, 이 때 전역컴포넌트는 어디서든 사용할 수 있지만 지역 컴포넌트는 Vue 인스턴스가 지정한 el 내에서만 사용가능하다. (웹 앱에서 일반적으론 인스턴스 하.. 2022. 9. 15. [SPA] SPA 프레임워크, 라이브러리 기초 캡틴판교 vuejs 기초 강의 중 Object.defineProperty() 라는 메서드를 알게 되었습니다. 해당 메스드를 사용하면, get, set (호출, 할당) 을 할 때 어떤 동작을 하는지 재 정의 할 수 있습니다. set을 할 때 div#app 의 innertHTML을 set한 value로 만들어주는 render()함수를 정의하여 넣어주면 우리가 사용하는 react, vuejs와 같은 SPA 프레임워크, 라이브러리와 동일한 동작을 하도록 만들어 줄 수 있습니다. 프로그래머스 과제 테스트를 할 때 render()함수를 통해 dom을 만들어 appendChild하는 형태로 만들어는 봤는데요, 해당 방식으로 Object set을 할 때 render가 되도록 하는 방식은 처음 알게 되었습니다. 아주 의.. 2022. 9. 15. [Vue.js] v-bind를 이용한 Class, Style 변경 v-bind 활용 v-bind를 활용하면 태그의 속성값에 데이터바인딩이 가능하다. class, style 또한 v-bind를 사용해서 조작가능하다. Class Binding (object) Class Binding (Array) Inline-style Binding (object) Inline-style Binding (Array) 2022. 9. 15. [Vue.js] v-bind를 활용한 인풋버튼 비활성화, img src url 변수 사용 v-bind를 활용한 인풋 버튼 비활성화 v-bind를 활용하여 인풋 버튼 비활성화를 해보았습니다. react에서 { } 안에 js코드를 넣을수 있는것 처럼 vue에서는 " " 안에 js코드를 넣을 수가 있네요. v-bind:disabled="textValue === ''" 라는 부분을 통해 디스에이블드를 조건에 따라 true flase로 만들어 주었습니다. 만약 복잡한 validation이 필요하다면 methods로 빼야할것 같네요! Click 2022. 9. 15. [Vue.js] v-model v-model VueJS는 State 대신 data() {}를 사용한다. 해당 data()의 return 값에 data 키-밸류 객체가 있다. 이 data를 input tag에 value로 바인딩 해주려면 "v-model" 이라는 속성을 사용해주면 된다. input:text, input:number, textarea 아래와 같이 input 속성값에 v-model을 넣어주면 된다. {{ valueModel }} {{ valueNumber }} {{ valueTextArea }} select, checkbox checked라는 data의 초기값을 빈배열로 지정, input checkbox의 v-model을 checked로 지정 => checked된 결과에 따라 배열에 들어감.. 신기하넹 리액트였음 onCli.. 2022. 9. 15. [Vue.js] v-html (htmlBinding) VueJS에서 미리 선언한 HTML 코드를 꽂아 넣고 싶으면 아래와 같이 v-html이라는 곳에 미리 선언한 htmlString data를 넣으면된다. 그러면 아래 그림과 같이 v-html 속성을 추가한 DOM요소의 하위 태그로 htmlBinding이 Append된다. 2022. 9. 14. [Vue.js] Vue Component 기본 틀 및 Data Binding Vue Component 기본 틀 위 그림은 Vue JS Component의 기본 틀입니다. Vue Component는 크게 세가지로 나뉩니다. 1) template : HTML 코드 부분 2) script : JS 로직이 들어가는 부분 3) style : CSS 부분 template에서 알아야 하는 부분 (React를 먼저 배워서 비교하면서 기록합니다.) 1) {{title}} 처럼 변수를 사용할 수 있다. (React와 동일) 2) v-model="title" 이라는 건 input 태그의 밸류가 title이라는 데이터와 바인딩 된다는 뜻 React 기준, value={title}과 동일, onChange={(e) => setTitle(e.target.value)}해주지 않아도 된다는건 다름, 강의에서.. 2022. 9. 14. 이전 1 2 3 4 5 6 다음
