front-end/vue.js8 [vue.js 기초] 뷰에서의 데이터 바인딩 / 이벤트 처리하기 Vue.js는 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수있는 HTML 기반 템플릿 구문을 사용한다. 뷰에서의 템플릿 문법은 데이터 바인딩과 디렉티브로 나뉜다. 데이터 바인딩 new Vue({ data: { message: '안녕하세요' } }) {{ message }} 디렉티브 디렉티브는 v-접두사를 사용하는 속성들을 말한다. v-for v-if v-bind v-on v-model new Vue({ data: { items: ['red', 'blue', 'green'] } }) {{ item }} v-bind 이미지 데이터 연결 : v-bind:src 링크를 통한 연결 : v-bind:href 스타일시트 연결 : v-bind:class, v-bind:style 키를 통한.. 2020. 4. 29. [vue.js 기초] 폼 입력 바인딩 v-model 사용하기 / 한글 문제점 해결 vue의 form 입력 v-model은 input과 textarea에 양방향 데이터 바인딩을 가능하게 한다. 단 , v-model은 form 엘리먼트의 초기 value값을 무시하므로 컴포넌트 데이터 안에 초기값을 선언해줘야 한다. 메시지: {{ message }} new Vue({ el: '#app', data: { message: '' } }); 자세한 예제는 기술문서에 나와있으므로 참고 폼 입력 바인딩 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 한글 실시간 반영 안되는 문제점 원래 이 속성을 사용하면 메세지가 실시간 반영되도록 할 수 있지만, 중국어, 일본어, 한국어는 특성상 한 글자 느리게 반영된다. 그래서 input 속성으로 사용해 주어야 함. 메시.. 2020. 4. 28. [vue.js 기초] 뷰 인스턴스(vue instance) vue 인스턴스 뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 할 기본 단위이다. 각 뷰 인스턴스는 데이터 객체 안에 있는 모든 속성을 프록시 처리한다.(데이터 변경시 자동으로 DOM을 업데이트함) var vm = new Vue({ //인스턴스에서 사용 가능한 속성과 api들 el: , // DOM의 시작점 template: , // 화면에 표시되는 요소 data: , // 데이터 속성 methods: , // 로직 제어 created: , // 라이프 사이클 관련된 속성 watch: , // data 변경 시 추가 동작을 수행할 수 있도록 함 }); $data // 1. 대이터 객체 생성 var data = {a : 1} // 2. 뷰 인스턴스에 데이터 객체 추가 var vm = new .. 2020. 4. 28. [Vue.js TIL] 중첩 라우트 / 데이터 바인딩 / computed methods watch의 차이 중첩 라우트 라우터 index.js 에서 다음과 같이 설정해 중첩 라우트를 만들 수 있음. 한 path 아래에 children 속성을 사용하여 다른 Path를 연결함 DATA ={path: '/b/:bid', component: Board, children : [ {path: '/c/:cid', component : Card} ]}, } 그러나 이렇게만 만들고 지정된 화면으로 이동하면 Board 화면만 보이게 됨. Card는 Board의 하위 컴포넌트이기 때문에 Board 컴포넌트에서 Card 컴포넌트가 보일 위치를 지정해 주어야 하기 때문임. 데이터 바인딩하기 데이터는 화면이 created() 된 후에 담을 수 있음. 이 상태에서는 데이터 속성과 메소드 속성은 정의되어 있지만 template의 Dom .. 2020. 2. 3. [vue-trello] TIL 1 :: webpack이란? / 라우터와 플러그인 webpack SPA(단일 페이지 어플리케이션)이 많아지면서 하나의 파일에서 자바스크립트 코드를 관리할 수 없을 만큼 그 양이 증가하게 되었다. 그래서 파일을 UI 및 기능별로 분리하여 개발하고 webpack을 통해 하나의 js파일로 번들링하여 웹페이지를 불러오는 방식을 사용하게 되었다. webpack.config.js파일에 들어가면 entry point를 확인할 수 있는데, 이는 로딩하는 모듈의 시작점이 되는 파일을 말한다. module.exports = { entry: { main: './src/main.js', } } webpack은 이 entry point를 기점으로 필요한 모듈을 로딩해 하나로 묶는다. (번들링) 번들링이 완료되면 이 결과물을 처리할 위치를 output에 기록한다. module... 2020. 1. 21. 처음 시작하는 Vue.js(3), 뷰 HTTP 통신과 데이터 바인딩 HTTP : 브라우저와 서버간에 데이터를 주고받는 통신 프로트콜 뷰에서는 이를 지원하기 위해 axios를 리소스를 지원한다. 뷰 리소스 방식 프레임워크 목록 가져오기 뷰 리소스가 1.5.2 버전인 현재는 위와 같이 하면 에러가 발생한다. ES6문법에 맞춰 다음과 같이 사용하자. 더 직관적인가? 잘 모르겠다. 프레임워크 목록 가져오기 엑시오스 방식 프레임워크 목록 가져오기 Data 속성이 일반 문자열이 아닌 객체 형식이기 때문에 별도로 JSON.parse()를 사용할 필요가 없다. 데이터 바인딩 데이터 바인딩 : html 화면 요소를 뷰 인스턴스와 데이터에 연결하는 것을 의미한다. v-once : 뷰 데이터가 변경되어도 값을 바꾸고 싶지 않을 때 사용함 v-bind : 아이디, 스타일, 클래스 등의 htm.. 2019. 9. 14. 처음 시작하는 Vue.js(2) 뷰 라우터 중첩 라우터부터 네임드 뷰까지 라우팅 라우팅이란 웹 페이지간의 이동 방법을 말한다. 라우팅은 현대 웹앱 형태 중 하나인 싱글 페이지 에플리케이션에서 주로 사용된다. 싱글 페이지 에플리케이션이란 서버에 웹 페이지를 요청하지 않고, 미리 해당 페이지를 받아 놓고 이동시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 어플리케이션을 말한다. 뷰 뿐만 아니라 리엑트, 엥귤러는 모두 라우팅을 이용한 화면 전환을 지원하고 있으며 Fouc 현상이 일어나지 않아 화면을 더 빠르고 매끄럽게 전환할 수 있다. Route 예제 : 페이지 이동 태그, 화면에서는 태그로 치환된다. 페이지 표시 태그, 변경되는 url에 대한 해당 컴포넌트를 뿌려준다. $mount() : el 속성과 같이 인스턴스를 화면에 붙이는 역할을 한다. 생성하고 나서 $.. 2019. 9. 7. 처음 시작하는 Vue.js (1) Vue의 정의와 뷰 컴포넌트 Vue.js의 특징 MVVM 패턴을 사용(비즈니스 로직이나 백엔드 로직으로 분리 사용) Vue.js는 컴포넌트 기반 프레임 워크이다. 코드를 재사용하기 쉽고 코드를 직관적으로 파악할 수 있다. 양방향 데이터 바인딩 (화면에 표시되는 값과 프레임 워크의 모델 데이터 값이 동기화 됨) 데이터 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 방향으로만 전달함. Vue.js의 기본적인 구조 new Vue()인스턴스를 생성할 때 Vue를 생성자라고 한다. 생성자란 객체를 새로 생성할 때 자주 사용하는 옵션과 기능을 미리 특정 객체에 저장해 기능 확장을 도와준다. {{ message }} 뷰 인스턴스의 라이프 사이클 beforeCreate : 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계 da.. 2019. 8. 31. 이전 1 다음
