Vue Example - Firebase + Validation 개발
vue.js Example 원본 -> https://github.com/vuejs/vue/tree/dev/examples/firebase
[ 설치 ]
<!-- 개발버전, 도움되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
또는:
<!-- 상용버전, 속도와 용량이 최적화됨. -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
JSFiddle - https://jsfiddle.net/
JSFiddle 에 바로 적용해 분석해 보기
[html]
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuefire@1.3.0/dist/vuefire.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script>
<div id="app">
<ul is="transition-group">
<li v-for="user in users" class="user" :key="user['.key']">
<span>{{user.name}} - {{user.email}}</span>
<button v-on:click="removeUser(user)">X</button>
</li>
</ul>
<form id="form" v-on:submit.prevent="addUser">
<input type="text" v-model="newUser.name" placeholder="Username" />
<input type="email" v-model="newUser.email" placeholder="email@email.com" />
<input type="submit" value="Add User" />
</form>
<ul class="errors">
<li v-show="!validation.name">Name cannot be empty.</li>
<li v-show="!validation.email">Please provide a valid email address.</li>
</ul>
</div>
[css]
body {
font-family: Helvetica, Arial, sans-serif;
}
ul {
padding: 0;
}
.user {
height: 30px;
line-height: 30px;
padding: 10px;
border-top: 1px solid #eee;
overflow: hidden;
transition: all 0.25s ease;
}
.user:last-child {
border-bottom: 1px solid #eee;
}
.v-enter,
.v-leave-active {
height: 0;
padding-top: 0;
padding-bottom: 0;
border-top-width: 0;
border-bottom-width: 0;
}
.errors {
color: #f00;
}
[javascript]
var emailRE = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
// Setup Firebase
var config = {
apiKey: "AIzaSyAi_yuJciPXLFr_PYPeU3eTvtXf8jbJ8zw",
authDomain: "vue-demo-537e6.firebaseapp.com",
databaseURL: "https://vue-demo-537e6.firebaseio.com",
};
firebase.initializeApp(config);
var usersRef = firebase.database().ref("users");
// create Vue app
var app = new Vue({
// element to mount to
el: "#app",
// initial data
data: {
newUser: {
name: "",
email: "",
},
},
// firebase binding
// https://github.com/vuejs/vuefire
firebase: {
users: usersRef,
},
// computed property for form validation state
computed: {
validation: function () {
return {
name: !!this.newUser.name.trim(),
email: emailRE.test(this.newUser.email),
};
},
isValid: function () {
var validation = this.validation;
return Object.keys(validation).every(function (key) {
return validation[key];
});
},
},
// methods
methods: {
addUser: function () {
if (this.isValid) {
usersRef.push(this.newUser);
this.newUser.name = "";
this.newUser.email = "";
}
},
removeUser: function (user) {
usersRef.child(user[".key"]).remove();
},
},
});
Vuefire
Vuefire는 Firebase RTDB 또는 Firebase Cloud Firestore와 Vue 애플리케이션간에 실시간 바인딩을 생성하는 작고 실용적인 솔루션입니다. 로컬 데이터를 항상 원격 데이터베이스와 동기화 상태로 유지하는 것이 간단합니다.
뷰는 Vuefire 를 통해 Vue Instance 에 firebase 와 data sync 를 할 수 있도록 도와줍니다.
firebase: { users: usersRef, }
firebase: {
users: usersRef
}
Hompage - https://vuefire.vuejs.org/
Github - https://github.com/vuejs/vuefire
NPM - https://www.npmjs.com/package/vuefire
[ 설치 ]
<script src="https://unpkg.com/vuefire@1.3.0/dist/vuefire.js"></script>
Firebase
Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다.
Hompage - https://firebase.google.com/
Github - https://github.com/firebase/firebase-js-sdk
NPM - https://www.npmjs.com/package/firebase
Validation 과 isValid
-
validation - 먼저 첫번째로 input model 별로 validation rule 을 정의한다.
-
isValid - 사용자의 입력정보가 유효한지 체크한다.
실제 JSFiddle 에 적용된 소스
https://jsfiddle.net/realdev/rs0hpw35/1/
'Frontend > vue' 카테고리의 다른 글
[Hoon] Vuejs강의 - Vue.js 에서 컴포넌트 템플릿을 정의하는 방법들 I (2) | 2020.07.21 |
---|---|
[Hoon] Vuejs 강의 - Vue Modal Component 개발하기 (1) | 2020.06.02 |
[Hoon] Vuejs 강의 - Markdown Editor 개발 (0) | 2020.05.29 |
[Hoon] Vuejs 강의 - Vue Tree Example 개발하기 (0) | 2020.05.28 |
[Hoon] Vuejs 강의 - Vue Router 시작하기 (0) | 2020.05.22 |
댓글