Vue databinding

개발을 하면서 항상 명심할 것은 내가 짜 보지 않은 코드는 나의 코드가 아니며 내가 다른 사람의 코드를 따라 친 것은 한컴타자연습일 뿐 개발이 아니다. 스스로 생각하며 문법에 대한 단순한 암기가 아닌 활용을 할 때 비로소 개발을 하는 것이다.

 

Vue 데이터 바인딩

1. 하드코딩해두면 나중에 변경할 때 하나하나씩 손수 해줘야 함 

2. vue 실시간 자동 랜더링 기능 사용하려면 써야 함 (실시간으로 변경되는 값 처리)

<template>
..................................................................
html 의 모임입니다. 기존 html과 css 문법이 동일합니다.

<div>hi123</div>
<div :style = "속성">{{price1}}</div>  


이곳에 html 내용을 적습니다.
{{}}   - > 데이터 바인딩 
기록되어있는 데이터를 바인딩합니다.

현재 price1 : 60, 임으로 
{{price1}} 이렇게 바인딩 되어집니다.
..................................................................
</template>



<script>


export default {
name: 'App',
..................................................................
	data() {
    	return {
      		price1 :  60,
            속성 : 'color : red'
      
    	}
  	},
    스크립트에 안에 위치하는 데이터 저장소 return 값으로 데이터를 넣습니다.
    json 형식을 가지고 있습니다. 
..................................................................

..................................................................
components: {
    
    
  }
  컴포넌트 모임
..................................................................



}


</script>


..................................................................
CSS의 모임입니다. 기존 html과 css 문법이 동일합니다.

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>


..................................................................

 

Vue는 javascript 를 보완하기 위해 만들어졌습니다.

그러므로 html  = template에  css = style에 동일하게 들어옵니다.

Vue를 사용하기 위해 존재하는 데이터 등 일체는 script 태그 안에 위치합니다. 이는 javascript 성격과 동일합니다.

 

script 태그안 data(){return {데이터 모임}} 데이터를 저장할 수 있고 데이터 바인딩을 통해 template에 위치한 html에 넣을 수 있다는 것을 배웠습니다.

 

데이터 바인딩이 어떠한 값에대한 매칭이라면 속성에대한 매칭은 기호 : 로 실시합니다.

<div :style = "속성">{{price1}}</div> 

            속성 : 'color : red'