Vue.JS 2 Tutorial #2 - The Vue Instance
Live Server를 설치 https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
ATL+L ATL+O누르면 시작하고, ALT+L, ALT+C하면 stop됩니다.
아래쪽에 클릭하세요
현재 포트 5500에서 동작중.
index.html 안에
script:src<tab> app.js Ctrl+Shift+enter로 위의 줄 입력모드로
div#vue-app<tab> enter h1<tab> space ← {{ space name space 순으로 입력 (여기서 <h1></h1>안에 {을 입력하면 자동으로 생성이 안되네요. 뒤에 글자가 있어서 그런것 같습니다. <h1> </h1> 뒤쪽에 스페이스를 넣어 두고 타이핑하면 생기는데.. 이것은 좀 찾아 봐야겠네요..)
Spaces inside braces 라는 모듈을 설치하면
https://marketplace.visualstudio.com/items?itemName=AiryShift.spaces-inside-braces
Braces안에 스페이스 한개를 넣으면 자동으로 2개를 넣어 주는 기능입니다.
{{ space name 만 입력하면 됩니다.
app.js
new Vue ( { enter
el: '#vue-app end 키 , enter
data: { enter name: 'Hello world
저장은 CTRL+S
Live Server 브라우저를에 Hello world가 나오면 성공입니다.
https://github.com/iamshaunjp/vuejs-playlist/tree/lesson-2
댓글 1개
짜증나게 제일 마지막줄에 나오네요.. 영어라 잘 눈에 안들어 오니
File>Preferences>Settings 또는 CTRL+, 에서 Search settings에 autoClosingBrackets 를 찾아서
'languageDefined' 를 'always' 변경하세요. Space inside braces도 설치하면..
h1<tab> {{ space name 입력하시면 됩니다.