728x90
반응형
1. v-bind : 요소의 속성을 데이터로 지정합니다.
◎ image 속성 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h2>이미지 속성을 지정하는 예제</h2>
<div id="app">
<img src="face1.png">직접지정</img>
<img v-bind:src="fileName">v-bind로 지정</img>
<br>
<img a :src="fileName">v-bind 생략</img>
</div>
<script>
new Vue({
el: '#app',
data:{
fileName:'face1.png'
}
})
</script>
</body>
</html>이미지 변수를 만들어 v-bind:src="프로퍼티명"으로 지정할 수 있습니다.
또한, v-bind는 생략하고 a태그를 사용하면 동일하게 적용됩니다.
◎ url 속성 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<a href="https://roadbook.co.kr/">링크를 직접지정</a><br>
<a v-bind:href="myURL">링크를 v-bind로 지정</a><br>
<a a :href="myURL">링크를 v-bind로 생략 지정</a><br>
</div>
<script>
new Vue({
el: '#app',
data:{
myURL:'https://roadbook.co.kr/'
}
})
</script>
</body>
</html>url 변수를 만들어 v-bind:href="프로퍼티명"으로 지정할 수 있습니다.
이미지와 동일하게 v-bind는 생략하고 a태그를 사용하면 동일하게 적용됩니다.
◎ align 속성 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>align 지정 예제</h2>
<div id="app">
<p align="right">우측정렬 직접 지정</p>
<p v-bind:align="myAlign">우측정렬을 v-bind로 지정</p>
<p a :align="myAlign">우측정렬을 v-bind 없이 지정</p>
</div>
<script>
new Vue({
el:'#app',
data:{
myAlign:'right'
}
})
</script>
</body>
</html>align 변수를 만들어 v-bind:align="프로퍼티명"으로 지정할 수 있습니다.
지정하는 방향으로 글자가 정렬이 됩니다.
◎ 표기법(케밥 표기법, 카멜 표기법, 파스칼 표기법)
▷ 케밥 표기법 : 단어 - 단어 (font-size) → 모두 소문자, 주로 HTML, CSS에서 사용합니다.
▷ 카멜(낙타) 표기법 : 단어단어 두번째 단어의 첫글자를 대문자 표기 (fontSize) → JavaScript에서 주로 사용합니다.
▷ 파스칼 표기법 : 단어의 첫글자를 모두 대문자표기 (FontSize) → JavaScript에서 Class명 등에 사용합니다.
▷ 인라인 스타일 지정 : 카멜 표기법으로 되어있습니다.
◎ style 속성 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<h2>인라인 지정 예제</h2>
<div id="app">
<p style="color: #ee8800;">문자색 직접 지정</p>
<p v-bind:style="{color: myColor}">문자색을 v-bind로 지정</p>
<hr>
<p style="font-size: 200%;">글자 크기 직접 지정</p>
<p v-bind:style="{fontSize: mySize}">글자 크기를 v-bind로 지정</p>
<hr>
<p style="background-color: aqua;">배경색 직접 지정</p>
<p v-bind:style="{backgroundColor: myBackColor}">배경색을 v-bind로 지정</p>
</div>
<script>
new Vue({
el: '#app',
data:{
myColor:'#E08000',
mySize:'200%',
myBackColor:'aqua'
}
})
</script>
</body>
</html>style관련 변수를 만들어 v-bind:style="{적용스타일 : 프로퍼티명}"으로 지정할 수 있습니다.
HTML에는 케밥 표기법을 사용하고 Script에는 카멜 표기법을 사용해야합니다.
◎ class 속성 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
.strike-through{
text-decoration: line-through;
color: lightgray;
}
.dark{
background-color: gray;
}
</style>
</head>
<body>
<h2>클래스 지정 예시</h2>
<div id="app" >
<p class="strike-through">직접 클래스 지정</p>
<p v-bind:class="myClass">v-bind로 클래스 지정</p>
<p v-bind:class="[myClass, darkClass]">v-bind로 복수의 클래스 지정</p>
<p v-bind:class="{'strike-through':isON}">데이터로 클래스 ON/OFF</p>
</div>
<script>
new Vue({
el: '#app',
data:{
myClass: 'strike-through',
darkClass: 'dark',
isON: true
}
})
</script>
</body>
</html>class를 데이터로 지정하는 방법은 아래와 같습니다.
1. <p class="strike-through"></p> : 속성을 바로 적용
2. <p v-bind:class="프로퍼티명"></p>
3. <p v-bind:class="[프로퍼티명1, 프로퍼티명2]"></p>
4. <p v-bind:class="{'클래스명':프로퍼티명}">데이터로 클래스 ON/OFF</p>
여기서 v-bind:class는 붙여서 쓰셔야합니다. 띄워쓰면 결과 출력에 오류가 발생합니다!
◎ 학습한 다양한 데이터들의 출력 확인 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.blue-underline{
color: blue;
text-decoration: underline;
}
.dark{
background-color: darkgrey;
}
</style>
</head>
<body>
<h2>다양한 바인딩</h2>
<div id="app">
<a v-bind:href="myUrl">네이버로 연결<br></a>
<img v-bind:src="myImage">face2.png 표시</img>
<p v-bind:align="textLeft">텍스트 왼쪽 정렬</p>
<p v-bind:align="textRight">텍스트 오른쪽 정렬</p>
<p v-bind:align="textCenter">텍스트 가운데 정렬</p>
<p v-bind:style="{color : tRed}">인라인 스타일로 글자색을 빨간색으로</p>
<p v-bind:style="{color : tRed, fontSize : tSize}">
인라인 스타일로 글자크기를 150% 크게 빨간색으로</p>
<p v-bind:style="{color : tRed, fontSize : tSize, backgroundColor : tBack}">
인라인 스타일로 글자크기를 150% 크게 빨간색으로 배경은 노란색으로</p>
<p v-bind:class="firClass">blue-underline class 지정</p>
<p v-bind:class="[firClass, secClass]">blue-underline class 지정</p>
</div>
<script>
new Vue({
el: "#app",
data: {
myUrl: 'https://www.naver.com',
myImage: 'face2.png',
textLeft: 'left',
textRight: 'right',
textCenter: 'center',
tRed: 'red',
tSize: '150%',
tBack: 'yellow',
firClass: 'blue-underline',
secClass: 'dark'
}
})
</script>
</body>
</html>위 예시처럼 입력하시면 아래와 같은 결과가 나타납니다.
또한 style 적용시 <p v-bind:style="프로퍼티명"></p>
<p v-bind:style="size"></p> <script> new Vue({ el: "#app", data: { size: 'fontSize : 150%', } }) </script>
위와 같은 형식으로 적용할 수 있습니다.
Vue.js를 사용할 때는 오타가 있어도 코드가 동작하기 때문에 틀린 것을 찾기가 쉽지 않네요,,,
그래도 F12의 개발자 도구를 통해 틀린부분을 찾으면 어떤 부분이 틀렸는지 짐작할 수 있어요!
계속해서 달려보겠습니다!!
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
728x90
반응형
'FrontEnd > java script' 카테고리의 다른 글
| [java script] Vue.js 유저 조작과 연동(v-on) (0) | 2022.12.22 |
|---|---|
| [java script] Vue.js 유저 입력 연결(v-model) (0) | 2022.12.22 |
| [java script] Vue.js 입문 데이터 표시(new Vue, v-text, v-html) (0) | 2022.12.21 |
| [java script] Vue.js 입문 start (0) | 2022.12.21 |
| [java script] DOM 노드 추가, 삭제 연습 문제 (0) | 2022.12.20 |
