Vue/vue
1
0
Fork 0
mirror of https://github.com/vuejs/vue.git synced 2024-11-21 20:28:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

update examples with new transition api

Browse Source
This commit is contained in:
Evan You 2016-07-13 14:27:06 -04:00
parent 6672481b58
commit e61a0189a4
2 changed files with 30 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
examples/firebase/index.html
View File

@ -9,15 +9,17 @@
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<!-- VueFire -->
<script src="https://cdn.jsdelivr.net/vuefire/1.0.1/vuefire.min.js"></script>
<script src="https://cdn.jsdelivr.net/vuefire/1.2.0/vuefire.min.js"></script>
</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>
<transition v-for="user in users" :key="user['.key']">
<li class="user">
<span>{{user.name}} - {{user.email}}</span>
<button v-on:click="removeUser(user)">X</button>
</li>
</transition>
</ul>
<form id="form" v-on:submit.prevent="addUser">
<input v-model="newUser.name">

44
examples/modal/index.html
View File

@ -9,33 +9,35 @@
<body>
<!-- template for the modal component -->
<script type="text/x-template" id="modal-template">
<div class="modal-mask" transition="modal">
<div class="modal-wrapper">
<div class="modal-container">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" @click="$emit('close')">
OK
</button>
</slot>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" @click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</div>
</transition>
</script>
<!-- app -->