Vue (14) 썸네일형 리스트형 [ Vue ] 이미지 삽입시 변수, 절대경로 사용하기 ( with v-for ) @로 src내 파일 절대경로로 사용 이미지 경로가 src/assets/images/IMG1.png 일때 vue 에서는 @/assets/images/IMG1.png 로 src를 절대경로로 사용 할 수 있다. 그래서 아래와 같은 방법으로 이미지를 삽입 할 수 있다. 변수를 사용한 절대경로 사용 하지만 변수를 사용하거나 v-for로 index값을 이용하거나 하는 등의 경우에는 위처럼 적용하면 이미지가 제대로 나오지 않는것을 볼 수 있다. 아래의 예제가 위처럼 사용하고 변수만 넣었을 경우이다. 1. 미작동 예시 사진을 보면 제대로 뜨지 않는것을 확인 할 수 있는데, Element에서 확인해보면 src에 @가 포함된 절대경로 자체가 들어가 버렸다 2. 작동 예시 이럴때는 위의 형태로 require을 추가해 변.. [ Vue ] 페이지별 메타태그 | vue-meta 사용법 vue는 SPA이다! 한개의 html파일에 여러 페이지들이 존재하는것처럼 소스코드가 바꿔끼워지는것이기 때문에 메타태그 설정이 조금 까다롭다. 메타 태그를 각 페이지의 html파일의 head부분에 각 페이지에 맞도록 다르게 입력해주어야 하는데, 그래서 SSR방식인 Nuxt를 사용하는 방법도 있는데 이제와서 바꾸기엔 너무 먼 길이기에 vue-meta라는 라이브러리를 사용해 메타태그 설정 하는 법을 정리해본다. vue-meta 설치 yarn add vue-meta npm install vue-meta --save vue-meta 설정 ( main.js ) import Vue from 'vue' // VueMeta import Meta from 'vue-meta' Vue.use(Meta, { attribute:.. [ Vue ] ref 사용해서 클릭이벤트 적용하기 1.Ref란 DOM에 접근할때 사용하는것이 ref이다. 아래와 같은 형태로 element에 Ref로 값을 지정하고 그 값으로 해당 element에 접근이 가능하다. Click! //ref로 dom에 접근 this.$refs.click 사실 Vue파일의 template 안에서 해당 element에 @click="clickEvent"를 적용하면 되지만, 2. 내가 이 방법을 사용한 이유는 더보기 Ant Design of Vuef를 사용하여 화면에 그려진 checkbox select가 내 코드에 존재하지 않아서 js로 dom을 선택해 click을 제어해줘야 하는 경우가 생겨서 찾아서 적용한 방법이다 🤧그리고 어쨋든 dom에 직접 접근하는건 지양해야 한다고 한다 3. 사용법 특정 element를 눌렀을때 but.. [ Vue ] 새 프로젝트에서 SCSS 사용하기 sass랑 sass-lodaer를 설치하면 되는 간단한 사용법이지만 주의해야 할 점이 있어 정리하는 포스트🤣 ! 알아두기 Vue CLI로 프로젝트를 시작할때 위의 이미지와 같은 preset을 선택한 경우 최신 버전의 sass-loader를 사용하면 아래와 같은 오류를 만날 수 있다 [ Vue Error ] sass-loader 설치 오류 : TypeError: this.getOptions is not a function CLI로 새 프로젝트를 생성하고 scss를 사용하려고 sass-loader를 설치하는데 이상한 오류가 났다. TypeError: this.getOptions is not a function 문제 Default ([Vue 2] babel, eslint) CLI로 프로젝트.. im-desig.. [ Vue ] vue 프로젝트에 Jquery 설치하기 Jquery쓰지 말라는 개발자들의 이야기는 진짜 많이 들었다. 간단한 class추가, element선택은 JS로 가능하니 최대한 안쓰려고 하고 있었다. 특정 element 클릭시 스르륵 그 element로 이동하는 스크롤 이벤트를 찾아봤는데 window.scrollTo({ top: 100, left: 100, behavior: 'smooth' }); behavior가 크롬에선 사용되는데 사파리에선 안되길래 JS로 방법을 찾아봤다. JS로 하면 코드도 엄청 어려울 뿐만 아니라 코드가 엄청 길어서 결국 프로젝트에 jquery를 데리고 오게 되었다..😅 설치 npm install --save jquery 사용 jquery를 사용하는 파일에 import 후 사용 import $ from 'jquery'; 나는 .. [ Nuxt ] nuxt-link 다양하게 사용하기 ! ** 본글은 nuxt에 대한 기본적인 설명이 없으므로 nuxt에 대해 알고계셔야 도움 될 내용입니다 ! ** 페이지를 연결할때 (이동시킬 때 ) 사용하는 는 와 같은 역할을 한다. 의href와 같이 to를 이용해 형태로 사용한다 화면에 그려지고 난 뒤에는 아래와같이 a태그로 보여진다 이름을 가진 라우터를 사용할때나 데이터 값을 넣어 사용할때에는 v-bind:to=".." 를 사용한다 Props 사용하기 1 . replace ( 기본값 false ) 클릭할 때 router.push() 대신 router.replace()를 호출 뒤로가기를 하더라도 히스토리 레코드를 남기지 않으므로 이전 화면으로 돌아가지 않는다 2 . append ( 기본값 false ) 항상 상대 경로가 현재 경로에 추가된다. ex ) 예.. [ Nuxt ] layout 여러개 만들어 새로운 레이아웃 적용하기 ** 본글은 nuxt에 대한 기본적인 설명이 없으므로 nuxt에 대해 알고계셔야 도움 될 내용입니다 ! nuxt의 디렉토리 중 layouts에 대해 알게된 부분이 있어서 정리하고자 한다 defalut만 아니라 다른 형태의 layout도 사용이 가능 하다는점! 전역으로 사용하는 컴포넌트가 있어서 이걸 어떻게 빼야하나 싶었는데.. 또다른 layout용 vue파일을 만들어서 그 파일에 빼고싶은 컴포넌트를 빼고 정의해주고 사용하면 되겠지 🤤 일단 layouts은 아래와 같은 형태로 사용하며 vue에서 app.vue 처럼 화면의 base가 되는 부분이다. 에 해당하는 위치에 page며 conponent들이 불려와서 뿌려진다. layouts > defalut.vue layouts > error.vue layout의.. [ Vue ] data의 객체 안의 특정값 변경을 watch로 감지하기 watch로 기본형 데이터를 watch로 값 변경을 감지해서 사용한 적은 많은데, 객체 내의 한 특정값 감지 해야하는 상황이 생겨서 그럼 obj.data 이런식으로 선언해서 사용하면 될까? 하다가 찾게된 부분을 정리하려고한다 객체 안의 특정값 변경을 watch로 감지하기 아래와 같은 데이터를 watch를 사용해 데이터 변경 감지를 한다고 예시를 들자면, data data() { return { user:{ name : null, age: null, type : basicUser } } }, 위의 data를 예시고 데이터의 단일 값이 아닌 객체의 값을 watch로 변경 감지하는 법은 아래와 같다 watch watch:{ //데이터의 객체 안의 값 변경을 감지하는 경우 user: { deep: true, h.. [ Vue ] emit 한줄로 사용하기 - @click.self v-on:click.self 내부의 자식 요소들이 존재하는 경우 클릭된 요소가 해당 엘리먼트와 일치하는 경우에만 이벤트에 바인딩된 함수를 호출 이벤트 버블링 등의 간접적인 클릭 요소가 발생하여 함수 호출이 한 번이 아닌 다수가 일어나는 문제를 방지할 수 있다. 주의할 점은 클릭 영역에 자식 영역이 포함된 경우 당연히 함수가 동작하지 않는다 상위컴포넌트 아래의 에서 상위컴포넌트의 내용은 아래로 둘다 동일하다 (이벤트를 받는 상위 컴포넌트) 하위컴포넌트 before 하위 컴포넌트에서 상위컴포넌트로 간단한 이벤트를 전달할때 기존에 작성했던 코드는 아래와 같다. 취소 간단한 기능인데 저렇게 밖에 할 줄 몰라서 methods에 emit으로 이벤트를 올려 보내는 코드를 따로 작성해두었다 하위컴포넌트 after 하위.. [ Vue ] 컴포넌트 내에서 라우터 변경 감지하기 문제 화면이 바뀌면 메뉴창이 닫히는 부분 구현 중, 모바일 메뉴는 누르면 화면을 차지하면서 뜨는 메뉴였는데 path자체가 바뀌는 경우는 재렌더 되면서 메뉴가 닫혔으나 query만 바뀌는 경우에는 렌더가 일어나지 않아서 메뉴가 닫히지 않아 이러면 일일히 닫아주는 함수를 작성해야 하나 싶었다. this.$route를 console에 찍어 본 결과는 위와 같았다 해결 결론적으로 route가 변경되는 순간을 감지해서 메뉴창을 닫아주기로 했다. 그리고 모바일에서만 일어나면 되는 일이므로 괜히 pc에서 리소스 낭비가 될까봐 width값을 조건으로 걸어주었다 export default { watch:{ $route(){ const width = window.innerWidth if (width 이전 1 2 다음
