[vue.js] 소개
Language/Vue.js2021. 7. 26. 21:16
Vue.js 소개
Vue.js는 React.js와 함께 가장 인기있는 자바스크립트 프레임워크 중의 하나입니다. 아래 Vue 의 Market Position 을 확인해 보면 React 보다는 조금 떨어지지만 많이 사용하고 있는 라이브러리임을 확인 할수 있습니다.
Vue.js는 React.js 보다 배우기 쉽다는 장점 때문에 지속 성장하는 추세입니다. 아래는 웹사이트에 채택하는 자바스크립트 트랜드를 보여 주는 표입니다. Vue.js 대비 어려운 Angular 는 떨어지고 React 는 상승세 이긴 하지만 vue js 보다는 상승세가 높지 않네요.
Vue.js 한국어 사이트https://kr.vuejs.org/ (opens new window)에 가보면 문서 번역이 잘되어 있습니다. 하지만 생각보다 예제가 많지 않았습니다. 그래서 vue.js 강좌를 진행하면서 기술을 정리하고 예제도 많이 만들어서 Vue.js로 멋진 Single Page Application 을 만들어 보겠습니다.
카운터 증가/감소 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue.js 강좌 연습</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="counter">
Counter: {{ counter }}
<button v-on:click="countPlus">카운터증가</button>
<button v-on:click="countMinus">카운터감소</button>
</div>
<script>
const Counter = {
data() {
return {
counter: 0
}
},
methods : {
countPlus() {
this.counter++;
},
countMinus() {
this.counter--;
}
}
}
Vue.createApp(Counter).mount('#counter')</script>
</body>
</html>실행결과
버튼을 클릭하면 카운터가 증가/감소 되는 것을 확인 할수 있습니다.
'Language > Vue.js' 카테고리의 다른 글
| [vue.js] vue-router 사용하기 (0) | 2021.08.01 |
|---|---|
| [vue.js] BASE_URL public_path 변경하기 (0) | 2021.08.01 |
| [vue.js] vue element-ui(ui 컴포넌트) 설치 및 사용 (0) | 2021.07.31 |
| [vue.js] 컴포넌트 (0) | 2021.07.26 |
| [vue.js] 개발 환경 구축하기 (0) | 2021.07.25 |
댓글()
