首頁 探索 說明
註冊 登入
vuejs
/
vue
镜像来自 https://github.com/vuejs/vue.git
2
0
複刻 0
Files 問題管理 0 Wiki
瀏覽代碼

add firebase example

Evan You 11 年之前
父節點
2c13ecb251
當前提交
15bee32085
共有 3 個文件被更改，包括 151 次插入 和 0 次删除
統一視圖 顯示文件統計
  1. 93 0
      examples/firebase/app.js
  2. 30 0
      examples/firebase/index.html
  3. 28 0
      examples/firebase/style.css

+ 93 - 0
examples/firebase/app.js
查看文件 

@@ -0,0 +1,93 @@
 
+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.name()
 
+  app.users.push(item)
 
+})
 
+
 
+Users.on('child_removed', function (snapshot) {
 
+  var id = snapshot.name()
 
+  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: ''
 
+    },
 
+    validation: {
 
+      name: false,
 
+      email: false
 
+    }
 
+  },
 
+
 
+  // validation filters are "write only" filters
 
+  filters: {
 
+    nameValidator: {
 
+      write: function (val) {
 
+        this.validation.name = !!val
 
+        return val
 
+      }
 
+    },
 
+    emailValidator: {
 
+      write: function (val) {
 
+        this.validation.email = emailRE.test(val)
 
+        return val
 
+      }
 
+    }
 
+  },
 
+
 
+  // computed property for form validation state
 
+  computed: {
 
+    isValid: function () {
 
+      var valid = true
 
+      for (var key in this.validation) {
 
+        if (!this.validation[key]) {
 
+          valid = false
 
+        }
 
+      }
 
+      return valid
 
+    }
 
+  },
 
+  
+  // methods
 
+  methods: {
 
+    addUser: function (e) {
 
+      e.preventDefault()
 
+      if (this.isValid) {
 
+        Users.push(this.newUser)
 
+        this.newUser = {
 
+          name: '',
 
+          email: ''
 
+        }
 
+      }
 
+    },
 
+    removeUser: function (user) {
 
+      new Firebase(baseURL + 'users/' + user.id).remove()
 
+    }
 
+  }
 
+})

+ 30 - 0
examples/firebase/index.html
查看文件 

@@ -0,0 +1,30 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <title></title>
 
+    <meta charset="utf-8">
 
+    <link rel="stylesheet" type="text/css" href="style.css">
 
+    <script src='https://cdn.firebase.com/js/client/1.0.23/firebase.js'></script>
 
+    <script src="../../dist/vue.js"></script>
 
+  </head>
 
+  <body>
 
+    <div id="app">
 
+      <ul>
 
+        <li class="user" v-repeat="users" v-transition>
 
+          <span>{{name}} - {{email}}</span>
 
+          <button v-on="click:removeUser(this)">X</button>
 
+        </li>
 
+      </ul>
 
+      <form id="form" v-on="submit:addUser">
 
+        <input v-model="newUser.name | nameValidator | capitalize">
 
+        <input v-model="newUser.email | emailValidator">
 
+        <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 src="app.js"></script>
 
+  </body>
 
+</html>

+ 28 - 0
examples/firebase/style.css
查看文件 

@@ -0,0 +1,28 @@
 
+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 {
 
+  height: 0;
 
+  padding-top: 0;
 
+  padding-bottom: 0;
 
+  border-top-width: 0;
 
+  border-bottom-width: 0;
 
+}
 
+
 
+.errors {
 
+  color: #f00;
 
+}