Vue 데이터바인딩

데이터바인딩

• 분리된 뷰와 모델을 공통적으로 동작하기 위해 하나로 묶어 연결하는 것

사용 이유

• html하드 코딩하면 나중에 변경이 어려움
• Vue의 실시간 자동 렌더링 이용 가능

1. data (정보 저장소)

• < script > 태그 내 data() { } 의 중괄호 안에서 사용할 변수, 배열 등을 선언하여 < template > 태그 안에서 변수로 사용 가능

2. methods (함수 저장소)

• < script > 태그 내 methods: { } 의 중괄호 안에서 사용할 함수 선언하여 js 함수 사용가능

3. this

• data값이나, methods 함수 불러오는 등에 사용

ex)

<template>
	
    <div id="데이터이름">
    // {{  }} 를 사용하여 해당 데이터 사용
    	<p> {{ 데이터1 }} </p>		//6
        0출력
        <p> {{ 데이터2 }} </p>		//70출력
        <p> {{ 어레이 }} </p>	//['80', '90', '100']출력
        <p> {{ 어레이[0] }} </p> //80출력
        <p> {{ 어레이[1] }} </p> //90출력
        <p> {{ 어레이[2] }} </p> //100출력
        
        <p> {{ printHelloWorld() }} </p> //"HelloWorld"출력
        <p> {{ printData() }} </p> //60출력
    </div>

</template>


<script>

export default {
	name: '#데이터이름',	//어떤 요소에 적용할지 지정, 해당 예제는 id="데이터이름"에
	data() {		//사용할 정보 선언
    	return {
        	데이터1 : 60	//저장 데이터
            데이터2 : 70
            어레이 : ['80', '90', '100'],
        }
    }
}


    methods: {		//사용할 함수 선언
    	printHelloWorld: function() {
        	return "HelloWorld"
        }
        printData: function() {
        	return this.데이터1
        }
    }
</script>

학습 사이트

https://v2.ko.vuejs.org/v2/guide
https://medium.com/@hozacho/%EB%A7%A8%EB%95%85%EC%97%90-vuejs-%EB%A6%AC%EC%8A%A4%ED%8A%B8-462d88047893