Vue js12 Vue component Vue component 기본html 엘리먼트를 확장여 재사용 가능한 콛를 캡슐화 하는데 도움을 준다 즉, 컴포넌트는 유지보수를 쉽게 만들어 줄 뿐만 아니라, 재사용성의 측면에서도 매우 강력한 기능을 제공 Vue 컴포넌트 === Vue 인스턴스===.vue파일 Vue component구조예시 한 화면 안에서도 기능 별로 각기 다른 컴포넌트가 존재 하나의 컴포넌트는 여러개의 하위 컴포넌트를 가질 수 있다 Vue는 컴포넌트 기반의 개발 환경 제공 Vue 컴포넌트는 const app = new Vue({...})의 app을 의미하며 이는 Vue 인스턴스 여기서 오해하면 안 되는 것은 컴포넌트 기반의 개발이 반드시 파일 단위로 구분되어야 하는것은 아님 단일 .html파일 안에서도 가능 computed: 우리가 .. 2022. 5. 11. Template Syntax Template Syntax 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용 Interpolation Directive Interpolation(보간법) text 메세지: {{ msg }} Raw HTML 절대 사용하지 말것 Attributes JS 표현식 {{number +1 }} {{ message.split('').reverse().join(;) }} Directive(디렉티브) v- 접두사가 있는 특수 속성 속성 값은 단일 js 표현식이 됨 (v-for는 예외) 표현식의 값이 변경될 때 반응적으로 DOM에 적용하는 역할을 함 전달인자(arguments) ':' 을 통해 전달인자를 받을 수도 있음 ex) ... 수식어(modifier.. 2022. 5. 11. basic syntax of vue.js vue instance new Vue({}) 안에 중괄호는 options라는 객체임 vue instance === vue component options/dom - 'el' //options 안에 들어갈 수 있는 요소 vue 인스턴스에 연결(마운트) 할 기존 dom 요소가 필요 new를 이용한 인스턴스 생성 때만 사용 options/data - 'data' vue 인스턴스의 데이터 객체 vue 인스턴스의 상태 데이터를 정의하는 곳 vue template에서 interpolation을 통해 접근 가능 v-bind, v-on과 같은 directive에서도 사용 가능 vue 객체 내 다른 함수에서 this 키워드를 통해 접근 가능 options/data - 'methods' vue 인스턴스에 추가할 메서드 v.. 2022. 5. 11. vue 작성순서 django와 vue.js의 흐름차이에 대해 가볍게 작성하자면 django & vue.js 코드 작성순서 django "데이터의 흐름" url -> views -> template vue.js "data가 변화하면 dom이 변경" data 로직 작성 dom 작성 vue 작성순서 1. vue 공식문서 들어가서 cdn을 가져와서 붙여넣기 2. html문서에 아이디 선언 (vue에서 view를 할당) 선언적 렌더링 3. script내에 vue 작성(vue 에서 view model을 할당) const app = new Vue({ el : '#app', //element의 약자인 el임 // data 부분이 vue에서 model을 할당함 data: { message: '안녕하세요 Vue!', } }) 4. htm.. 2022. 5. 11. Vue.js 디자인패턴(MVVM Pattern) Vue.js의 디자인 패턴(MVVM Pattern) 애플리케이션 로직을 UI로부터 분리하기 위해 설계된 디자인 패턴 구성요소 Model(js object) vue에서 model은 js의 object이다 object ==={key: value} model은 vue instance 내부에서 data라는 이름으로 존재 이 data가 바뀌면 view(dom)이 반응 View( dom(html) ) data의 변화에 따라서 바뀌는 대상 View Model(vue) vue에서 viewModel은 모든 vue instance이다 view와 model사이에서 data와 dom에 관련된 모든 일을 처리 2022. 5. 11. Vue의 개념정의 vue.js 사용자 인터페이스를 만들기 위한 진보적인 자바스크립트 프레임워크 spa(single page application) 지원 SPA single page application(단일 페이지 애플리게이션) 현재 페이지를 동적으로 렌더링함으로써 사용자와 소통하는 웹 애플리케이션 단일 페이지로 구성되며 서버로부터 최초에만 페이지를 다운로드하고, 이후에는 동적으로 dom을 구성 처음 페이지를 받은 이후부터는 서버로부터 새로운 전체 페이지를 불러오는 것이 아닌, 페이지 중 필요한 부분만 동적으로 다시 작성함 연속되는 페이지 간의 사용자 경험(UX)을 향상 모바일 사용량이 증가하고 있는 현재 트래픽의 감소와 속도, 사용성, 반응성의 향상은 매우 중요하기 때문 동작 원리의 일부가 CSR(Client side .. 2022. 5. 11. 이전 1 2 다음