dev_0hoon

Vue 템플릿 문법(Template Syntax) 소개뷰의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미한다. 크게 데이터 바인딩과 디렉티브로 나뉜다. 데이터바인딩 {{message}} 로 데이터를 뿌리고new Vue({ data: { message: 'Hello Vue.js' }})이것이 그냥 데이터 바인딩이다. 디렉티브v-if, v-for 등 화면의 요소를 더 쉽게 조작하기 위한 문법이다. Hello Vue.jsnew Vue({ methods : { show : false }}) {{item}}new Vue({ data: { item : ['shirts', 'jeans', 'hats'] }})이런 식으로 구현한다.  로그인 되었습니다. 로..

위의 코드는 (상위 컴포넌트) root(하위 같은 레벨 컴포넌트) app-header , app-contents가 있다. 1) app-contents에서 버튼을 클릭하면 app-header의 데이터가 변경되어야 한다.2) app-contens에서 버튼 클릭하면 sendEvent()가 발생하며 emit으로 상위 컴포넌트에 메세지를 보냄3) emit을 v-on:에밋으로 설정하며 상위컴포넌트의 receive()가 발생한다.4) receive에서는 data()를 변경하게 된다. 전에 배웠듯이 reative로 인해 데이터가 변경된다.5) 이 변경된 데이터는 props를 app-header에 v-bind:프롭스명을 통해 전달되며6) app-header에는 props로 정의된 appTitle에 저장된다.7) app-..

하위 컴포넌트의 이벤트를 발생시켜 상위컴포넌트로 이동시키는 것이 emit이다. 하위에서 쪽지를 주며 '뭐좀 실행시켜줘' 하는 것으로 받아들이면 편하다.   이와 같이 아래의 emit을v-on:emit이름="상위의 함수"를 사용하면 하위 컴포넌트에서 상위컴포넌트의 이벤트를실행하도록 할 수 있다.

1) 상위 컴포넌트에서 하위컴포넌트로 데이터를 내려보낼 떄 사용하는 것은 props이다.- 정확히는 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법이다. 먼저 컴포넌트 안에 template와 같은 레벨에 props를 작성해 준다.- template : 그릴 화면- props: 상위에서 받은 매개변수 정도로 생각해면 될 것 같다.  디렉티브 v-bind를 이용해서 :props 즉 연결할 props의 이름을 적용해주고 그 값을 ="appTitle"로 담아준다. #app 내부의 데이터를 보내주고 있는 것이다. 그리고 확인해보면 1) Vue.createApp() 인스턴스를 생성하며 내부에 components에 props로 값을 보내주며 그 값을 template 내에서 사용할 수 있게 된다.

컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능이다. 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다. 사진 처럼 왼쪽의 모양을 각각 화면을 쪼개어 트리구조가 된다.    컴포넌트를 등록하는 것은 다음과 같다. Vue.createApp으로 인스턴스를 생성 후 components 옵션 객체 안에 component의 이름과 내용을 등록시킨다. 여기서 template를 이용해서 내용을 넣을 수 있다.데이터는 위에서 아래로 흐르고 : props라고 한다이벤트는 아래에서 위로 흐른다. : 이벤트 발생 이라고 한다. 이벤트는 ui의 이벤트가 아닌 컴포넌트 통신을 위한 별도의 이벤트 이다.

Vue2 에서는 뷰 인스턴스로 부르는 것을 Vue3 에서는 뷰 어플리케이션 인스턴스로 바뀌었다. 같은 것을 의미한다.  {{message}} 첫 인스턴스를 생성할 때 기존의 new 인스턴스가 아닌 Vue.createApp인 api를 호출하는 방식으로 바뀌었음 method//Vue2new Vue({ el: , template: , data: , methods: , created: , watch: ,}); //Vue3Vue.createApp({ template: , data: , methods: , created: , watch: ,});el, template 등의 인스턴스 에서 사용하는 속성과 api는컴포넌트 옵션 속성, 인스턴스 옵션, 옵션 API 등으로 부르며 모두 같은 말이다. ..

new Proxy()를 통해서 프록시 객체를 만들었다. 프록시란 값을 넣어 모방하는 객체라고 볼 수 있다. 가짜 객체와도 비슷한데 여기에서는 값을 사용할 때에 추가적인 동작을 할 수 있게 만들었다.  var data = { a: 10 } var app = new Proxy(data,{ get() { console.log('값 접근'); } }) // 이 상태에서 브라우저 콘솔 창에 // app.a 를 칠 경우 // 값 접근 // 이 표시가 된다. 따라서 proxy 안의 data.a가 아닌 값에 접근할 때에 가로채서 새로운 동작을 하게 한다.get() { console.log('값 접근');..

{{message}} 1. Vue.createApp()은 Vue에서 제공하는 함수이다. vue2와 비교를 해보면,  vue2: new Vue();vue3: Vue.createApp();결국 함수를 통해 객체를 만들고 있다.콘솔로 찍었을 때에도 같은 결과가 나온다.new Vue({ el: , template: , data: , methods: , created: , watch: ,}); Vue.createApp({ template: , data: , methods: , created: , watch: ,});인스턴스의 속성을 보면 결국 같은 객체를 넘겨서 볼 수 있다. 예상하자면function createApp(obj) { return new Vue(obj);}이런느낌이지 않을까? ..