Vue
-
nuxt를 배워보자개발/JS 2018. 4. 9. 22:50
nuxt.js 공식 가이드에서 필요한 내용만 정리한 글입니다. 1. Nuxt.js starter 템플릿을 통해 빠르게 사용하기. > npm install -g vue-cli #vue-cli가 설치되지 않았다면, 해당 명령어로 설치해야한다.> vue init nuxt-community/starter-template > cd > npm install> npm devvue-cli 설치하지 않은 상태에서 vue init 실행하려 할 때, 아래와 같은 메시지가 나타난다.Command vue init requires a global addon to be installed.Please run yarn global add @vue/cli-init and try again. 개발모드[Development]> npm ru..
-
Vue2 65분만에 배우기!개발/JS 2018. 4. 7. 22:57
유튜브 영상 The Vue Tutorial for 2018 - Learn Vue 2 in 65 Minutes 중 몰랐던 내용 정리한 글입니다. 1. Vue-CLI 설치하기 Vue-CLI를 통해 Vue 프로젝트를 빠르고 쉽게 생성할 수 있다.> mkdir vue-toy> cd vue-toy > npm install -g @vue/cli -- Vue-CLI 설치> vue create vue-voca -- Vue 프로젝트 생성[ vue create 프로젝트이름 ]2018.04.09추가) yarn 설치 후, yarn을 통해 Vue-Cli 설치하는 방법> npm install -g yarn> yarn global add @vue/cli 뷰 프로젝트를 생성하면 다음과 같은 프롬프트를 볼 수 있다.Vue CLI v3..
-
Vue.js의 $refs를 통해 dom에 접근하기개발/JS 2018. 4. 5. 22:20
뷰에서는 $refs 속성을 이용해 DOM에 접근할 수 있습니다. 템플릿 안의 엘리먼트에 ref 속성을 추가함으로서, 뷰 인스턴스에 이 엘리먼트에 대한 정보를 줄 수 있습니다.또한, 우리는 이 엘리먼트에 접근할 수 있습니다. ref 속성은 HTML의 표준속성이 아니며, 심지어 DOM의 일부가 아니기도 합니다. 그래서, HTML 렌더링 후, 우리는 콘솔창에서 ref 속성을 찾을 수 없습니다. $refs 객체의 키는 엘리먼트의 ref속성에 정의한 값이 되며, 값은 해당 DOM 엘리먼트입니다.우리가 엘리먼트에 접근할 수 있다는 것은 곧, 엘리먼트를 변경할 수 있다는 것과 같습니다. 물론, 우리는 순수 자바스크립트의 querySelector을 이용해 DOM 엘리먼트에 접근할 수 있습니다.하지만, ref 속성은 좀..