Vue 기초 속성(v-show & v-model & v-on:click)
Vue.js 기초
v-model & v-on:click
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script defer src="/__/firebase/7.13.1/firebase-app.js"></script>
<script defer src="/__/firebase/7.13.1/firebase-database.js"></script>
<script defer src="/__/firebase/init.js"></script>
</head>
<body>
<div id="app">
<h1></h1>
<!-- Vue앱의 title속성값을 출력 변경되면 변경된값 즉시 다시 출력 -->
<p></p>
<hr />
<input type="text" v-model="title" />
<!-- 입력되면 Vue앱의 title에 즉시 대입됨 -->
<br />
<input type="text" v-model="body" />
<button type="button" v-on:click="save">저장</button>
<!-- vue앱의 save 메소드가 즉시 호출 -->
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
title: 'Im SeungHui.Park',
body: 'Nice to meet you'
}, // vue앱에 title, body속성을 만든다
method: { // vue 앱 객체의 메소드
save: function () {
// firebase의 hello 항목에 대한 원격 참조객체를 helloRef에 대입.
let helloRef = firebase.database().ref("hello");
// this : vue앱 객체의 속성들을 vue앱의 속성값으로 새 객체 생성
helloRef.set({ title: this.title, body: this.body });
}
}
})
window.onload = function(){
let helloRef = firebase.database().ref("hello");
helloRef.on('value', (snapshot) => {
let hello = snapshot.val();
app.title = hello.title;
app.body = hello.body;
});
};
</script>
</body>
</html>
v-show
<body>
<div id="app">
<h1></h1>
<p></p>
<!-- editing이 true일때는 수정버튼이 사라진다! -->
<button type="button" v-on:click="edit" v-show="!editing">수정</button>
<hr />
<!-- editing이 false일때는 보이지 않는다 -->
<div v-show="editing">
<input type="text" v-model="title_edit" /> <br />
<input type="text" v-model="body_edit" />
<button type="button" v-on:click="save">저장</button>
<button type="button" v-on:click="cancel">취소</button>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
title: 'hello world',
body: 'good morning',
title_edit: '',
body_edit: '',
editing: false
},
methods: {
edit: function() {
// 원래 있던 것들을 채워넣음으로써 수정하기 쉽다!
this.title_edit = this.title;
this.body_edit = this.body;
this.editing = true; // 수정버튼을 누르면 true가 되어 editing이 나타남
},
save: function (){
let helloRef = firebase.database().ref("hello");
helloRef.set({ title: this.title_edit, body: this.body_edit });
// 저장된 내용은 앱의 callback함수의 파라미터로 전달 (밑에 snapshot)
this.editing = false;
},
cancel: function() {
this.editing = false;
// v-show의 editing이 false가 되면서 수정버튼이 나타나고 수정input들은 사라짐
}
}
})
window.onload = function(){
let helloRef = firebase.database().ref("hello");
helloRef.on('value', (snapshot) => {
let hello = snapshot.val();
app.title = hello.title; // vue앱 객체를 참조하려면 전역변수 app을 사용해야함
app.body = hello.body;
});
};
</script>
</body>
아직 도입부분이라 무난문안ㅎㅅㅎ
Comments