공부-프레임워크, 개발도구/Vue6 Vue - computed, methods, watch 속성 methods: 호출할 때만 해당 로직이 수행된다. computed: 데이터 연산들을 정의하는영역, return값을 가지며 데이터들간의 종속을 표현할 때 자주쓰인다. 대게 watch와 헷갈리면 computed를 선택하는 것이 옳다. function(){ return }형태를 가진다. watch: 데이터 변화를 감지하여 특정 로직을 수행, computed는 단순 연산에 주로 사용되지만 watch는 비동기 처리에 유리하다. 대체로 특정 변화가 감지되면 메소드를 호출하는 형태 완전히 이해하진 못했으므로 이렇게 간단하게만 표시 2022. 10. 7. Vue- 자주쓰이는 디렉티브 디렉티브(Directive): html 태그 안의 v-접두사를 가진 모든 속성 v-bind : html 속성 값에 뷰 데이터 값을 연결할 때 사용 아이디데이터 클래스데이터 스타일데이터 new Vue({ el:'#app', data:{ id_data:"tmp_id", class_data:"tmp_class", style_data:"tmp_style", } }); 전역 컴포넌트 같은 경우 이렇게 선언 가능하다. -> 전역 컴포넌트의 props 속성에 prop_data가 명시되어 있어야 한다. v-bind:는 :로 축약해서 사용할 수 있되 혼동을 줄 수 있으므로 혼용해서 사용하진 말자. v-if : 값에 따라(true, false) 보이거나 보이지 않거나 flag=true면 보임 v-for : 반복문 설명을 .. 2022. 10. 6. Vue-라우터 사용법 라우터 라우팅: 웹 페이지 간의 이동방법, 주로 SPA에서 주로 사용함 라우팅 사용시 매끄러운 화면 전환 가능 Vue 라우터 관련 특수 태그 URL : 페이지 이동에 사용하는 태그 : URL값에 따라 갱신되는 영역 var view1 = {template:'view1'}; var view2 = {template:'view2'}; var routes = [ {path: '/view1', component:view1}, {path: '/view2', component:view2}, ]; var router = new VueRouter({routes}); var app = new Vue({router}).$mount('#app'); view1 view2 view1 view2 링크를 클릭시 router-view영.. 2022. 10. 6. Vue- 컴포넌트간의 통신 컴포넌트 기본개념 같은 페이지에 구성되어있는 컴포넌트라도 데이터를 공유하기는 어렵다. 각자의 유효범위가 존재함 컴포넌트간의 통신 방법에는 상.하위 컴포넌트 관계, 같은 레벨의 컴포넌트 간 통신으로 구분 상.하위 컴포넌트간의 데이터 전달 상위 -> 하위 : props 전달 하위 -> 상위: 이벤트 발생 상위->하위 컴포넌트 데이터전달 예제코드 new Vue({ el: '#app', data: { meg: 'hello' } }); Vue.component('child',{ props: ['data'], template: '{{data}}', }); #app 컴포넌트영역의 msg는 hello값을 가진다. child컴포넌트는 #app안에 구성되어있는 전역컴포넌트이다. 또한 하위 컴포넌트이다. child컴포넌트는.. 2022. 10. 6. Vue- 컴포넌트 컴포넌트: 화면을 구성할 수있는 블록 -> 화면의 구조화, 일괄적인 패턴으로 개발가능 앞서 data, 메소드 등 Vue 를 구성할 수 있는 형식을 미리 만들고 컴포넌트에 추가함으로 코드 재활용 높음 전역 컴포넌트: 어느 범위든 지정한 컴포넌트 태그를 적용하고 싶을 때 사용가능 지역 컴포넌트: 특정 범위 내의 컴포넌트 태그에만 적용하도록 할 때 사용가능하다. 컴포넌트 안에 template, data, method 등 정의 가능하다. 전역 컴포넌트 등록 예시코드 var cmp = { template: '지역 컴포넌트' }; Vue.component('component_name', cmp}); 전역 컴포넌트는 어느 영역이든 모두 적용된다. 지역 컴포넌트 등록 예시코드 var cmp = { template: '.. 2022. 10. 4. Vue 입문 Vue에 대한 기본문법을 이해할 때는 굳이 Vue 컴포넌트를 생성할 필요없이 html로 실습할 수 있다. new Vue({}); 를 뷰 인스턴스라고 한다. (Vue는 생성자) el속성을 사용해서 뷰 인스턴스와 관계된 부분을 명시한다. (#app를 이해하지 못한다면 CSS 문법 공부부터) data속성에 정의된 값들을 사용하고자 한다면 {{ 데이터이름 }}으로 사용할 수 있다. id=app : {{ message }} id=app2 : {{ message }} 위 코드블럭 실행 상태 (더보기 클릭) 더보기 HTML 삽입 미리보기할 수 없는 소스 2022. 10. 4. 이전 1 다음