1. Cài đặt vue-resource
https://github.com/pagekit/vue-resource
-- Cài đặt qua npm
npm install vue-resource
-- Dùng CDN: " rel="noopener" target="_blank">
-- Sử dụng
|
1 2 3 4 5 6 7 8 9 10 |
import Vue from "vue"; import App from "./App.vue"; import VueResource from "vue-resource"; Vue.use(VueResource) new Vue({ el: "#app", render: h => h(App) }); |
3. Demo sử dụng: Firebase và vue-resource
|
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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>VueJS Demo</title> <style> table { border: none; border-collapse: collapse; } td { border: 1px solid #ccc; } </style> </head> <body> <div id="app"> <h2>Vue Form for FireBase</h2> <p>User: <input type="text" v-model="user.username" /></p> <p>Email: <input type="text" v-model="user.email" /></p> <button @click="createNewUser">Create New User</button> <hr /> <button @click="getAllUsers">Get All Data</button><br /> <table> <tbody> <tr v-for="(user, key, index) in users" :key="key"> <td>{{ index }}</td> <td>{{ key }}</td> <td>{{ user.username }}</td> <td>{{ user.email }}</td> </tr> </tbody> </table> <hr /> <p>Get ID: <input type="text" v-model="getID" /></p> <button @click="getUserById(getID)">Get By ID</button> <p>Result: {{user.username}} - {{ user.email }}</p> </div> </body> <script> Vue.http.options.root = "https://vue-demo-rhp-default-rtdb.asia-southeast1.firebasedatabase.app/"; var app = new Vue({ el: "#app", data() { return { user: { username: "", email: "" }, users: {}, getID: "" }; }, methods: { createNewUser() { this.$http .post("data.json", this.user) .then(response => { return response.json(); }) .then(data => { console.log(data); }) .catch(error => { console.log(error); }); }, getAllUsers() { this.$http .get("data.json") .then(response => { return response.json(); }) .then(data => { this.users = data; console.log(this.users); }) .catch(error => console.log(error)); }, getUserById(id) { this.$http .get("data/" + id + ".json") .then(response => { return response.json(); }) .then(data => { console.log(data); this.user = data; }) .catch(error => console.log(error)); }, } }); </script> </html> |
