본문 바로가기

FrontEnd/java script

[java script] Vue.js 속성(v-bind, a, class)

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
반응형