vue js 속성 데이터바인딩
vue js 속성 데이터바인딩 — #vuejs #속성데이터바인딩 학습법 이론 학습을 하기 이전, 명심해야할 학습법이 있다. 1.이해가지 않는다고...
#vuejs #속성데이터바인딩
학습법 이론
학습을 하기 이전, 명심해야할 학습법이 있다.
1.이해가지 않는다고 뒤돌아가 다시 보지 말 것
2.외우지 말라
=> 자주 봐서 외워짐을 당하라
=> 크롬을 통해 copy and paste하라
- 이해하는게 중요하다
=> 왜 생겨났는지?
=> 왜 사용하는지?
===> 응용이 가능해진다.
4.새로운 지식을 넣을땐 뇌를 비우자
Vue js 속성 데이터바인
Vue Js attiribute DataBinding
vue js을 더욱 편리하게 사용해주는 기능은 무엇보다 데이터바인딩일 것 입니다. 이전글에 text,html 데이터 바인딩을 배웠고 양방향 데이터 바인딩인 v-model도 다뤘습니다.
오늘은 vue js 에서 자주쓰일 속성 데이터 바인딩, class데이터 바인딩을 다뤄보겠습니다.
vue js 속성데이터 바인딩
v-model의 경우 사용자가 입력하는 값이 실시간으로 js와 바인딩되어 값이 변합니다. 아주 편리한 기능을 제공하지만, 사용자가 임의로 수정하면 안되는 값들이 있습니다. 이럴떄는 속성에 v-model형식으로 양방향바인딩을 해두는 것보다 v-vind를 사용하는것이 좋습니다.
| <template> <div> <input type="text" :value="myName"> </div></template><script>export default { components: {}, data() { return{ myName:"철수", } }, setup() {}, created() {}, mounted() {}, unmounted() {}, methods: {}}</script><style scoped></style> |
|---|
위는 v-vind의 축약형인 :속성명 형태로 사용한 예시입니다. 결과는 아래와 같습니다.
이번에는 img태그의 src값을 바인딩 해서 vue js로고를 구현해보겠습니다.
| <template> <div> <img :src="imgSrc" alt=""> </div></template><script>export default { components: {}, data() { return{ imgSrc:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThq-rUnFQMuY2pOQO4XD4Y\_cLtXD0Rh8r3Qw&usqp=CAU", } }, setup() {}, created() {}, mounted() {}, unmounted() {}, methods: {}}</script><style scoped></style> |
|---|
src속성도 잘 바인딩 되는 것을 확인하실 수 있습니다.
vue js class데이터 바인딩
프론트엔드 개발에서 class만큼 중요한건 없을 것 같습니다. 특정 class에는 공통적인 style이 저장되어 있어 개발하는데 효율성을 높이기도 합니다. 가령 .btn .active .on 같은 클래스들은 자주쓰이며 개발자는 미리 클래스에 해당하는 속성을 저장해둡니다.
Vue Js는 프론트엔드 개발에 날개를 달아줄 class 데이터 바인딩 기능을 제공합니다.
| <template> <div> <h2 :class="{'red-text':true}">Red Text</h2> <h2 :class="{'green-background':true}">green-background</h2> </div></template><script>export default { components: {}, data() { return{ } }, setup() {}, created() {}, mounted() {}, unmounted() {}, methods: {}}</script><style scoped>.red-text{ color: red;}.green-background{ background: lawngreen; color: #fff;}</style> |
|---|
위 코드를 분석해보면 style태그에 .red-text와 .green-background 클래스의 속성을 미리 저장해두었습니다. 이후 class를 적용할 요소에 class="{key:value}"형태로 바인딩이 가능합니다. 객체형태로 바인딩이 가능함을 기억하시면 좋습니다. 이때 key는 "class name" value=true입니다.
key에는 " "가들어가는데 class name이 dash(-)로 연결되지않는 한단어일 경우 사용하지 않아도됩니다. ex) .btn, .active 등
value에 true를 주게되면 해당태그는 key에 해당하는 클래스를 부여받게됩니다.