VUE (8) 썸네일형 리스트형 el-tabs tab 크기 조정하기 el tabs 를 사용하는데 tab 은 다섯개인데 두 개 밖에 안보이는 것이다. 알고보니 상위 컴포넌트의 스타일에 영향을 받고 있었다. 아래 코드가 핵심이지만 또 쓸 수 있으니 전체 코드 기록 하기 : ) ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item { width : 20% !important; text-align: left; border: 1px solid red; } vue prop 객체 감지 안되는 경우 vue 로 개발하는 와중에 부모 컴포넌트가 자식 컴포넌트에게 배열을 보내주는 상황에서 배열 안의 값이 하나가 변경될 경우 감지를 못하는 상황이 있었다. 이러한 경우 때문에 속앓이를 좀 했는데, 답을 찾았다. data : { messages : [] , newMessage : ' ' } , computed : { addDisabled() { ... } } Vue 가 인스턴스를 초기화 할 때 실제 데이터를 저장하기 위해 Vue 는 vm._data 를 만들고 vm.messages 와 vm.newMessages 에 대해 Object.defineProperty 로 게터와 세터를 정의해 두 프로퍼티에 접근하는 프락시를 만든다. 이렇게 해서 vm.message 에 접근하려고 하면 프락시에 의해 vm._data.mes.. Ddaja - Word 개발 Word 사이드 프로젝트 "따 자" 에서 사용자들이 단어를 외울 수 있는 기능을 개발 중이다. word 는 내가 따자를 만들고자 할 때 가장 만들고자 했던 페이지이다. 내가 자격증 취득 하려고 하는 시기에 가장 힘들었던, '낮선 용어 외우기' 그 일을 조금이나마 쉽게 할 수 있도록 개발 중이다. Word 를 바라보는 시선. Word 페이지는 관리자가 사용하는 Admin Word , 그리고 word 기능을 이용할 User Word. Admin Word 자격증별로 Word 카테고리를 확인 할 수 있다 게시판 형식 Word 카테고리를 추가, 삭제, 수정이 가능해야 한다. Word 카테고리 추가 Word 카테고리 입력 받아야 하는 속성들. 카테고리명 단어들 저장 액셀 파일을 업로드 하여 여러 단어들을 저장할 수.. vue - popup 이해 🖤 글이 도움이 되었다면 유튜브 클릭 해주세요 🖤 vue - popup 샘플 * 설명이 편하도록 부모 - 자식 (popup) 으로 부르겠다. 🤹♂️ 부모가 해야할 일 1. 자식을 import 한다 import popup from './component/popup' 2. components 에 자식을 등록한다. components: { popup } 3 - 1. template 에 자식을 그려준다. 여기까지 하면 popup 창 개념이 아닌 그냥 vue 파일 데려와서 그려준 꼴이 된다. popup 은 열고 닫히기 때문에 부모 - 자식의 소통이 필요하다. 3 - 2. 3번을 3-1이 아닌 3-2 처럼 값을 전달해줘야 한다. data() { return { popupVal : false } } 4. 자식에게 .. 부모요소 → 자식요소 input 연동 vue 에서 항상 골머리를 썩는 부모요소와 자식 요소! 일단 부모 요소에서는 dragbox 라는 Component 를 import 하고 template 에 적용하려 한다. 부모 요소 하는 일 data() { return { price : '', }; }, 부모에서 해주는 일은 이것 뿐이다. v-model 만 이런식으로 정의 하는데 매핑이 될까? 의심 했는데 된다. v-model = "price" 자식 요소 하는 일 여기서 이해도 안되고 어이가 없는건 부모가 보내주는 값이랑 다르게 매핑했음에도 불구하고 알아서 매핑이 된다는 점이다. 이렇게 props 로 받는다. props: { value: { type: Number, default: 0 } }, input 태그를 이런식으로 써주고 메소드에서 emit 을 .. VueJS 에서 component 합치기 라우터로 경로를 지정 후 ( 아래 참고 ) soobindeveloper8.tistory.com/249 VueJS 의 index.js VueJS 의 router 폴더의 index.js 에서는 router 를 지정해준다. 나는 아래와 같이 구성해 놓았다 import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(Vue.. soobindeveloper8.tistory.com HOME 의 구성요소 '/' 를 클릭시에 ../views/Home.vue 이 파일로 이동하는데 ../views/Home.vue 파일은 아래와 같다 Home 은 아래처럼 7개의 컴포넌트 로 구성이 되어있다 상단바 하단바.. 플러그인 플러그인은 일반적으로 전역 수준의 기능을 Vue 에 추가합니다. 플러그인에는 엄격하게 정의된 범위는 없습니다. 일반적으로 작성할 수 있는 플러그인에는 여러 유형 이 있습니다. 약간의 전역 메소드 또는 속성 추가 vue-custom-element 하나 이상의 글로벌 에셋 추가 디렉티브 / 필터 / 트렌지션 등 vue-router 글로벌 mixin으로 일부 컴포넌트를 추가 vuex Vue.prototype 에 Vue 인스턴스 메소드를 연결하여 Vue 인스턴스 메소드를 추가하십시요 가지고 있는 API를 제공하면서 동시에 위의 일부 조합을 주입하는 라이브러리 vue-router 플러그인 사용하기 Vue.use() 글로벌 메소드를 호출하여 플러그인을 사용 // 'MyPlugin.install(Vue)' 호출 Vu.. Vue 에서 js 파일 생성해서 import 사용까지 🖤 글이 도움이 되었다면 유튜브 클릭 해주세요 🖤 vue 는 특성상 methods 안에 여러개의 method 를 기술하는데 코드가 길어지면 답답할 것 같아서 js 파일을 만들어서 import 해서 사용하고 싶었다. 자료들이 많이 없었지만 아래 블로그를 참고해서 성공 dark-child.tistory.com/79 vue.js plugin으로 global method 만들기 DOCUMENT 플러그인 사용법 먼저 플러그인은 제공자와 사용자로 나뉩니다. 이때 두 사이를 이어주는 것이 Vue의 install 메서드입니다. 아래는 각각 예제 코드입니다. 제공자 코드 * // my-plugin.js*MyPlu dark-child.tistory.com 공통적으로 사용할 js 파일은 ../ src / assetes / .. 이전 1 다음
