- Vue.js
method
<body>
<div id="app">
{{nextYear("Hi")}}
<input v-bind:type="type" v-bind:value="inputData" />
</div>
<script>
new Vue({
el: '#app',
data: {
person: {
name: '로지 코더',
age: 34
},
inputData: 'hello',
type: 'number'
},
methods: {
nextYear(greeting) {
return (
greeting +
'!' +
this.person.name +
'내년에 ' +
(this.person.age + 1) +
'살 입니다.'
);
},
otherMethod() {
this.nextYear();
}
}
});
</script>
</body> "greeting"은 매개변수 = 파라미터
위의 "안냐세요"는 인자 = argumentmethods: {} 안에서 method를 생성할 수 있고 this. 을 통해 data:{} 에서 정의한 값이나, method를 참조할 수 있다.
data binding
v-bind:
<div id="app">
{{nextYear("Hi")}}
<input v-bind:type="type" v-bind:value="inputData" />
</div>
<script>
new Vue({
el: '#app',
data: {
person: {
name: '로지 코더',
age: 34
},
inputData: 'hello',
type: 'number'
},...bind는 묶는다는 뜻. (html 태그의 속성 대부분은 vinding이 가능하다.)
data의 값들을 태그에 적용하고 싶다면 "v-bind: "를 통해서 쓸 수 있다.
혹은,
<div id="app">
{{nextYear("Hi")}}
<input :type="type" :value="inputData" />
</div>
<script>
new Vue({
el: '#app',
data: {
person: {
name: '로지 코더',
age: 34
},
inputData: 'hello',
type: 'number'
},...이와같이 :(콜론) 만 써도된다.
이벤트
리액트에서는 이벤트를 줄 때,
<button onClick = {this.method}>Click me</button>on~을 통해서 이벤트를 부여하였다.
vue.js에서는
v-on:
이라는 것을 이용하여
<body>
<div id="app">
<button v-on:click="alert">Click Me</button>
</div>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
alert() {
alert('hi ki!');
}
}
});
</script>
</body>위와 같이 v-on: 뒤에 이벤트를 설정하고 (여기서는 click) "="과 함께 실행할 메소드의 이름을 적어준다.
이때, 메소드는 < script > 안의 method 안에 정의한다.
ex) data에 이벤트 적용
<body>
<div id="app">
{{year}}</br>
<button v-on:click="plus">더하기</button>
<button v-on:click="minus">빼기</button>
</div>
<script>
new Vue({
el: '#app',
data: { year: 2018 },
methods: {
plus() {
this.year++;
},
minus() {
this.year--;
}
}
});
</script>
</body>
각 각의 버튼에 이벤트를 적용하여 "yaer" 을 변화시킨다.
그 외의 다른 이벤트 핸들링에 대해서는 공식문서에 잘 나와있다.
(vue.js 공식문서)
함께 일하고 싶은 개발자를 목표로 매일을 노력하고, 옷을 좋아하는 권기현 입니다.