[Vue] Vue 기초 문법 정리
2022. 7. 22. 18:33
vue 사용 선언
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
data 출력
1. {{ }} 로 출력 위치 지정
2. 뷰 객체 생성 및 실행 ( new Vue({ }) )
el : 화면에 표시될 영역(ex. div)을 지정
data : 출력할 변수 및 데이터를 딕셔너리 형태로 저장
<body>
<div id="main">
<p>{{ sTitle }}</p>
</div>
</body>
<script>
// 뷰 객체 생성하여 앱을 초기화
new Vue({
// el : 화면에 표시될 영역을 지정하여 연결
el: '#main',
// data : 전달할 데이터
data: {
sTitle: 'Hello, Vue!'
}
});
</script>
단방향 바인딩 : v-bind
HTML 태그의 속성 값을 동적으로 수정할 때 사용함
( v-vind:속성 )으로 사용하며 v-vind 키워드 생략 가능함
<body>
<div id="main">
<h1 v-bind:class="sColorName + '_style'">안녕하세요</h1>
<input :value="sDate">
</div>
</body>
<script>
let app = new Vue({
el: '#main',
data: {
sDate: '올해 년도: ' + new Date().getFullYear(),
sColorName: 'blue'
}
});
</script>
양방향 바인딩 : v-model
데이터 입력과 동시에 데이터 동기화 기능 구현 시 사용함
<body>
<div id="main">
<p>{{ sMsg }}</p>
<input v-model:value="sMsg">
</div>
</body>
<script>
var main = new Vue({
el: '#main',
data: {
sMsg: 'AngelPlayer'
}
});
</script>
조건 : v-if, v-else
조건 충족 여부에 따라서 다른 출력
Vue는 true, false 사용함
<body>
<div id="app">
<h1>{{ bFlag }}</h1>
<p v-if="bFlag == true">T</p>
<p v-else>F</p>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
bFlag: Math.random() > 0.5
}
});
</script>
반복문 : v-for
<body>
<div id="main">
<h1>Fruits</h1>
<ol>
<li v-for="item in aFruits">{{ item.sFruitName }}</li>
</ol>
</div>
</body>
<script>
var main = new Vue({
el: '#main',
data: {
aFruits: [ { sFruitName: '사과' }, { sFruitName: '오렌지' }, { sFruitName: '포도' }, ]
}
});
</script>
이벤트 핸들러 : v-on
뷰 안에서 키보드나 마우스를 제어하는 형식의 이벤트 발생 시 해당 함수를 실행
<body>
<div id="app">
<h1>{{ sTitle }}</h1>
<button v-on:click="fnChangeTitle()">Push</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
sTitle: 'Hello'
},
// methods : 함수를 저장
methods: {
fnChangeTitle() {
this.sTitle = "Hola"
}
}
});
</script>
'Web > Vue.js' 카테고리의 다른 글
| [Vue.js] 디렉티브 코드 사용법 정리 (v-* 속성) (1) | 2023.06.30 |
|---|---|
| [Vue.js] Vue Instance (filter, computed, watch, event) (1) | 2023.05.31 |
| [Vue] Vue 기초 문법 정리 (2) (0) | 2022.07.23 |
