html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<h1>카운터 : {{ number }}</h1>
<button v-on:click="increment">증가 +</button>
<button v-on:click="decrement">감소 -</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>
Js
// 새로운 뷰를 정의합니다
var app = new Vue({
el: '#app',
// 어떤 엘리먼트에 적용을 할 지 정합니다
// data 는 해당 뷰에서 사용할 정보를 지닙니다
data: {
name: 'Vue',
number: 0
} ,
methods:{
increment: function() {
// 인스턴스 내부의 데이터모델에 접근 할 땐,
// this 를 사용한다
this.number++;
},
decrement : function(){
this.number--;
}
}
});
코드 테스트 사이트
https://jsbin.com
반응형
':::: 개발 :::: > ::: JSCRIPT :::' 카테고리의 다른 글
| 스크립트 script 전달받은 배열 array 특정 [name] 값 가져오기 (0) | 2018.11.15 |
|---|---|
| vs code 와 함께 쉬운 서버 만들기 (0) | 2018.11.06 |
| VUE 생키 다이어그램 ( SankeyChart )여러 노드 연결 표현 (0) | 2018.10.18 |
| VUE TEST CODE (0) | 2018.10.17 |
| 브라우저 나라(국가) 체크 스크립트 (2) | 2018.03.21 |
| 스크립트 배열 삭제 (0) | 2018.01.31 |
| 스크립트 문자 가져오기 종합 세트(문자 요구사항 처리) !!! (0) | 2017.10.30 |
| 스크립트 디버그 (크롬 개발자 도구 활용) (0) | 2017.10.23 |