< img src="선생님과의 카톡 캡쳐" alt="꼭 잘돼야만 하는 이유">
1. v-on:이벤트="" 또는 @이벤트=""
js파일에
const App= Vue.createApp({}) 형식으로 만들어
return 할 값으로 count : 0을 만들었다.
html파일에는
div#app 안에 button 을 하나 만들어
이벤트를 받는 형식인
< button v-on:click="count++" ></ button >
또는
< button @click="count++" ></ button >
을 만들어 count 가 0부터 증감될 수 있도록 만들고 {{count}}를 받았다!
성공~!
모르거나 헷갈릴 때는 Vue 에 들어가서 찾아보기
methods 사용하기
js 파일에 아까처럼 js파일에
const App= Vue.createApp({}) 형식으로 만들어
return 할 값으로 name : 'click me!' 를 만들었다.
여기서 methods 를 사용한다!
methods 를 만들어
Action(message)를 만들고 console.log 작성하여 확인할 수 있도록 하고,
위의 name을 this.name=message 로 만들어
매개변수 message 에 name 을 넣는다.
html 창에는
div#app 안에
<button @click="(바뀐 이름인)Action('love u!')">{{name}}< /button >
을 만든다.
클릭하면 love u! 로 버튼이 바뀐다.
3.v-model
v-model 은
html 과 데이터를 연결하는 v-bind 와
이벤트를 Vue로직에 연결하는 v-on 이 결합된 기능의 디렉티브이다.
js 파일에 두 개의 형식을 만든다.
div#app 연결한 Vue 형식 안에는 return할 값을 max: 10 으로,
div#text 연결한 Vue 형식 안에는 str : ''(공백) 으로 만든다.
html 에는
div#app 안은
label 과 input type="number" 을 사용한다.
lable 은 price 를,
input type 은 number, v-model="max" 로 js 에서 선언했던 이름을 연결하고
span 태그안에 최고가 : {{max}} 를 연결한다.
div#text 안은
label 과 input type="memo" 을 사용한다.
lable 은 memo 를,
textarea 를 열어 name="memo" v-model="str" 로 js 에서 선언했던 이름을 연결하고
span 태그안에 memo : {{str}} 을 연결한다.
v-model.... 신기해....!
이번엔 다른 형식의 input 을 사용해보자!
checkbox를 사용해보겠다
js 에
div#app 을 연결한 Vue 형식 안에는 checked : str 으로 만든다.
html 에는
div#app 안에
label 과 input type="checkbox" 를 사용한다.
lable 은 checkbox 로, {{checked}} 를 내보내고,
input type 은 checkbox, v-model="checked" 로 js 에서 선언했던 이름을 연결한다.
배우면서 마스크 속으로 오! 오! 했던 ㅋㅋㅋ 기능이었다.
component
component 에 대해 알아봅시다잇
알고 있던 기존 html 태그와는 다르게
내가 만든 이름으로 태그를 만들 수 있다니...!
짱 신기해...
형식만 손에 익으면 잘 할 수 있을 것 같다
props 는 부모 컴포넌트가 자식 컴포넌트에게 하달하는 값이다. 넣고 싶은 키값을 넣어두는 집합처럼 만든다.
template 정의도 읽고
'hi-vue'라는 이름을 사용해 만들어겠읍니다.
먼저 js 에
const App=Vue.createApp({}); 로 시작해 중간에 component 를 넣어준다.
const App=Vue.createApp({});
'
App.component(
'hi-vue',{
props:['name','num','seasons','song'],
template: '< p>{{name}} : {{num}} - {{seasons}} : {{song}}
}
)
App.mount('#app')
'hi-vue'라는 컴포넌트 명으로,
name, num,seasons,song 네 개의 속성을 사용해
name : num - seasons: song 의 형태로 화면에 출력하겠다는 뜻!
html 에는
div#app 안에
< hi-vue name="조" num="1997" seasons="spring" song="do">
< hi-vue name="혜" num="0311" seasons="summer" song="re">
< hi-vue name="진" num="tuesday" seasons="winter" song="mi">
이렇게 컴포넌트 명을 태그로 만들어 속성에 데이터를 넣어주었다!!!
짜 란
