会python真的可以为所欲为0(回)
333天前
这里还有人吗1(回)
518天前这里还有人吗0(回)
518天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
742天前到处都是羊，不想上班0(回)
822天前
鸽子
0(回)
827天前<!DOCTYPE html> |
<html lang="en"> |
<head> |
<meta charset="UTF-8"> |
<title>Document</title> |
<script type="text/javascript" src="vue.js"></script> |
<style type="text/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 .25s ease; |
} |
.user:last-child { |
border-bottom: 1px solid #eee; |
} |
.v-enter, .v-leave { |
</style> |
</head> |
<body> |
<div id="app"> |
<ul> |
<li class="user" v-for="user in users" transition> |
<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 v-model="newUser.name"> |
<input v-model="newUser.email"> |
<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> |
<script type="text/javascript"> |
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() |
} |
} |
}) |
</script> |
</body> |
</html> |
