반응형
다음은
https://kr.vuejs.org/v2/guide
에서 참고하여 작성 한 글입니다.
<!DOCTYPE html>
<!--
https://kr.vuejs.org/v2/guide/
Vue 가이드 예제
-->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- Vue script -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!-- ------------------------
# Vue Hello 찍기
----------------------------- -->
<div id="app">
{{ message }}
</div>
<!-- Vue 제어 script는 dom 하단에 위치. -->
<script>
var app = new Vue({
el : '#app',
data : {
message : '안녕하세요. Hello!'
}
})
</script>
<!-- ------------------------
# Vue 특수 속성 (접두어 : v-)
v-bind : 디렉티브 - Vue에서 제공한 특수 속성
----------------------------- -->
<div id="app-2">
<span v-bind:title="message">
내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다.
</span>
</div>
<script>
var app2 = new Vue({
el : '#app-2',
data : {
message : '이 페이지는 ' + new Date() + '에 로드 되었습니다.'
}
})
// 제어 : app2.message = 'hihihi'; -- title 메세지 변경됨
</script>
<!-- ------------------------
# Vue if
----------------------------- -->
<div id="app-3">
<p v-if="seen">이제 나를 볼 수 있어요.</p>
</div>
<script>
var app3 = new Vue({
el : '#app-3',
data : {
seen : true
}
})
// 제어 : app3.seen=false;
</script>
<!-- ------------------------
# Vue for
----------------------------- -->
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
<script>
var app4 = new Vue({
el : '#app-4',
data : {
todos : [
{text : 'JavaScript 배우기'},
{text : 'Vue 배우기'},
{text : '무언가 멋진 것을 만들기'}
]
}
})
app4.todos.push({text : 'New Item'}); // 새 항목 추가 가능
</script>
<!-- ------------------------
# Vue 버튼 click 이벤트, 함수사용법, reverse 함수
----------------------------- -->
<div id="app-5">
<p>{{message}}</p>
<button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>
<script>
var app5 = new Vue({
el : '#app-5',
data : {
message : '안녕하세요! Vue.js!'
},
methods : {
reverseMessage : function(){
this.message = this.message.split('').reverse().join('');
}
}
})
</script>
<!— ————————————
# v-model 디렉티브
input 태그에 글을 작성하면 p 태그에 동시 입력 됨.
—————————————— ——————————————>
<div id="app-6">
<p>{{message}}</p>
<input v-model="message">
</div>
<script>
var app6 = new Vue({
el : '#app-6',
data : {
message : '안녕하세요. Vue!'
}
})
</script>
</body>
</html>
https://kr.vuejs.org/v2/guide
에서 참고하여 작성 한 글입니다.
<!DOCTYPE html>
<!--
https://kr.vuejs.org/v2/guide/
Vue 가이드 예제
-->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- Vue script -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!-- ------------------------
# Vue Hello 찍기
----------------------------- -->
<div id="app">
{{ message }}
</div>
<!-- Vue 제어 script는 dom 하단에 위치. -->
<script>
var app = new Vue({
el : '#app',
data : {
message : '안녕하세요. Hello!'
}
})
</script>
<!-- ------------------------
# Vue 특수 속성 (접두어 : v-)
v-bind : 디렉티브 - Vue에서 제공한 특수 속성
----------------------------- -->
<div id="app-2">
<span v-bind:title="message">
내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다.
</span>
</div>
<script>
var app2 = new Vue({
el : '#app-2',
data : {
message : '이 페이지는 ' + new Date() + '에 로드 되었습니다.'
}
})
// 제어 : app2.message = 'hihihi'; -- title 메세지 변경됨
</script>
<!-- ------------------------
# Vue if
----------------------------- -->
<div id="app-3">
<p v-if="seen">이제 나를 볼 수 있어요.</p>
</div>
<script>
var app3 = new Vue({
el : '#app-3',
data : {
seen : true
}
})
// 제어 : app3.seen=false;
</script>
<!-- ------------------------
# Vue for
----------------------------- -->
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
<script>
var app4 = new Vue({
el : '#app-4',
data : {
todos : [
{text : 'JavaScript 배우기'},
{text : 'Vue 배우기'},
{text : '무언가 멋진 것을 만들기'}
]
}
})
app4.todos.push({text : 'New Item'}); // 새 항목 추가 가능
</script>
<!-- ------------------------
# Vue 버튼 click 이벤트, 함수사용법, reverse 함수
----------------------------- -->
<div id="app-5">
<p>{{message}}</p>
<button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>
<script>
var app5 = new Vue({
el : '#app-5',
data : {
message : '안녕하세요! Vue.js!'
},
methods : {
reverseMessage : function(){
this.message = this.message.split('').reverse().join('');
}
}
})
</script>
<!— ————————————
# v-model 디렉티브
input 태그에 글을 작성하면 p 태그에 동시 입력 됨.
—————————————— ——————————————>
<div id="app-6">
<p>{{message}}</p>
<input v-model="message">
</div>
<script>
var app6 = new Vue({
el : '#app-6',
data : {
message : '안녕하세요. Vue!'
}
})
</script>
</body>
</html>
반응형
'skill > HTML.Javscript.CSS' 카테고리의 다른 글
| [javascript/css] 출력(print) 및 다음장 넘기기 (0) | 2021.05.12 |
|---|---|
| [javacirpt] jquery 스크롤 자동 이동 + 부드럽게 이동 (0) | 2021.05.12 |
| 위 화면 고정, 컨텐츠 화면 스크롤 시키기_javascript, css, html (0) | 2017.01.17 |
| 자동 색 변경_javascript, jquery (0) | 2017.01.17 |
| 공지사항롤링_javascript, css, html (1) | 2017.01.17 |