App.js //export default App; 를 넣거나 export default function App(){ 를 쓰기 import "./App.css"; function MyButton(){ //js코드 ==vue script 부분 //컴포넌트의 이름은 항상 대문자로 시작 return I'm a button //return vue== template 부분 } //arrow 함수 const MyButton2 = (props)=> { return I'm a button2 }; export default function App(){ return( Welcome to my app ); } //export default App; Button.js function MyButton (){ return but..

부서삭제 부서삭제 부서번호 삭제 {{ msg }} 부서번호 부서이름 위치 {{ dept.deptno }} {{ dept.dname }} {{ dept.loc }} npm install vue-router props Bar Bar{{ pw }} Baz Baz {{ pw }} Foo Foo props-od:{{ id }} $router.params.id={{ $useRouter.params.id }} Knu knu userid={{ userid }} NotFound Not Found app에서 라우팅연습 Home login/abcd Baz-pw /my/abcd knu {iserid:"홍길동"} http://localhost:8081/#/login/abcd http://localhost:8081/#/my/12..

eventBus eventBus.vue HelloWorld.vue {{msg}} HelloWorld2로 이벤트 전달 HelloWorld2.vue {{ msg }} app.vue EventBus Input.vue list.vue {{ index + 1 }}. {{ data }} 삭제 App.vue slot 아름다운 밤입니다 {{ msg }} App.vue {{ A.message }} {{ A.header }} {{ A.footer }} HelloWorld.vue {{ msg }} {{ footerText }} src_14_slot4_SpeechBox_named helloWorld.vue {{ msg }} App.vue {{ A.header }} {{ A.message }} {{ A.footer }} axo..

event01_click2 {{ result }} 값1: 값2: + - * / 이벤트 실습 가격: 갯수: 10 15 20 {{ total }} 도서목록{{ msg }} {{ book.name }}, {{ idx }}번, 가격: {{ book.price }} 삭제 선택삭제 람다 도서목록{{ msg }} {{ book.name }}, {{ idx }}번, 가격: {{ book.price }} 삭제 선택삭제 이벤트 @click="prevent” preventDefault(); target.html로 이동 {{ msg }} 다음 -preventDefault 구글 전송 이벤트 수식어 {{ msg }} x() x() once 2. preventDefault이벤트 수식어 다음1 y 다음2 y2 다음2 prevent ..

dummy hello1 dummy dummy hello2 dummy hello3 hello4 {{ amount }} 100보다 큰 값만 입력 가능 정상적으로 입력 directive05_exam5 exam 이름: 이름은 4글자 정상적으로 입력 나이: 10살보다 크거나 120살보다 작은 값만 입력가능 이름길이 :{{ username.length }}, 나이: {{ age }} elseif 점수: 점수는: {{ grade }} A학점 B학점 C학점 F학점 v-for array {{ names }} index 없이 - {{ name }} index 지정 {{ index }}: {{ name }} v-for (img, select,div 그룹핑 img-bind ./components/BookList.vue Boo..

vue.js vue - 푸론트 javascript 파일 vue2 : update 종료 cli 방식 p/g :프로젝트 단위로 vue 파일 작성 ⇒ build 이후 html 이나 jsp 에 포함 cdn 방식 p/g: 라이브러리를 html, jsp , thymeleaf 에서 직접 (jquery 방식) vue3 cli 방식 p/g :프로젝트 단위로 vue 파일 작성 ⇒ build 이후 html 이나 jsp 에 포함 cdn 방식 p/g: 라이브러리를 html, jsp , thymeleaf 에서 직접 (jquery 방식) vue create 프로젝트명 npm install npm run serve ⇒server 가동 ctrl + c ⇒ 서버 끄기 App.vue 부모컴포넌트의 값 {{x}} {{ y }} {{z[0]..