vue.js - basic

데이터 바인딩

입력할 데이터는 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창에 데이터를 바인딩 하여 데이터를 삽입할 수 있다.

link 속성 다루기.

<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;
        }
    }
}}

이벤트

버튼 같이 어떤 상호작용을 수행했을 때 발동하는 함수를 의미한다.

• onclick 함수를 이용하여 특정한 함수를 호출했을 경우, v-on:click을 통해서 new Vue에 정의한 methods를 호출해올 수 있다.

예시

<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>

form 구조 다루기

• 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>