기억하지 못해 남겨두기

02. Vue 가이드 문서 따라가기 Vue 인스턴스 <div id= 'app' > <div> {{msgA}} </div> <div> {{msgB}} </div> <button v-on:click= 'changeMessage' > Change! </button> </div> <script> //msgB는 반응성을 가지지 않음 const vm = new Vue({ el: '#app' , data : { msgA : 'Message A.' }, methods : { changeMessage(){ this .msgA = 'Changed message A!' this .msgB = 'Changed message B!' } }, } }) < /script> 생성될때 정의되지 않으면  데이터는 반응성을 보이지 않는다. {{msgB}}는 동작을 하지만 vm.msgB값을 넣어도 반응하지 않는다. 라이프 사이클 <div id= "app" > <div ref= 'msg' > {{msg}} </div> <div ref= 'div' ></div> </div> <script> const vm = new Vue({ el : '#app' , data : { msg : 'Hello Vue!' },

01. Vue 시작하기 노드 설치 및 팁 https://heropy.blog/2018/02/17/node-js-install/ 패키지 매니저로 설치시 Mac - Homebrew brew install node@12 Windows - Chocolately choco install nodejs-lts 버전관리 노드 설치전 mac - NVM wondows - nvm-windows, nodist 노드 설치후 n쓰면 됨 웹 에디터 Codepen, JSFiddle은 Vue세팅이 가능함 JSBin은 CDN갖다가 붙여야 하긴함 선언적 렌더링 {{msg}} = 템플릿 문법 v-bind 속성은 디렉티브(v-접두어) 조건문 반복문 조건문 <div id= "app-3" > <p v-if= "seen" > 이제 나를 볼 수 있어요 </p> </div> var app3 = new Vue({ el: '#app-3' , data: { seen: true } }) 반복문 <div id= "app-4" > <ol> <li v-for= "todo in todos" > {{ todo.text }} </li> </ol> </div> var app4 = new Vue({ el: '#app-4' , data: { todos: [ { text: 'JavaScript 배우기' }, { text: 'Vue 배우기' }, { text: '무언가 멋진 것을 만들기' } ] } }) 사용자 입력 핸들링 <div id= "app-5" > <p> {{ message }} </