1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
| var baseURL = 'https://vue-demo.firebaseIO.com/'
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 sync
*/
var Users = new Firebase(baseURL + 'users')
Users.on('child_added', function (snapshot) {
var item = snapshot.val()
item.id = snapshot.key()
app.users.push(item)
})
Users.on('child_removed', function (snapshot) {
var id = snapshot.key()
app.users.some(function (user) {
if (user.id === id) {
app.users.$remove(user)
return true
}
})
})
/**
* Create Vue app
*/
var app = new Vue({
// element to mount to
el: '#app',
// initial data
data: {
users: [],
newUser: {
name: '',
email: ''
}
},
// 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) {
Users.push(this.newUser)
this.newUser.name = ''
this.newUser.email = ''
}
},
removeUser: function (user) {
new Firebase(baseURL + 'users/' + user.id).remove()
}
}
}) |
京公网安备 11010802041100号