[javascript]代码库
<!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>
AI时代，找源码已成为过去式，纪念我过去的十年0(回)
68天前
还有人吗2(回)
86天前
这里还有人吗2(回)
751天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
976天前