728x90
Vue.js
자바스크립트 프레임 워크 중 하나로 초보자도 쉽게 접근이 가능합니다.
SPA(Single Page Application)을 이용해 동적인 페이지를 쉽게 만들어 줄수 있습니다.
https://v3-docs.vuejs-korea.org/
Vue.js - The Progressive JavaScript Framework | Vue.js
접근성 HTML,CSS, 자바스크립트 표준을 기반으로, 쓰기 편한 API와 최고 수준의 문서를 제공합니다.
v3-docs.vuejs-korea.org
프레임 워크 ?
복잡한 내용을 간단히 미리 규격화/모듈화 해둔 도구
프레임 워크 사용시 :
기존 자바 스크립트에서 사용할 수 없던 문법이나, 입력 방식들을 사용 할수 있게 되고,
타 플러그인을 통해 UI 컴포넌트나 스타일, 추가 기능들을 불러다 쓰는 것도 가능해 집니다.
자바스크립트 프레임 워크의 종류
Vue, React, Angular
SPA란?
웹 페이지 하나에 여러 기능을 넣어서 "하나의 페이지로 동작하는 웹 어플리케이션"을 일컫습니다.
Vue.js = 데이터와 뷰를 역할해 주는 역할
MVVM : Model View ViewModel
데이터는 무엇인가? (Model)
웹 페이지에서 바뀌는 부분이 어디인지?
표시되는 요소는 무엇인가? (View)
HTML의 어느 부분에서 어떤 형식으로 표시되는가?
어떤 식으로 연결되는가? (ViewModel)
HTML의 어디가 조작될 때 데이터가 어떤 형식으로 변화되는가?
필자는 Vue를 따로 설치 하지않고 CDN을 연결하여 사용합니다.
평소 사용하던 VsCode로 사용을 하기위해 <head></head> 사이에
를 삽입해 주어야합니다.
Vue.js의 주요 기능중 {{데이터}}를 사용해서 간단한 카운터를 만들어 보겠습니다.
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<h2>클릭하면 카운터가 올라갑니다.</h2>
<div id="app">
<p>{{count}}회</p> <!--{{mustache}}-->
<button v-on:click="countUp">카운트 업</button>
<button v-on:click="countDown">카운트 다운</button>
</div>
<script>
new Vue({
el: "#app",
data:{count:0},
methods: {countUp: function(){this.count++;},
countDown: function(){this.count--;}}
})
</script>실행문을 하나 작성한 후에는 쉼표(,)를 작성해서 구분해줍니다.
728x90
'Vue.js' 카테고리의 다른 글
| 이벤트와 연결하기 : v-on (Vue.js) (0) | 2022.12.22 |
|---|---|
| 폼 입력과 데이터를 연결할 때 쓰는 v-model (Vue.js) (0) | 2022.12.22 |
| v-bind를 이용한 클래스 지정(Vue.js) (0) | 2022.12.22 |
| 요소의 속성을 데이터로 지정하는 v-bind( Vue.js) (0) | 2022.12.21 |
| Vue 인스턴스 만들기 - Vue.js 기초 (0) | 2022.12.21 |