Vue.js 및 관련 라이브러리, 프레임워크 등
현재 주소(URL)의 쿼리 파라미터 알아내기 URL의 쿼리 파라미터란 아래 빨간색 박스처럼 ? 뒤에 지정하는 파라미터를 뜻합니다. 여러 개를 연결할 때는 & 를 씁니다. 여기서 uwasaKeyword 의 쿼리 파라미터는 무슨 값을 가지고 있는지 알고 싶다면 다음과 같이 입력합니다. // this.$route.query.[키이름] const uwasaKeyword = this.$route.query.uwasaKeyword 저 값을 콘솔로 출력하면 "미술" 이라는 결과가 나옵니다. 더보기…
먼저 상위(부모) 컴포넌트의 이름은 Topic, 하위(자식) 컴포넌트의 이름은 TopicSearch라고 가정합니다. 먼저, 상위 클래스에서 컴포넌트를 삽입할 때 v-on:xxx(약어 @xxx)를 사용해 커스텀 이벤트를 만듭니다. Topic.vue (일부) <template> <div class=”topic”> <TopicSearch v-on:search=”doSearch” v-on:allOrder=”doAllOrder”/> </div> </template> 여기서 search. allOrder 는 나중에 this.$emit에서 사용할 이벤트 이름이며. doSearch, doAllOrder는 상위 컴포넌트에 있는 메소드 이름입니다. 왼쪽이 더보기…
이 방법은 npm의 Vue CLI를 통해 개발하는 경우 및 처음에 Vue.js 프로젝트를 생성할 때 Vue Router가 포함되지 않은 경우를 기준으로 작성되었습니다. 1) npm에서 Vue Router 설치 npm install vue-router –save 2) router 관련 설정 js 파일 생성 이름 및 경로는 자유롭게 지정할 수 있습니다. 3) 라우터 설정 더보기…
Vue.js에서 무한 스크롤(무한 페이징, 스크롤 페이징)을 적용하는 방법입니다. Vue-infinite-loading 이라는 라이브러리를 사용하면 무한 스크롤을 쉽게 구현할 수 있습니다. 원리는 특정 영역, 일반적으로 화면 맨 아래에 화면이 이동하면 Vue.js 에서 목록을 관리하는 배열에 추가 데이터를 AJAX 로 더하여 다시 렌더링하는 방식입니다. 이 예제는 별도의 예외 상황에 대한 고려 없이 단순하게 목록을 30개씩 더보기…
출처 바로가기(영문) Vue.js: v-on:click을 사용해 해당 요소(element)의 DOM 가져오기 이벤트 객체 $event를 사용하여 이벤트 핸들러를 가져올 수 있습니다. <div id=”foo” v-on:click=”select($event)”>…</div> $event는 자바스크립트에서 다음과 같이 처리할 수 있습니다. 참고로 event 자체는 클릭 이벤트이고, 어떤 요소를 클릭했는지 가져오는 것이 event.currentTarget(또는 event.target)입니다. export default { methods: { select: function(event) { 더보기…
축약형 export default { data() { return { todoItems: [] } }, } methods: { addTodo() { } }, 원래 형태 export default { data: function(){ return { todoItems: [] } }, } methods: { addTodo: function(){ } }, vue.js vue 축약 원래 this.values.splice(index, 1, replacementItem) editTodo(keyOfTodoItem, 더보기…
이전 글: Vue.js: 기초 사용 방법 + 예제: 이름으로 보는 운세 요구사항: Home, Portfolio, Guestbook 3개의 메뉴로 된 홈페이지를 만들되 각 메뉴는 Vue.js의 컴포넌트를 사용하여 작성하시오. <!DOCTYPE html> <html lang=”ko”> <head> <meta charset=”UTF-8″> <title>Homepage</title> <link rel=”stylesheet” href=”[부트스트랩-cdn-주소]”> </head> <body class=container> <nav id=”home-nav” class=”navbar navbar-expand-lg navbar-dark bg-dark”> <a class=”navbar-brand” href=”#”>{{ title 더보기…
Vue.js 소개 및 매뉴얼: https://kr.vuejs.org/v2/guide/ 인스턴스의 라이프사이클 beforeCreate: 인스턴스가 초기화 된 직후 데이터 관찰 및 이벤트 설정 전에 동기적으로 호출되는 단계입니다. create: 인스턴스가 작성된 후 beforeCreate 다음 단계에 동기적으로 호출됩니다. 이 단계에서 인스턴스는 데이터 처리, 계산된 속성, 메서드, 감시/이벤트 콜백 등과 같은 옵션 처리를 완료합니다. data 속성에 접근할 수 있는 단계이므로 서버에 데이터를 더보기…