728x90
- Vue 인스턴스
- Vue 인스턴스에서 제공되는 옵션을 붙여 개발 할 수 있다.
- el : id를 찾는 함수
- data : 값을 넣을 데이터
<body>
<div id="app">
<p>{{ myText }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
el: '#app', //id="app"
data: {
myText:"Hello"
}
})
</script>
</body>
2. 데이터 표시 {{데이터}}
- v-text : 프로퍼티 html에 표현할 때는 {{ 프로퍼티 이름}} 형식으로 표현
- v-html : HTML로 표현
<div id="app">
<p>{{ myText }}</p>
<p v-text="myText"></p> <!-- v-text라는 디렉티브를 통해 myText -->
<p v-html="myText"></p>
</div>
<script>
new Vue({
el: '#app', //id="app"
data: {
myText: '<h1>Hello!!</h1>'
}
})
</script>- v-text와 {{myText}는 프로퍼티 텍스트를 그대로 출력하지만, v-html은 HTML로 표현된다.
3. 데이터 종류
- Vue에서 데이터 타입은 숫자형, 문자형, Boolean이 있다.
<h1>데이터 종류</h1>
<div id="app">
<p>{{ myPrice * 1.08 }}</p>
<p>{{ "안녕하세요~" + myName + "님"}}</p>
<p>{{ myName.substr(0,1) }}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
myPrice : 500,
myName : '김대환'
}
})
</script>- 배열 오브젝트
<h1>배열,오브젝트</h1>
<div id="app2">
<p> {{ myArray }} </p>
<p> {{ myArray[0] }}</p>
<p> {{ myObject.name }}</p>
<p> {{ myObject.price }}</p>
</div>
<script>
new Vue ({
el: "#app2",
data: {
myArray : ['백엔드', '프론트엔드', '개발자' ],
myObject : {name:'백엔드', price:600}
}
})
</script>- 프로퍼티에 배열, 오브젝트를 설정해 HTML에 출력할 수 있다.
4. 속성 지정
- v-bind : 태그의 속성을 vue에서 지정할 수 있는 디렉티브다.
<div id="app">
<input :type='type1'> <!-- v-bind 생략 가능함 -->
<input v-bind:type='type2'>
<a :href="url">url</a>
<p v-bind:class="class1">v-bind 클래스 지정</p>
<p v-bind:class="[class1, class2]">다중 클래스 지정</p>
<p v-bind:class="{'test-class1' : isON}">클래스 ON/OFF</p> <!-- isON의 값이 true/false -->
</div>
<script>
new Vue({
el: "#app",
data: {
url: 'https://naver.com',
type1 : 'radio',
type2 : 'text',
class1 : 'test-class1',
class2 : 'test-class2',
isON : true
}
})
</script>
5. 입력 폼 연결
- v-bind를 통해 input에서 입력한 값을 프로퍼티에 저장 가능하다.
<h2>입력한 문자열을 표시하는 예제</h2>
<div id="app">
<!-- v-model 을 사용해서 프로퍼티에 값을 input값으로 저장 가능 -->
<input v-model="input_model" placeholder="이름">
<p>input model : {{ input_model}} </p>
<!-- lazy는 input의 포커스를 다른 곳으로 이동할 때 프로퍼티에 저장하는 기능 -->
<input v-model.lazy="input_model2">
<p>input lazy model : {{ input_model2 }}</p>
<!-- textarea 에서도 v-model 을 사용 가능 -->
<textarea v-model="textarea_model"></textarea>
<p>textarea model : {{ textarea_model }}</p>
<!-- checkBox 에서 사용 예제에 저장된 프로퍼티를 v-bind를 통해 로직 실행 가능 -->
<input type="checkbox" v-model="checkbox_model" value="awd">
<button v-bind:disabled="checkbox_model === false">disabled</button>
<p>checkbox model : {{ checkbox_model }}</p>
<!-- 프로퍼티를 배열로 선언하면 value 값을 저장 -->
<input type="checkbox" v-model="checkbox_model2" value="test1">
<input type="checkbox" v-model="checkbox_model2" value="test2">
<p>checkbox model : {{ checkbox_model2 }}</p>
<!-- 라디오 프로퍼티 저장 -->
<input type="radio" v-model="radio_model" value="test1">
<input type="radio" v-model="radio_model" value="test2">
<input type="radio" v-model="radio_model" value="test3">
<p>radio model : {{ radio_model }}</p>
<!-- select 프로퍼티 저장 -->
<select v-model="select_model">
<option>test1</option>
<option>test2</option>
</select>
<p>select model : {{ select_model }}</p>
</div>
<script>
new Vue ({
el: "#app",
data: {
input_model : '',
input_model2 : '',
textarea_model : '',
checkbox_model : false,
checkbox_model2 : [],
radio_model : '',
select_model : ''
}
})
</script>
728x90
'Vue.js' 카테고리의 다른 글
| ES6 STEP 2 - 기본 문법 2 (0) | 2024.01.17 |
|---|---|
| ES6 STEP 1 - 기본 문법 (0) | 2024.01.16 |
| Vue.js STEP 4 - 기본 문법 2 (1) | 2024.01.11 |
| Vue.js STEP 2 - 기본 프로젝트 생성 및 실행 (0) | 2024.01.10 |
| Vue.js STEP 1 - 기초 셋팅 (2) | 2024.01.10 |
