Add some vue books/docs.

2023-12-21 15:49:35 +01:00
parent 8cf816c158
commit 37052e97fc
13 changed files with 365 additions and 0 deletions
--- a/vue/movies.html
+++ b/vue/movies.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>movies</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+</head>
+
+<body>
+<main>
+    <div class="container">
+        <h1>movies</h1>
+        <div id="v-app">
+            <table class="table table-striped">
+                <tr>
+                    <th>#</th>
+                    <th>Title</th>
+                    <th>Director</th>
+                    <th>Actions</th>
+                </tr>
+                <tr v-for="movie in movies" is="movie" :movie="movie"></tr>
+            </table>
+            <template id="template-movie-raw">
+                <tr>
+                    <td>
+                        {{movie.id}}
+                    </td>
+                    <td class="col-md-6">
+                        <input v-if="movie.editing" v-model="movie.title" class="form-control">
+                        </input>
+                        <!--in other occasions show the movie title-->
+                            <span v-else>
+                                {{movie.title}}
+                            </span>
+                    </td>
+                    <td>
+                        <input v-if="movie.editing" v-model="movie.director" class="form-control">
+                        </input>
+                        <!--in other occasions show the movie director-->
+                            <span v-else>
+                                {{movie.director}}
+                            </span>
+                    </td>
+                    <td>
+                        <div class="btn-group" v-if="!movie.editing">
+                            <button @click="editMovie(movie)" class="btn btn-default">Edit</button>
+                            <button @click="deleteMovie(movie)" class="btn btn-danger">Delete</button>
+                        </div>
+                        <div class="btn-group" v-else>
+                            <!--If the movie is taken from the db then it will have an id-->
+                            <button v-if="movie.id" class="btn btn-primary" @click="updateMovie(movie)">Update movie
+                            </button>
+                            <!--If the movie is new we want to store it-->
+                            <button v-else class="btn btn-success" @click="storeMovie(movie)">Save New movie</button>
+                            <!--Always show cancel-->
+                            <button @click="movie.editing=false" class="btn btn-default">Cancel</button>
+                        </div>
+                    </td>
+                </tr>
+            </template>
+            <p class="lead">Here's a list of all your movies.
+                <button @click="createMovie()" class="btn btn-primary">Add a new one?</button>
+            </p>
+            <pre>{{ $data | json }}</pre>
+        </div>
+    </div>
+</main>
+
+<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
+<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.js"></script>
+<script src='/js/app.js' type="text/javascript"></script>
+</body>
+</html>