<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<div id="app-2">
<span v-bind:title="message">
내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
</span>
</div>
<div id="app-3">
<p v-if="seen">이제 나를 볼 수 있어요</p>
</div>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: '하이 Vue'
}
})
var app2 = new Vue({
el: '#app-2',
data: {
message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
}
})
var app3 = new Vue({
el: '#app-3',
data: {
seen:false
}
})
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'JavaScript 배우기' },
{ text: 'Vue 배우기' },
{ text: '무언가 멋진 것을 만들기' }
]
}
})
var app5 = new Vue({
el : '#app-5',
data:{
message : '안녕 하쇼'
},
methods : {
reverseMessage : function() {
this.message = this.message.split('').reverse().join('')
}
}
})
var app6 = new Vue({
el : '#app-6',
data:{
message : '안녕 하쇼'
}
})
</script>
</body>
</html>
반응형
':::: 개발 :::: > ::: JSCRIPT :::' 카테고리의 다른 글
| JSONObject not found 에서 키 값 체크 (0) | 2018.11.26 |
|---|---|
| 스크립트 script 전달받은 배열 array 특정 [name] 값 가져오기 (0) | 2018.11.15 |
| vs code 와 함께 쉬운 서버 만들기 (0) | 2018.11.06 |
| VUE 생키 다이어그램 ( SankeyChart )여러 노드 연결 표현 (0) | 2018.10.18 |
| vue v-on_이벤트 핸들링 (0) | 2018.07.05 |
| 브라우저 나라(국가) 체크 스크립트 (2) | 2018.03.21 |
| 스크립트 배열 삭제 (0) | 2018.01.31 |
| 스크립트 문자 가져오기 종합 세트(문자 요구사항 처리) !!! (0) | 2017.10.30 |