vue.js26 뷰 인스턴스에서의 this this 는 obj 즉 해당 객체를 바라본다. var obj ={ num : 10, getNumber : function(){ console.log(this.num); } } 즉 여기서 this.num 은 Vue객체를 바라봄 var Vue = { el: '', data: { num: 10, }, method:{ getNumber:function(){ this.num } }, } - 참고 JavaScript this W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python.. 2023. 1. 11. 컴포넌트 통신 - event emit - 상위 컴포넌트로 이벤트를 보냄 (v-on:) ex)appheader -> root 로 클릭 시 발생하는 이벤트 정의 (v-on 뷰에서 제공하는 속성) v-on:click="메소드 정의" $emit --> api (기능) 하위 : appheader의 pass 상위 : root 의 logText {{ 데이터 }}을 통해 화면 표현 가능 2023. 1. 11. 컴포넌트 통신 - props 뷰 컴포넌트는 각각 고유한 데이터 유효범위를 갖는다. 공유하려면 props속성과, 이벤트 전달 방식을 사용 해야 함. 상위는 하위로 데이터를 내려줌 : 프롭스 발생 (props = data) 하위에서 상위로는 이벤트를 올려줌 : 이벤트 발생 컴포넌트 통신 규칙 : 데이터의 흐름을 추적할 수 있다 props 설정 특징 - reactivity 가 props에도 반영된다 : root data가 바뀌면 하위 데이터도 바뀐다 - v-bind를 이용하여 root에서 내용을 아래로 내려주고, 값이 바로 화면에서 바뀐다 2023. 1. 10. 컴포넌트 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면 제작이 가능 반복되는 코드가 많을 경우 사용 ** 인스턴스를 생성하면 기본적으로 루트 컴포넌트가 된다 - Vue.compnent('컴포넌트이름', 컴포넌트 내용); 플러그인, 라이브러리 형태로 전역에 사용되는 경우에만 사용 template 속성을 사용 실제로는 전역으로 잘 사용하지 않음 플러그인이나 라이브러리 형태로 사용 - Vue.component() //아래 정의한 컴포넌트 태그 - components 속성을 사용 - 인스턴스 생성시마다 컴포넌트를 등록해주어야 한다. 서비스 구현시 보통 인스턴스는 하나를 생성하고 components 속성을 붙혀나가는 형식으로 주로 사용 - .. 2023. 1. 10. 뷰 인스턴스 뷰를 개발할 때 필수로 생성해야 하는 코드 new Vue(); var vm = new Vue(); conlole.log(vm); 반드시 vue 인스턴스를 엘레먼트에 붙혀서 사용해야 내용이 유효함 var vm = new Vue({ el: '#app', data:{ message:'hhh' } }); new Vue() 를 사용하는 이유 : api와 속성들을 정의해두고 가져다 쓰거나 재사용할 수 있다. ex1 ) Vue라는 생성자 함수를 만들었을 때 function Vue(){ this.logText = function(){ console.log('hell'); } } vm을 new Vue를 생성할 때마다 미리 정의한 logText가 들어있다. 즉 미리 정의해둔 함수를 사용 할 수 있다. var vm = ne.. 2023. 1. 10. Reactivity 반응성. 데이터의 변화를 라이브러리에서 감지해 알아서 화면을 자동으로 그려주는 것 - 데이터 바인딩 객체의 특정 습성, 동작을 재정의 하는 api 문법 : Object.defineProperty(대상객체, 객체의 속성, { 정의할 내용 } Object.defineProperty(viewModel, 'str',{ //속성에 접근했을 때의 동작을 정의 get:function(){ console.log('접근'); }, //속성에 값을 할당했을 때의 동작을 정의 set:function() { console.log('할당', newValue) } }) 자동실행함수를 사용 2023. 1. 10. 이전 1 2 3 4 5 다음
