반응형
1. Vue 인스턴스 만들기
new Vue 블럭안에 el, data, method 등 옵션을 설정할 수 있다.
new Vue({
el: "#app",
data: {
text: 'hellp world'
},
})
2. new Vue()에 사용가능한 옵션(속성)
| 옵션 | 설명 |
| el | 인스턴스가 그려지는 화면의 시작점 |
| template | 화면에 표시할 요소 |
| data | 뷰의 반응성 Reactivity 반영 속성 |
| method | 화면의 동작과 이벤트 로직 제어 메소드 |
| watch | data에 정의한 속성이 변화했을때 추가동작 수행하게 해주는 속성 |
| computed | 데이터의 문자열 순서를 역으로 변화해주는 속성 |
| 기타 LifeCycle Hook(created, mounted..) | 뷰 라이프 사이클과 관련된 속성 |
3. 데이터 출력 방법
{{ 데이터명 }} , {{ }} 안의 텍스트는 vue 인스턴스에 생성한 msg의 value 값으로 대체되며, msg 속성이 변경될 때마다 업 데이트 된다.
<div id="app">
<p> {{ msg }} </p> <!--msg출력 값 : 'Hello'-->
</div>
<script>
new Vue({
el: '#app', //html의 id
data: {
msg: 'Hello' //msg인스턴스 생성
}
})
</script>
디렉티브
Vue에서 제공하는 속성.
디렉티브는 표현식의 값이 변경될 때 DOM에 바로 적용하며, 접두사 v-을 사용한다.
○ v-html
{{ }}는 데이터를 HTML이 아닌 일반 텍스트로 해석하기 때문에 실제 HTML을 출력하기 위해서는 v-html을 사용해야 한다.
<script>
new Vue({
el : "#test",
data: {
rawHtml: '<h1> v-html 테스트!!</h1>'
},
});
</script>
<body>
<div id="test">
<p> {{ rawHtml }}</p>
<p v-html="rawHtml"></p>
</div>
</body>▼
○ v-bind
.attr()과 비슷한 기능을 수행하며 태그의 속성을 동적으로 변경할 때 사용한다. v-bind는 생략 가능(ex :src)
- 이미지 데이터 연결 : v-bind:src
- 링크를 통한 연결 : v-bind:href
- 스타일시트 연결 : v-bind:class, v-bind:style
- 키를 통한 연결 : v-bind:key
○ v-on
자바스크립트의 이벤트리스너, 이벤트 동작 디렉티브
// 자바스크립트로 작성된 test() 메서드 호출
<input type="text" id="von" v-on:keydown="test">
=> 자바스크립 함수가 아닌 el 메소드에 정의한 함수를 호출(이벤트 동작)
<input type="text" id="von" @onKeydown="test">
=> v-on 대신 @사용 가능
| 이벤트 | 설명 |
| click | 마우스를 클릭했을 때 실행함 |
| dblclick | 마우스를 더블 클릭했을 때 실행함 |
| mouseover | 마우스의 포인트가 요소 위로 올라왔을 때 실행함 |
| mouseout | 마우스의 포인트가 요소 밖으로 벗어났을 때 실행함 |
| mousemove | 마우스의 포인트가 이동했을 때 실행함 |
| mousedown | 마우스의 버튼을 눌렀을 때 실행함 |
| mouseup | 마우스의 버튼을 놓았을 때 실행함 |
| keydown | 키보드의 키를 눌렀을 때 실행함 |
| keyup | 키보드의 키를 놓았을 때 실행함 |
| keypress | 키보드의 키를 눌렀다가 놓았을 때 실행함 |
| change | 요소가 변경될 때 실행함 |
| submit | <Form>이 제출될 때 실행함 |
| reset | <Form>이 재설정될 때 실행함 |
| select | <select>의 값이 선택되었을 때 실행함 |
| focus | 태그에 포커스가 있을 때 실행함 |
| blur | 태그에 포커스를 잃었을 때 실행함 |
반응형
○ v-model
<script>
new Vue({
el : "#test",
data : {
name : ''
}
});
</script>
<body>
<div id="test">
이름: <input v-model="name"> <br><br>
입력한 이름: {{ name }}
</div>
</body>▼
○ v-model : Checkbox
<script>
new Vue({
el : "#test",
data : {
animals : [],
}
});
</script>
<body
<div id="test">
<h1> v-model : checkbox 태그 </h1>
<input type="checkbox" value="강아지" v-model="animals"> 강아지
<input type="checkbox" value="고양이" v-model="animals"> 고양이
<input type="checkbox" value="토끼" v-model="animals"> 토끼
<input type="checkbox" value="햄스터" v-model="animals"> 햄스터
<input type="checkbox" value="고슴도치" v-model="animals"> 고슴도치 <br><br>
선택한 동물은 {{ animals }} 입니다. <br>
선택한 동물의 수는 {{ animals.length}} 입니다.
</div>
</body>▼
○ v-if v-else-if v-else
- v-if를 사용하여 조건부 렌더링
- 조건이 2가지 일 경우, v-if 와 v-else를 사용
- 조건이 2가지 이상 일 경우 v-if, v-else-fi, v-else 사용
- 조건이 참일 때만 렌더링함. 조건에 해당하지 않으면 렌더링x 출력x 개발자 모드에서도 보이지 않음.
<script>
new Vue({
el : "#test",
data : {
age : ''
}
});
</script>
<body>
<div id="test">
나이를 입력하세요 : <input v-model="age"><br>
<h3>당신의 나이는 {{ age }} 입니다.</h3>
<h3 v-if="age > 18"> 어른입니다. </h3>
<h3 v-else-if= "age > 13 && age <= 18"> 청소년입니다. </h3>
<h3 v-else> </h3>
</div>
</body>▼
○ v-show
- true와 false 값만 갖는 조건부 디렉티브
- true일때 화면에 출력, false 일때는 화면에 보이지 않음(보이지만 않는 것이지 삭제된 것은 아님)
- v-if와 다르게 v-show는 개발자 모드에서는 보여짐
<script>
new Vue({
el : "#test",
data : {
isVal : true
},
methods : {
btn: function(){
this.isVal = false
}
}
});
</script>
<body>
<div id="test">
<h1> v-show </h1>
<p v-show="isVal"> 버튼 클릭시 사라짐</p>
<button @click="btn">클릭 </button>
</div>
</body>▼
○ v-if 와 v-show 의 차이점
- false 일 때v-if : false 일 때 렌더링하지 않음 / DOM에서 사라짐v-show : 무조건 렌더링 / display:none; 처리됨
○ v-for
v-for = "아이템명 in 배열명" / v-for = "(아이템명, 인덱스명) in 배열명"
<script>
new Vue({
el : "#test",
data : {
list : ['수박', '포도', '바나나', '딸기', '레몬'],
}
});
</script>
<body>
<div id="test">
<h1> v-for문 연습 </h1>
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
</div>
</body>▼
<script>
new Vue({
el : "#test",
data : {
list : [
{ name : '스폰지밥', age: '15세' },
{ name : '둘리', age: '20세' },
{ name : '뽀로로', age: '3세' },
{ name : '짱구', age: '53세' },
{ name : '길동이', age: '35세' },
],
}
});
</script>
<body>
<div id="test">
<h1> v-for문 연습 </h1>
<ul>
<li v-for="item in list">{{ item.name }}의 나이는 {{ item.age }} 입니다</li>
</ul>
</div>
</body>▼
반응형
'프로그래밍 > Vue.js' 카테고리의 다른 글
| [ Vue.js ] 커스텀 이벤트 $emit 사용하여 부모, 자식 간 컴포넌트 데이터 전달하고 전달받기 (0) | 2023.02.06 |
|---|---|
| [ Vue.js ] 배열을 props 로 보낸 후 v-for 사용하여 상품 목록 출력하기 (0) | 2023.02.06 |
| [ Vue.js ] Object 를 props로 보내는 방법 (0) | 2023.02.06 |
| [ Vue.js ] Component & props 사용 방법 (0) | 2023.02.06 |
| [ Vue.js ] Vue 라이프 사이클(lifecycle) (0) | 2023.01.25 |