입력할 데이터는 v-bind:value를 통해 데이터를 바인딩 할 수 있다.
사용방법
<input v-bind:type = "text" v-bind:value = "inputData">
<script>
new Vue{{
el: '#app',
data:{
inputData: 'hello world'
type : 'text'
}
}}
</script>
//이렇게 사용하여 미리 v-bind를 통해 input창에 데이터를 바인딩 하여 데이터를 삽입할 수 있다.
<a :href = "link">이동하기</a>
<script>
new Vue{{
el: '#app',
data:{
link : 'https://www.youtube.com'
}
}}
</script>
//a href 링크를 바인딩하여 a href 링크를 사용할 수 있다.
함수 응용 방법
<a :href = getChannelLink(${model로 서버에서 넘겨받은 값})이동하기</a>
new Vue{{
el: '#app',
data:{
link : 'https://www.youtube.com/'
},
methods:{
getChannelLink(channel){
return link + channel;
}
}
}}
버튼 같이 어떤 상호작용을 수행했을 때 발동하는 함수를 의미한다.
예시
<div id = "app">
<button v-on:click="alert">Press Button</button>
<button v-on:click="plus">더하기</button>
<button v-on:click="minus">빼기</button>
{{number}}
</div>
<script>
new Vue({
el : "#app",
data:{
number : 2023
},
methods:{
alert(){
alert('특정한 영역에서 alert함수를 실행했을 때 실 행되는 함수');
},
plus(){
this.number++;// 이때{{number}}의 수는 바로 적용된다.
},
minus(){
this.number--;
}
}
});
</script>
- vue.js에서 form을 다루면서 서버에 값을 전송해본다.
form의 속성 중에서 경로를 다루는 action, 보낼 타입을 post, get을 결정하는 submit을 보내기 전에 return을 써서 함수를 호출하는 onsubmit
onsubmit을 보내는 속성은 @submit으로 할 수 있다.
<form @submit="validateForm">
<!-- 폼 필드들 -->
<input type="text" v-model="formData.field1" />
<input type="text" v-model="formData.field2" />
<button type="submit">Submit</button>
</form>
<script>
export default {
data() {
return {
formData: {
field1: '',//여기서 formData의 구조체를 만들고 input에 바인딩을 할당하여, vue 컴포넌트에서 값을 사용할 수 있게 정의해놓은 것이다.
field2: ''
}
};
},
methods: {
validateForm(event) {
// 유효성 검사 로직을 여기에 구현한다.
if (this.isValidFormData()) {
// 유효성 검사 통과시 폼 제출을 계속한다.
// 여기서는 아무 동작도 하지 않음
} else {
// 유효성 검사 실패시 이벤트를 중지하고 제출을 방지한다.
event.preventDefault();
}
},
isValidFormData() {
// 여기에서 실제 유효성 검사 로직을 구현.
// 필드를 검사하고, 유효하지 않으면 false를 반환.
// 유효한 경우 true를 반환.
if (this.formData.field1 === '' || this.formData.field2 === '') {
// 예제 유효성 검사: 필드가 비어있으면 유효하지 않음
return false;
}
return true;
}
}
};
</script>
form을 submit할 때 페이지가 리로딩되는데, 이를 막으려면 prevent속성을 이용한다.
참고 링크 - vue.js 이벤트
사용 방법은 바인딩된 태그에 속성을 붙여넣는 것이다.
종류
.stop
.prevent
.capture
.self
.once
.passive
<!-- 이벤트 전파가 중단된다 -->
<a v-on:click.stop="doThis"></a>
<!-- 제출 이벤트가 페이지를 다시 로드 하지 않는다. -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 수식어는 체이닝 가능하다 -->
<a v-on:click.stop.prevent="doThat"></a> 중단하고 리로딩도 하지 않음.
<!-- 단순히 수식어만 사용할 수 있습니다 -->
<form v-on:submit.prevent></form>
<!-- 이벤트 리스너를 추가할 때 캡처모드를 사용합니다 -->
<!-- 즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리합니다. -->
<div v-on:click.capture="doThis">...</div>
<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다 -->
<!-- 자식 엘리먼트에서는 안됩니다 -->
<div v-on:click.self="doThat">...</div>