|
18 | 18 | color: #7f8c8d; |
19 | 19 | text-decoration: line-through; |
20 | 20 | } |
21 | | - |
22 | | -.bounce-enter { |
23 | | - animation: bounce-in .5s; |
24 | | -} |
25 | | -.bounce-leave { |
26 | | - animation: bounce-out .5s; |
27 | | -} |
28 | | -@keyframes bounce-in { |
29 | | - 0% { |
30 | | - transform: scale(0); |
31 | | - } |
32 | | - 50% { |
33 | | - transform: scale(1.2); |
34 | | - } |
35 | | - 100% { |
36 | | - transform: scale(1); |
| 21 | + .bar { |
| 22 | + transition: width 0.5s; |
| 23 | + -webkit-transition: width 0.5s; |
| 24 | + -moz-transition: width 0.5s; |
| 25 | + -o-transition: width 0.5s; |
| 26 | + height: 20px; |
| 27 | + background: black; |
| 28 | + } |
| 29 | + |
| 30 | + .fade-enter-active, .fade-leave-active { |
| 31 | + transition: opacity .5s |
37 | 32 | } |
38 | | -} |
39 | | -@keyframes bounce-out { |
40 | | - 0% { |
41 | | - transform: scale(1); |
42 | | - } |
43 | | - 100% { |
44 | | - transform: scale(0); |
| 33 | + .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ { |
| 34 | + opacity: 0 |
45 | 35 | } |
46 | | -} |
| 36 | + |
47 | 37 | </style> |
48 | 38 | </head> |
49 | 39 | <body> |
|
52 | 42 | <div id="demo"> |
53 | 43 | <div style="float:left;height:400px;overflow: auto;"> |
54 | 44 | Title=<input v-model="title"/> |
55 | | - <ol> |
56 | | - <li v-transition="bounce" v-repeat="todos"> |
57 | | - <span v-on="click: done = !done" class="{{done ? 'done' : ''}}"> |
58 | | - {{content}} |
59 | | - </span> |
60 | | - <button v-on="click:remove($index)">Remove</button> |
61 | | - </li> |
62 | | - </ol> |
| 45 | + |
| 46 | + <transition-group name="fade" tag="ol"> |
| 47 | + <li v-for="(todo,index) in todos" :key="todo"> |
| 48 | + <span @click="todo.done = !todo.done" :class="{done: todo.done}"> |
| 49 | + {{todo.content}} |
| 50 | + <button @click="remove(index)">Remove</button> |
| 51 | + </span> |
| 52 | + </li> |
| 53 | + </transition-group> |
| 54 | + |
63 | 55 | Tasks# {{todos.length}}<BR/> |
64 | 56 | N={{n}}<BR/> |
65 | 57 | </div> |
66 | 58 | <div style="padding-left:30px;height:400px;overflow: auto;width:30%"><pre>data JSON: {{$data | json 2}}</pre></div> |
67 | 59 |
|
68 | 60 | <div style="clear:left"> |
69 | 61 | Using a v-text directive title=<span v-text="title"></span> |
| 62 | + <div>Smooth CSS animation: |
| 63 | + <input type="button" value="+" @click="barValue += 50"/> |
| 64 | + <input type="button" value="-" @click="barValue -= 50"> |
| 65 | + </div> |
| 66 | + <div class="bar" :style="{ width: barValue + 'px' }"></div> |
70 | 67 | <div v-text="'Using a v-text directive with inline expression, title='+title"></div> |
71 | 68 | <div>Title reversed={{title | reverse}}</div> |
72 | | - <div>Title wrapper={{title | wrap '<<' '>>'}}</div> |
73 | | - <div v-my-directive="myarg:title">xx</div> |
74 | | - <my-component my-msg="hello">Special content</my-component> |
75 | | - |
76 | | - <button v-on="click:clickHandler">Call clickHandler in Scala</button> |
77 | | - <button v-on="click:n++">Increment N</button> |
78 | | - |
79 | | - <button v-on="click:addTask">Add Task</button> |
80 | | - <button v-on="click:change1st">Change 1st</button> |
81 | | - <button v-on="click:remove(0,$event)">Remove 1st</button> |
82 | | - <button v-on="click:flipAll">Flip All</button><BR/><BR/> |
83 | | - Via custom filter <select v-model="selected" options="todos | extract 'content'"></select> |
84 | | - Via computed property<select v-model="selected" options="todosFiltered"></select> |
| 69 | + <div>Title wrapper={{title | wrap('<<','>>')}}</div> |
| 70 | + <div v-mydirective="title">xx</div> |
| 71 | + <my-component my-msg="hello">Special content</my-component> |
| 72 | + <!----> |
| 73 | + <button @click="clickHandler">Call clickHandler in Scala</button> |
| 74 | + <button @click="n++">Increment N</button> |
| 75 | + <!----> |
| 76 | + <button @click="addTask">Add Task</button> |
| 77 | + <button @click="change1st">Change 1st</button> |
| 78 | + <button @click="remove(0)">Remove 1st</button> |
| 79 | + <button @click="flipAll">Flip All</button><BR/><BR/> |
| 80 | + Todos computed: {{ todosComputed }} |
85 | 81 | </div> |
86 | 82 | </div> |
87 | 83 |
|
88 | 84 |
|
89 | | -<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.14/vue.min.js'></script> |
| 85 | +<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js'></script> |
90 | 86 | <div id="mydiv"></div> |
91 | 87 |
|
92 | 88 | <script type="text/javascript" src="../scala-js-vue-js-example-fastopt.js"></script> |
93 | | -<script> |
94 | 89 |
|
95 | 90 | <!-- vue end --> |
| 91 | +<script> |
| 92 | + |
96 | 93 | // custom filter to pull out field |
97 | | - // should see if I can do this on Scala side TODO |
98 | | - Vue.filter('extract', function (value, keyToExtract) { |
99 | | - return value.map(function (item) { |
100 | | - return item[keyToExtract] |
101 | | - }) |
102 | | - }) |
| 94 | + // Now done in Scala. |
| 95 | + |
103 | 96 | // we get DemoVue back from Scala, then use it |
104 | | - var demo=example.Todo().main(); |
105 | | - demo.title="Todo Todo Todo" |
| 97 | + var demo=example.Todo.main(); |
| 98 | + |
106 | 99 | demo.todos.push({done:false,content:"Extra task"}) |
107 | | - //demo.todos[0]=({done:false,content:"!!!!"}) |
108 | | - //demo.todos.$set(0, {done:false,content:"!!!!"}) |
| 100 | + |
109 | 101 | </script> |
110 | 102 |
|
111 | 103 | </body> |
|
0 commit comments